지난 시간에 이어서 Vite 프로젝트에서 npm run dev 이후에 생기는 일에 대해 알아보도록 한다.
1. 명령어 실행
npm run start또는npm run dev:Vite프로젝트에서 이 명령어는Vite명령어를 실행하여 개발 서버를 시작한다.
2. Vite 개발 서버 시작
Vite개발 서버:Vite는 고성능 개발 서버를 제공하며, 이는 HTTP 서버를 시작하고 소스 파일을 모니터링한다.
3. 파일 시스템 기반 라우팅
파일 시스템 기반 라우팅:
Vite는 파일 시스템을 기반으로 라우팅을 처리한다. 프로젝트의 파일 구조를 기반으로 자동으로 라우트를 설정한다.
4. ES 모듈을 통한 즉시 변환 및 번들링
ES 모듈 사용:
Vite는ES 모듈을 통해 즉시 변환을 지원한다. 파일이 변경될 때마다 전체 번들링을 수행하는 대신, 변경된 모듈만 즉시 다시 로드한다. 이는Hot Module Replacement(HMR)를 통해 실시간으로 변경 사항을 반영한다.
5. Babel 및 TypeScript 설정
Babel 및 TypeScript 설정:
Vite는 기본적으로Babel을 사용하지 않지만, 필요에 따라Babel플러그인을 설정할 수 있다. TypeScript 파일도 자동으로 처리된다.
6. 플러그인 시스템
플러그인 시스템:
Vite는Rollup기반의 플러그인 시스템을 사용한다. 이를 통해 다양한 플러그인을 쉽게 추가할 수 있다. 예를 들어, CSS 전처리기, 이미지 최적화 플러그인 등을 추가할 수 있다.
7. 개발 서버 실행
개발 서버 실행:
Vite개발 서버가 시작되면, 기본적으로 http://localhost:5173에서 애플리케이션이 제공된다.Vite는 매우 빠르게 시작되며, 변경 사항을 즉시 반영한다.
8. 브라우저에서 애플리케이션 로드
브라우저에서 애플리케이션 로드: 브라우저에서 http://localhost:5173을 열어 애플리케이션을 확인한다.
Vite는 기본 HTML 파일을 제공하고,ES 모듈을 통해 JavaScript 파일을 로드한다.
📝 요약
- 명령어 실행:
npm run dev명령어 실행.Vite개발 서버: 고성능 개발 서버 시작.- 파일 시스템 기반 라우팅: 파일 시스템을 기반으로 라우트 설정.
ES 모듈사용: 즉시 변환 및 번들링,Hot Module Replacement(HMR)지원.Babel및 TypeScript 설정: 필요에 따라Babel및 TypeScript 설정.- 플러그인 시스템:
Rollup기반 플러그인 시스템 사용.- 개발 서버 실행: 로컬 서버에서 애플리케이션 제공 (http://localhost:5173).
- 브라우저 로드: 브라우저에서 애플리케이션 확인.
