개요 차세대 프론트엔드 빌드 도구 Vite 요약 Vue.js 창시자 Evan You가 만들었고, 개발 중 대기 시간을 줄이는 데 초점 맞춤 프랑스어로 vite는 빠름을 의미함 핵심 가치 개발 서버 즉시 기동에 가까운 체감 속도 HMR이 가볍고 빠르게 동작 의존성 프리번들을 esbuild로 처리해 개발 경험 가속 프로덕션 빌드는 Rollup으로 안정적 번들 생성 배경과 문제 기존 번들러(Webpack) 방식은 시작 시 전체 그래프를 사전 번들링하는 구조 프로젝트 규모가 커질수록 첫 기동이 지연 코드 변경 반영 또한 번들 재생성 비용으로 지연 발생 개발 체감 문제 ...
개요 Vite 기반의 테스트 프레임워크 Vitest 소개 및 실무 사용 패턴 정리 Jest와 거의 동일한 API를 제공하고, Vite의 ESM/HMR을 활용해 빠른 재실행을 제공함 Vite 프로젝트에서는 최소 설정으로 바로 사용 가능 빠른 실행과 재실행, watch 효율 높음 Jest API 호환성 높아 러닝 커브 낮음 TypeScript 네이티브 지원 1. 기본 구조 테스트 파일 명명 규칙 *.spec.ts 또는 *.test.tsdescribe(name, fn) 관련 테스트를 그룹화하는 컨테이너 import { describe, it, expect } from 'vitest' describe('계산기', () => { it('두 수를 더한다', () => { expect(1 + 2).toBe(3) }) it('두 수를 뺀다', () => { expect(5 - 3).toBe(2) }) }) 첫 번째 인자: 그룹 이름 두 번째 인자: 테스트 콜백 중첩 describe 구성 가능 it(name, fn) / test(name, fn) 개별 테스트 케이스 정의, 두 API는 동일 동작 ...