이번 포스트에서는 vite-plugin-vue-devtools의 사용법에 대해 살펴보자.https://devtools-next.vuejs.org/guide/getting-started Vue DevToolsUnleash Vue Developer Experiencedevtools-next.vuejs.org  설치 및 환경설정 프로젝트 생성 시 설치하기vite를 이용해서 vue를 개발하는 과정에서 전체적인 프로젝트의 구조를 파악하고 디버깅을 위해 devtools가 추가되었다. 이는 기존에 browser의 plugin 기반으로 제공하던 기능보다 훨씬 강력한 기능을 제공한다. (vite-plugin-vue-devtools를 설치하면 browser의 plugin은 비활성화 된다.)가장 쉬운 설치 방법은 처음에 프..

이번 포스트에서는 src/assets에 저장한 이미지를 가져오는 방법에 대해 살펴보자. assets 이미지 가져오기 정적 로딩 assets 아래의 이미지를 정적으로 가져오려면 그냥 js를 참조하듯이 경로를 작성해주면 된다. 또는 파일을 import 해서 사용하는 방법도 제시한다. import staticImg from '@/assets/images/123.png' 개별 파일 동적 로딩 반면에 동적으로 로딩하기 위해서는 좀 복잡한 절차를 거쳐야 한다. 기존의 Vue 2.x는 WebPack을 사용해서 require 함수를 이용해서 로딩했었는데 Vue 3.x에서는 Vite로 변경되면서 URL 객체를 사용하는 방식으로 변경되었다. https://ko.vitejs.dev/guide/assets.html#new-u..

이번 포스트에서는 vite의 환경 변수에 대해 살펴보자 환경 변수 import.meta.env Vite의 환경변수는 import.meta.env 객체로 관리된다. (import.meta는 import된 모듈의 context 정보를 가져오기 위한 객체이다. ) import.meta.env.MODE: 현재 앱이 동작하는 모드(run build는 development 모드, build는 production 모드) import.meta.env.BASE_URL: 앱이 실행되는 기본 URL로 기본 값은 / import.meta.env.PROD: 앱이 현재 production 모드인지 boolean으로 반환 import.meta.env.DEV: 앱이 현재 development 모드인지 boolean으로 반환 impo..

이번 포스트에서는 vitest와 VTU를 이용해 TODO 앱에 대한 단위테스트를 작성해보자. Todo 단위테스트 Todo App 이전에 작성했던 Todo App을 대상으로 단위테스트를 처리해보자. https://goodteacher.tistory.com/659 [Vue 3] 03.Vite 기반의 Vue 개발 2 이번 포스트에서는 Vite 기반 프로젝트에서 간단한 코딩을 해보자. 소스 코드 작성 src의 구조 먼저 src의 구조에 대해 살펴보자. Vue 애플리케이션은 index.html에서 main.js를 로딩하고 main.js에서 App.vue goodteacher.tistory.com 테스팅 이후의 테스트들은 테스트만 첨부한다. 여러 API를 써보기 위한 목적이기 때문에 TDD등과는 거리가 멀다는 점을..

이번 포스트에서는 VTU를 이용한 vue component test에 대해서 살펴보자. VTU(Vue Test Utils) VTU란? VTU란 vue test utils의 약자로 vue component를 테스트하기 위한 도구들이다. vitest는 사실 vue와 상관없이 vite라는 환경에서 javascript의 동작을 테스트하기 위한 것이어서 vue를 테스트하기에는 한계가 있기 때문에 VTU가 추가로 필요하다. (vitest가 Junit이라면 VTU는 @ExtendWith(SpringExtension) 정도로 생각하면 쉽겠다) https://test-utils.vuejs.org/ Vue Test Utils The official testing suite utils for Vue.js 3 test-uti..

이번 포스트에서는 setTimeout 이나 setInterval 사용 환경 즉 Timer에 대한 테스팅에 대해 살펴보자. Timer Test 테스트 대상 함수 준비 먼저 테스트 할 함수를 준비해보자. 전체적인 테스트는 sync와 async 환경에서 테스트 한다. let interval500 = 0, timeout2000 = 0 // 동작 회수를 카운트하기 위한 변수 let intervalId // interval 작업을 중지하기 위한 변수 const mywork = () => { setTimeout(() => { console.log('timeout 2000', timeout2000++) }, 2000) intervalId = setInterval(() => { console.log('interval 5..

이번 포스트에서는 가짜 객체인 mock을 이용한 테스트 방식에 대해서 살펴보자. 시간 기반 테스팅과 가짜 객체의 활용 시간 기반 테스트 진짜 코드들만도 관리하기 힘든데 왜 우리는 가짜 객체까지 활용하면서 테스팅을 해야할까? 만약 일과 시간(09:00 ~ 18:00) 에만 동작해야 하는 함수가 있다고 생각해보자. const purchase = () => { const currentHour = new Date().getHours() const [open, close] = [9, 18] return currentHour > open && currentHour < close } 위 함수가 제대로 동작하는지 검증하기 위해서는 일과 시간이 아닌 때 호출해서 동작 안하는지 확인하고 일과 시간에 호출해서 동작하는지 확..

이번 포스트에서는 vitest에서 assertions을 작성하기 위해 사용하는 다양한 matcher들에 대해 살펴보자. 아래 내용들은 https://vitest.dev/api/expect.html 의 api들을 일부 요약한 것이므로 한번쯤 사이트에 방문하여 어떤 기능들이 있는지 가볍게 살펴보는 것을 권한다. Vitest A blazing fast unit test framework powered by Vite vitest.dev toBeXX toBe toBe는 기본형과 객체형을 === 연산자로 비교한 결과를 사용한다. 따라서 기본형은 형변환 없이 값이 같음, 참조형의 경우 같은 객체를 참조하고 있는지 즉 동일성을 검사한다. test('toBe: 기본형과 객체형의 === 비교', () => { const ..