Develop Note by J.S.

배포 시 남아있는 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파일에..

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

Cypress의 Custom Commend를 활용한 Login, Logout Test 입니다. 1. Commend 등록 cypress/support/commonds.ts 파일과 cypress/support/index.d.ts 에 사용할 Custom Command를 정의합니다. // cypress/support/commands.ts file // 요소 가져오기 Cypress.Commands.add('dataCy', (selector) => { return cy.get(`[data-cy=${selector}]`); }); // 요소 접근 후 클릭 Cypress.Commands.add('actionClick', (selector) => { return cy.get(`[data-cy=${selector}]`)...

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