grace's dev_note

Vue.js는 MVVM(Model-View-ViewModel) 패턴을 표방하고 있지만 코어 라이브러리는 ViewModel에 집중되어 있습니다. 코드의 재활용성이나 속도에 큰 장점이 있는 단일 페이지 어플리케이션(SPA: Single Page Application)을 개발할 때 Router와 같은 공식 라이브러리를 이용할 수 있으며, 여러 컴포넌트들이 상태를 유지하고 데이터를 공유하기 위해서 Vuex와 같은 라이브러리를 이용할 수 있습니다. Vue는 가상노드(VNode)를 생성하는 해당 노드에 먼저 모든 DOM을 구성한 후 브라우저에게 최종 DOM 엘리먼트 변경을 통지함으로써 속도 저하를 방지했습니다. 하지만, 개발이 지속되면서 코드의 길이가 길어져 가독성이 떨어지고, 수많은 컴포넌트들이 공유하는 데이터 ..

지난 게시글에 이어 진행됩니다. 두 가지 에러를 모두 핸들링 해주고 났는데도 불구하고 또 다른 에러가 저의 테스트를 막습니다(...) 제발 테스트 하게 해줘! TypeError: Cannot set properties of undefined (setting 'hasOwnProperty') 이번에 만난 에러는 이런 에러입니다. 각 컴포넌트를 가져오려고하는데 가져오지 못하는걸까? shallowMount 에서 에러가 발생했는데 컴포넌트가 undefined 인 것 처럼 보여서 뭔가 컴포넌트를 인식을 못하는걸까? 해서 틸드 기호로 가져오던 import 도 상대 경로로 수정해보고 파일 확장자를 지정해주지 않아서일까 해서 파일 확장자도 지정해주었는데도 불구하고 에러가 계속해서 발생했습니다. 여러 구글링을 진행해본 결..

지난 게시글에 이어 발생한 jest 에러입니다. 지난 에러를 해결한 후 다시 실행했더니 아래와 같은 에러가 발생했습니다. ReferenceError: location is not defined / ReferenceError: document is not defined The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string. Consider using the "jsdom" test environment. ReferenceError: document is not defined 사실 이 에러는 에러 메세지를 읽어보시면 아실 수 있을 ..

react, next에 찌든 뇌를 세탁해서 더 넓은 시야로 프로젝트를 보기 위해 요즘 vue3를 공부하면서 프로젝트를 진행 중입니다. 어느정도 프로젝트가 완성되고 unit 테스트를 위해 jest를 연결 중인데 계속 해서 에러가 나서 이틀 정도 고생했던 것 같습니다. 다른 분들이 저와 같은 문제로 너무 오랜 기간 고민하지 않으셨으면 하는 바램에서 에러 일지를 작성합니다 Jest encountered an unexpected token Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to su..

프로덕션 버전으로 빌드하고자 한다면 vite build 명령을 실행해주세요. 빌드 시 기본적으로 /index.html 파일이 빌드를 위한 엔드 포인트로 사용되며, 정적 호스팅을 위한 형태로 진행됩니다. 브라우저 지원 현황 빌드된 프로덕션 버전의 경우 모던 Javascript를 지원하는 브라우저에서 동작한다고 가정합니다. 빌드된 프로덕션 버전은 모던 Javascript를 지원하는 환경에서 동작한다고 가정합니다. 따라서 Vite는 기본적으로 네이티브 ES 모듈, 네이티브 ESM의 동적 Import, 그리고 import.meta를 지원하는 브라우저를 타깃으로 하고 있습니다. 만약 자바스크립트 타깃을 지정하고자 한다면, build.target 설정을 이용해주세요. 다만 버전은 최소한 es2015 이상이어야 합니..

