Develop Note by J.S.

1. Keep-Alive 동적 Component 는 컴포넌트의 동적 렌더링이 필요할 때 많이 사용되고 있습니다. 하지만 활성화 된 컴포넌트에서 다른 컴포넌트로 전환 하였을 때 기존 컴포넌트의 Unmount와 동시에 데이터가 모두 소멸되는데, 다시 해당 컴포넌트로 돌아갔을 때, 이전 작업했던 내용을 유지하고자 할 때 Keep-Alive 기능을 사용합니다. 2. Include / Exclude 기본적으로 KeepAlive는 모든 컴포넌트에 대하여 캐시를 생성합니다. Include / Exclude 옵션으로 캐시로 관리할 특정 컴포넌트만 지정할 수 있습니다. 3. Vue-Router에서 Children으로 속한 Path 별 Component의 렌더링 시에는 아래와 같은 방법으로 캐싱이 가능합니다.

Cypress Test 코드 작성 시 Store의 데이터를 확인하기 위하여 Pinia - Cypress 연동 테스트를 진행 하였습니다. Vuex 또한 동일한 방법으로 적용 할 수 있습니다. 1. 테스트 방법에 차이점 알아두어야 할 점은 현재까지의 Cypress 테스트 코드는 사용자의 Action을 기준으로 테스트 코드를 작성 하였으며, cy.get(), cy.should() 를 이용하여 element정보와 기대값을 비교하였고, 4sec (Default wating time) 를 대기하여 Action에 대한 결과를 체크하였습니다. 현재 구현한 Store연동 테스트 코드는 비동기적인 테스트 환경이 제공되지 않습니다. 즉, 사용자 Action에 따라 Dom의 Element가 기대값을 기다리는 것처럼 테스트 되..

1. 동적 컴포넌트 동적 컴포넌트 :is 는 선택된 탭에 따라 렌더링되는 컴포넌트 기능 및 권한에 따라 노출되는 컴포넌트 기능 등등, 환경에 따른 동적 컴포넌트 렌더링 기능입니다. 2. 예제코드 동적 컴포넌트 렌더링 방법에 대한 예제 코드 입니다. markRow : 객체를 원시로 표현한 뒤 반환하여 반응형 시스템에서 관찰되지 않아 불필요한 재렌더링을 줄여 애플리케이션의 성능을 최적화함. markRow로 인하여 watch가 동작되지 않을 경우 // 기존 watch(props, (n, o) => (user.value = props.data)); // 변경 watch(() => { if (props.data) { user.value = props.data; } }, callback()); 참고사이트 https..

Vite Tool을 이용하여 Vue3 + Typescript 프로젝트 생성 및 초기 Config File에 대한 설명 입니다. 1. vue 프로젝트 생성 $npm init vue@latest 프로젝트에서 사용할 기능들을 체크하여 생성합니다. 테스트는 Typescript, Vue Router, Pinia, ESLint, Prettier를 선택하여 프로젝트를 생성하였습니다. 모듈 설치 $npm install DevServer 실행 $npm run dev Build $npm run build 2. Vite.config.ts import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitej..

Vite(프랑스어로 "빠른", 발음: /vit/)는 Module Bundling, DevServer, HMR 등의 기능을 지원하는 프론트엔드 개발자를 위한 Tools 입니다. Vite를 사용해야하는 이유 1. 번들링(Bundling) .js, .html, .vue, .jsx 등 여러 종류의 파일로 이루어신 소스를 브라우저에서 실행할 수 있도록 하나로 모아주는 Bundling 기능을 제공합니다. 2. 개발 서버 구동속도 향상 이전 번들링 기반 개발서버 구동 방식에는 모든 소스코드의 크롤링 및 빌드작업이 완료되어야 페이지 접속이 가능했습니다. 소스내에 포함된 Require 모듈들의 번들링 완료 후 서버가 구동되었던 방식에서 Native ESM(ES Modules) 기반 개발 서버 구동방식으로 브라우저 실행 ..

SPA(Single Page Application)로 개발을 하다보면 여러 조건들과 권한에 따라 로직을 구분해야하는 상황이 발생합니다. 성격이 다른 페이지들을 단일 Vue Instance에서 구현하다보면 물리적으로 분리를 시키는 것이 더 효율적일 때가 있습니다. 이때 다중 Instance를 생성하여 해결 할 수 있습니다. File 분리 Vue Instance를 생성할 파일의 경로를 분리하여 각각의 Instance를 생성합니다. // vueInstance1/main.ts import { router } from './router' import { createApp } from 'vue' import App from './App1.vue' const app = createApp(App); app.use(ro..

Props로 데이터를 하위컴포넌트에 전달할 때, 하위 Component -> 하위 Component .... 등 전달해야하는 end 컴포넌트까지의 루트가 복잡해지면 props전달이 반복되는 비효율적인 데이터 전달을 prop 드릴링이라고 합니다. vuex, pinia 등의 상태관리 라이브러리를 사용하여 해결 할 수도 있지만, 특정 범위내에서만 유효한 데이터 전송 루트가 필요할 경우 Provide(데이터 제공)/ Inject(데이터 주입)을 이용할 수 있습니다. // 제공 컴포넌트 // 주입 컴포넌트 {{ location }} 또한 컴포넌트의 트리가 깊고 넓을 때, 다수의 개발자가 참여한 대규모 앱 개발 시에는 일반적인 provide 키워드 사용으로 인한 충돌 가능성이 있습니다. 이때 Symbol()을 사용..

Watch는 Obverving 상태의 값이 변경 될 경우 동작시키는 logic을 사전에 정의하여 사용 할 수 있습니다. watch(question, async (newQuestion, oldQuestion) => { if (newQuestion.indexOf('?') > -1) { answer.value = '생각 중...' try { const res = await fetch('https://yesno.wtf/api') answer.value = (await res.json()).answer === 'yes' ? '네' : '아니오' } catch (error) { answer.value = '에러! API에 연결할 수 없습니다. ' + error } } }) 또한 단일 변수가 아닌 getter 등 여..