Develop Note by J.S.

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

배포 시 남아있는 Cache로 인해 각 chunk 파일들이 cache된 파일을 다운받아 즉각적으로 수정내용이 반영되지 않아 보이는 경우에는 Output 파일에 hash값을 추가하면 해결 할 수 있습니다. module.exports = { configureWebpack: (config) => { config.output.filename = 'js/[name].[chunkhash].js'; config.output.chunkFilename = 'js/[name].[chunkhash].js'; }, }

다중 Vue Instance로 여러 페이지 생성 시에는 vue.config.js에서 각 Path별 entry 경로를 설정하여 사용합니다. module.exports = { pages: { index: { entry: 'src/main.ts', template: 'public/index.html', filename: 'index.html', }, separate: { entry: 'src/pages/separate-page/main-separate-page.ts', template: 'public/separate/index.html', filename: 'separate/index.html', }, }, } 여기서 Production 빌드로 배포 시에 각 인스턴스에 쓰인 css파일이 하나의 chunk파일에..

브라우저에서 제공하는 'DevTools' (개발자 도구)는 개발자에게 다양한 기능들을 제공합니다. Network, Console, Vue개발자의 경우 Chrome Extension Vue.js devtools 확장프로그램을 설치하여 개발 테스트 및 디버깅을 합니다. 또한 Console에 노출되는 에러의 경우 에러가 발생된 파일의 경로를 노출하고, 클릭 시 개발자 도구 'source' Tab에서 확인가능합니다. 이를 소스 맵이라고 하는데요, 소스 맵(Source Map)은 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능을 제공합니다. 해당 기능들은 Production 배포 시에는 보안상의 이슈로 자동으로 노출되지 않습니다. // vite.config.ts export default define..

DB Replication Sync Issue(데이터 정합성) 발생 원인 분석 및 조치 방법입니다. 1. 복제지연 가능성 1) SBR(query기반 복제) 인지 RBR (row기반 복제) 인지 체크 - 한번의 트랜잭션이 영향을 미치는 row의 개수가 적을 수록 RBR이 더 좋음. 2) Write 쿼리량 증가 - master의 Multi-Threaded Replication 설정의 worker 스레드 개수 (16개 이상은 차이가 없다고 함) 3) Slave 로드 증가 - Slave에서 실행되는 Select(조회) 트래픽으로 인해 처리 성능이 지연되면서 복제 지연이 발생하는 경우 2. 조치방법 1) 반동기 복제방식 (Semi-Sync Replication) - Master에 write commit 시 Sla..

1. SEO 과정 1) 크롤링 : 웹 크롤러를 이용하여 웹 페이지 정보를 가져옵니다. 웹 크롤러는 사이트를 방문한 다음 모든 링크를 타고 다니며 새로운 페이지들의 정보를 수집합니다. 텍스트만 읽기 때문에 이미지, 동영상 정보는 읽을 수 없습니다. (alt text요소 추가 필요) 2) 인덱싱 : 웹 크롤러가 수집한 정보를 구글 검색 색인에 저장합니다. 검색엔진에 의해 색인이 완료되면 검색 결과에 노출될 수 있습니다. 3) 랭킹 : 검색엔진은 사용자가 검색하는 키워드를 색인 내에서 가장 일치하는 페이지를 찾아 검색 결과에 노출 시킵니다. 이때 각 검색 엔진의 알고리즘에 따라 페이지들의 순위를 매깁니다. 일반적으로 HTML title, meta description 태그를 사용해야 검색 주제와 콘텐츠에 적합..

웹 브라우저의 렌더링 방식은 SSR, CSR 이 있습니다. 두 방식에 특징 및 장단점에 대한 내용을 정리하였습니다. 1. SSR SSR은 Server Side Rendering의 약자로, 웹 페이지의 내용을 서버에서 모두 구성한 뒤 클라이언트로 보내주는 방식입니다. SSR의 특징은 초기 렌더링이 빠르고 SEO (Search Engine Optimization) 최적화에 대한 장점이 있습니다. 대규모 웹 어플리케이션의 초기 렌더링 속도문제를 SSR로 개선할 수 있습니다. 하지만 추가 페이지를 로드할 경우 서버에 Request를 보내는 Cycle을 반복하여 전환 시 화면 깜빡임 문제, 서버 과부하 문제 및 로드 시간이 소요되는 단점이 있습니다. 2. CSR CSR은 Client Side Rendering의 ..

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