MSW 사용 방법 MSW 설치하기 npm install msw --save-dev # or yarn add msw --dev 먼저 MSW 패키지를 설치합니다. 패키지를 설치하고 나면 프로젝트에 MSW를 세팅합니다. Service Worker를 제공하기 위해 사용하고자 하는 프로젝트의 directory를 지정해서 실행해줍니다. npx msw init ./public --save 다음을 실행하고나면 public 디렉토리에 service worker가 만들어지고 package.json에 다음과 같이 표시됩니다 { "name": "your-app", "msw": { "workerDirectory": "public" } } Define Mocks 이제 Mocking 할 API를 핸들링할 핸들러를 만들어주어야 합니..

MSW MSW(Mock Service Worker)는 API Mocking 라이브러리로, 서버향의 네트워크 요청을 가로채서 모의 응답을 보내주는 역할을 합니다. 따라서, MSW 라이브러리를 통하면 Mock 서버를 구축하지 않아도 네트워크 수준에서 Mocking 할 수 있습니다. MSW가 이러한 역할을 할 수 있는 이유는 Service Worker를 통해 HTTP 요청을 가로채기 때문입니다. Service Worker가 뭐에요? Service Worker는 웹 애플리케이션의 메인 스레드와 분리된 별도의 백그라운드 스레드에서 실행시킬 수 있는 기술 중 하나입니다. Service Worker 덕분에 애플리케이션의 UI Block 없이 연산을 처리할 수 있습니다. 이러한 특징으로 인해, Service Worke..

전체 개발 프로세스 중 요구 사항 분석 및 기획, 백엔드 개발, 프론트엔드 개발에 이르는 각각의 개발 과정은 크게 겹치지 않고 진행되는 것이 가장 이상적입니다. 왜냐하면, 개발 과정에서 도출되는 요구 사항이나 사용 가능한 인터페이스에 변경이 있으면 각 단계별 의존성에 따라 다시 작업해야 하는 경우가 발생하기 때문입니다. 따라서, 개발 과정이 다음과 같이만 진행된다면 요구 사항과 제공된 스펙에 따라 순조롭게 프론트엔드 개발을 진행할 수 있습니다. 하지만 현실적으로 프론트엔드와 백엔드가 병행하여 개발하게 되는 경우가 많습니다. 이때 프론트엔드에서 백엔드의 API를 활용해야 하는 것처럼, 백엔드 개발에 종속적인 부분이 있다면, 해당 부분이 완성되기 전까지는 프론트엔드 개발을 진행할 수가 없고 그 부분이 진행된..

URL을 통해 에셋 가져오기 정적 에셋을 가져오게 되면 에셋에 접근할 수 있는 URL이 반환됩니다. import imgUrl from './img.png' document.getElementById('hero-img').src = imgUrl 예를 들어, imgUrl 객체는 개발 시 /img.png 값으로 할당되지만, 실제 프로덕션 버전에서는 /assets/img.2d8efhg.png와 같은 값이 할당됩니다. Webpack의 file-loader와 비슷한데, 하나 차이점이 있다면 vite는 절대 경로와 상대 경로 둘 다 사용할 수 있습니다. url()로 참조되는 CSS의 경우 동일한 방식으로 동작합니다. 일반적인 이미지, 미디어, 폰트 파일 타입은 자동으로 에셋 목록에 포함됩니다. 물론 assetIncl..

vite는 몇 가지 추가적인 vite 전용 옵션과 함께 잘 설계된 rollup의 플러그인 인터페이스를 기반으로 하는 플러그인들을 사용하여 확장할 수 있습니다. 이는 vite 사용자가 필요에 따라 개발 서버나 SSR과 같은 기능들을 확장할 수 있는 것과 동시에, 검증된 rollup 플러그인 생태계에도 의존할 수 있음을 의미합니다. 플러그인 추가하기 플러그인을 사용하려면 프로젝트의 devDependencies에 플러그인을 추가하고, vite.config.js 설정 파일의 plugins 배열에 해당 플러그인을 포함시켜야 합니다. 예를 들어, 레거시 브라우저에 대한 지원을 제공하기 위해 공식 플러그인 중 하나인 @vitejs/plugin-legacy를 사용하고자 한다면 다음과 같이 할 수 있습니다. // vit..