Develop Note by J.S.

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

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

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()을 사용..

v-model은 컴포넌트 또는 Form 입력에서 데이터의 양방향 바인딩을 구현하기 위해 사용하는 디렉티브입니다. Form입력 1. input text // v-bind, event listener 사용 시 메세지: {{ text }} // v-model 사용으로 코드의 단순화 메세지: {{ text }} 2. checkbox // checkbox 단일 체크 {{ checked }} // boolean 값을 사용 // checkbox 다중 체크 체크된 이름: {{ checkedNames }} // Array 값을 사용 젝 존 3. radio button // radio Button 선택한 것: {{ picked }} 하나 둘 4. select // 단일 셀렉트 선택됨: {{ selected }} // 단일..

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 등 여..

Methods로 변화가 적고 간단한 계산식을 구현 할 경우 상태가 변하지 않더라도 매번 연산작업이 수행되어 효율성이 떨어지는 상황에 대체할 수 있는 기능으로 Computed를 사용합니다. 만약 이전 계산식에서 Observing하고있는 상태값이 변하지 않을 경우 재연산 하지 않고 cache data를 그대로 사용하여 효율적으로 결과값을 가져올 수 있습니다. 책을 가지고 있다: {{ publishedBooksMessage }} 참조 : https://v3-docs.vuejs-korea.org/guide/essentials/computed.html

1. LifeCycle Hook 상기 이미지는 vue의 LifeCycle입니다. 기존의 Vue2에서 사용했던 LifeCylcle Hook의 사용법 또한 약간 차이점이 있습니다. 앞선 게시글에서 말씀드렸듯이, created대신 setup함수로 대체되었다는 부분 외에는 거의 비슷하지만 호출 방식의 경우 setup 함수 내에서는 composition api 방식으로 호출 할 수 도 있고, setup함수 외부에서는 기존의 option api 방식으로 LifeCycle Hook을 사용할 수 있습니다. import { onMounted, ref, reative } from 'vue' export default { setup() { const _ref = ref(3); const _reactive = reactive..