기본 설정

• Vite + Svelte 조합: 현재 가장 권장되는 개발 환경
• 프로젝트 생성: npm create vite@latest 명령어 사용
• 개발 서버 실행: npm run dev 명령어로 로컬 서버 시작

핵심 파일 구조

• package.json: 프로젝트 의존성과 스크립트 관리
• main.js: Svelte 앱의 진입점 (app.svelte를 마운트)
• app.svelte: 메인 컴포넌트 파일
• index.html: 기본 HTML 템플릿

개발 도구 및 환경

에디터 설정

• VS Code: Svelte 전용 익스텐션 설치 필수
• 문법 하이라이팅: .svelte 파일 인식을 위한 설정
• 자동완성: Svelte 컴포넌트와 문법 지원

빌드 시스템

• Vite의 장점: 빠른 HMR(Hot Module Replacement), - ES 모듈 기반
• 번들링: 프로덕션 빌드 시 최적화된 코드 생성
• CSS 처리: 스타일 자동 처리 및 최적화

🇹🇭 번들 기반 개발 서버 작동(웹팩)

Entry point: 애플리케이션의 시작점
Routes: 다양한 경로와 컴포넌트들
Modules: 각각의 모듈과 의존성들
Bundle: 모든 것을 하나로 묶은 번들 파일
Server ready: 번들링이 완료된 후 서버 준비

이는 Vite와 대조되는 방식으로, 모든 파일을 미리 번들링한 후에 서버를 시작하는 방식. 반면 Vite는 필요한 모듈만 즉시 변환해서 제공하므로 더 빠른 개발 경험을 제공.

🇹🇭 Native ESM 기반 개발 서버의 동작(vite)

🟢 활성 경로 (초록색)

HTTP 요청이 들어온 실제 경로만 활성화
필요한 모듈만 즉시 변환하여 제공

⚫ 비활성 경로 (회색)

사용하지 않는 route와 module은 로드하지 않음
메모리와 처리 시간 절약

🔄 동적 임포트

코드 스플리팅으로 필요할 때만 추가 모듈 로드
초기 로딩 시간 최소화

⚡ 성능 장점:

즉시 시작: 전체 번들링 없이 서버 바로 시작
온디맨드 처리: 요청받은 파일만 변환
빠른 HMR: 변경된 모듈만 교체
효율적 메모리 사용: 필요한 것만 메모리에 로드

이것이 바로 Vite가 기존 웹팩 기반 개발서버보다 압도적으로 빠른 이유

실무 팁

프로젝트 구조

• 컴포넌트는 .svelte 확장자 사용
• HTML, CSS, JavaScript가 하나의 파일에 통합
• 각 섹션(< script >, < style >, 마크업)의 역할 이해

개발 워크플로우

• 프로젝트 생성 → Vite 템플릿 사용
• 의존성 설치 → npm install
• 개발 서버 시작 → npm run dev
• 코드 작성 → .svelte 파일에서 개발
• 빌드 및 배포 → npm run build

(+) vscode에서 Svelte for VS Code 추가