기록

아래의 코드에서 setTimeout 함수를 이용하던 중 함수 내부의 this와 함수 외부의 this가 다른 것을 가르키는 것을 확인했습니다. let elem = document.querySelector('#' + this._id + ' #' + elemId); if (elem == null) { setTimeout(function () { elem = document.querySelector('#' + this._id + ' #' + elemId); }); } setTimeout 함수 setTimeout 함수는 비동기 함수로서, 일정 시간이 경과한 후에 함수를 실행하는 기능을 제공합니다. 따라서 setTimeout 함수 내부에서는 콜백 함수를 정의하여 사용해야 합니다. setTimeout 함수의 this..

AgGrid의 gridApi AgGrid의 gridApi는 AgGrid 인스턴스에 대한 프로그래밍적인 제어를 제공합니다. gridApi를 사용하면 셀, 행, 열 등의 요소들에 대한 액세스 및 조작이 가능해집니다. https://sumni.tistory.com/108 AgGrid Options AgGrid의 gridApi는 그리드 인스턴스에 대한 프로그래밍적인 제어를 제공하는 반면, columnApi는 그리드 컬럼에 대한 제어를 제공합니다. gridApi를 사용하여 할 수 있는 작업은 다음과 같습니다. 행 추 sumni.tistory.com AgGrid 컴포넌트에서 onGridReady 메소드가 호출될 때, gridApi와 gridColumnApi를 컴포넌트의 데이터에 할당하고 있습니다. 이 데이터는 Ag..

https://sumni.tistory.com/105 [Vue] 컴포넌트 동적 생성 (agGrid.vue) 그림판 같은 툴에서 요소를 화면에 동적으로 생성하는 기능이 필요한데 외부 라이브러리를 쓰는 AgGrid인 경우 vue의 컴포넌트로 등록되어 있어서 일반 요소와 다른 생성 로직이 필요했습니다. 1. sumni.tistory.com 위의 코드를 실행하던 중 TypeError: Cannot read property 'insertBefore' of null 이런 에러가 발생하였다. 검색 결과 1. 캐시문제 캐시를 비우거나 시크릿 창 열기. 저는 이렇게 했을 때 해결되지 않았습니다. 2. html 템플릿에 초기화 되지 않은 데이터 v-if="!!data"를 이용 v-if="!!data"는 Vue.js의 조건..

그림판 같은 툴에서 요소를 화면에 동적으로 생성하는 기능이 필요한데 외부 라이브러리를 쓰는 AgGrid인 경우 vue의 컴포넌트로 등록되어 있어서 일반 요소와 다른 생성 로직이 필요했습니다. 1. 라이브러리 파일 //AgGrid.vue Rows in this example do not move, only events are fired 2. agGrid를 여러군데서 커스텀해서 사용하기 위해 따로 sample파일을 만든 것 같습니다. //AgGridSample.vue 3. 컴포넌트를 사용하는 화면 v-for문을 사용하여 data()함수 안의 agGrids만큼 컴포넌트를 생성합니다. //Editor.vue 위 코드에서는 defineAsyncComponent 함수를 사용하여 AgGridSample.vue 파일을..

AngularJS의 $scope는 Vue.js에서의 데이터와 관련된 영역과 유사한 개념입니다. Vue.js에서는 $scope 대신 데이터 객체를 사용합니다. AngularJS의 $scope를 Vue.js로 변환하려면 다음과 같은 단계를 따를 수 있습니다. $scope에 정의된 데이터를 Vue.js 데이터 객체로 변환합니다. Vue.js에서 데이터 객체는 일반 JavaScript 객체입니다. Vue.js의 데이터 바인딩 구문(v-bind, v-model, {{}})을 사용하여 Vue.js 데이터 객체와 HTML 요소를 연결합니다. Vue.js의 v-on 디렉티브를 사용하여 HTML 이벤트와 Vue.js 메소드를 연결합니다. AngularJS의 $watch를 Vue.js의 watch 속성으로 변환합니다. A..

아래 코드에서 common.js와 common2.js를 모듈화 import common from '@/assets/js/common.js'; import common2 from '@/assets/js/common2.js'; export default { name: 'HelloWorld', props: { msg: String }, methods: { method1() { common.method1(); }, method2() { common2.method2(); } } } 1. Webpack 사용하기 Webpack은 대표적인 모듈 번들러로서, 모듈의 종속성을 분석하고 묶어서 하나의 파일로 만들어 줍니다. 이를 사용하면 여러 개의 모듈을 하나의 파일로 번들링할 수 있습니다. 예를 들어, common.js와..

import common from '@/assets/js/common.js'; import HelloWorld from './components/HelloWorld.vue' 좌측의 구조에서 HelloWorld.vue에서 common.js를 가져올 때 App.vue에서 HelloWorld.vue를 가져올 때 위의 코드처럼 가져온다!! vue사용이 처음이라 경로표시에 대해 궁금한 점을 알아보았다. vue에서 경로를 가져올 때 @, .의 의미 @와 .은 모두 파일 경로를 나타내는 기호입니다. @: @ 기호는 Vue CLI에서 제공하는 앨리어싱(aliasing) 기능으로, 프로젝트 루트 경로를 가리킵니다. 이를 통해 상대 경로 대신에 프로젝트 루트 경로를 기준으로 파일 경로를 지정할 수 있습니다. .: . 기호..

i18n 라이브러리는 Vue.js의 공식 라이브러리 중 하나로, 다양한 언어와 지역을 지원하는 다국어 처리를 쉽게 구현할 수 있도록 도와줍니다. 1. Vue.js i18n 라이브러리 설치 npm install vue-i18n 2. Vue.js i18n 라이브러리 사용 main.js 파일에 다음과 같이 i18n 라이브러리를 추가합니다. import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n = new VueI18n({ locale: 'en', // 언어 설정 fallbackLocale: 'en', // fallback 언어 설정 messages: { en: { // 영어 메시지 hello: 'Hello World!' ..

[요구사항] 1. mian 페이지에서 subPage를 오픈. 2. 어떤 페이지에서 로그아웃되면 전체 페이지에서 로그아웃 (한 창만 로그아웃화면으로 이동하고 나머지는 닫음) 3. 부모창을 닫으면 자식창도 닫침. (부모창 닫을때 컨펌) 4. mian페이지 위에 최상위 부모창이 있을 경우도 있음. subPage1 $scope.logout = function () {//subPage1에서 로그아웃할때 바로 /lougout으로 이동하지 않고 상위 페이지 close sessionStorage.clear(); localStorage.setItem("closeAllTabs", "Y"); localStorage.setItem("closeTabsTrigger", "subPage1"); window.opener.close(..

웹 페이지 로드 과정 Prompt for unload 페이지를 벗어날 때(다른 페이지로 이동할 때) 발생한다. unloadEventStart에서 window에 beforeunload 이벤트가 발생한 후 unload 이벤트가 발생한다. Redirect (redirectStart, redirectEnd) 서버쪽에서 redirect 신호가 오면 발생한다.(HTTP code 301, 302) optional이라서, 발생하지 않을 수 도 있음. AppCache 서버에서 데이터를 받아오기 전에 브라우저에 캐시가 있는지 확인 내부 네트워크 처리 단계(DNS, TCP, Request, Response) DNS(domainLookupStart, domainLookupEnd) DNS에 요청을 보내기 전에 먼저 브라우저에 ..