[Vite] Vite 개발 서버 실행

Vite를 사용하여 개발을 시작하기 위해 개발 서버를 실행하는 방법을 소개합니다.

---

Vite 개발 서버란?

Vite 개발 서버는 개발 중인 Vue.js 프로젝트를 호스팅하고, 빠른 개발 환경을 제공하는 도구입니다. 개발 서버를 실행하면 프로젝트를 브라우저에서 확인하고, 수정 사항을 즉시 반영할 수 있습니다. 또한 Hot Module Replacement(HMR)을 지원하여 코드 변경 시에 즉시 새로 고침 없이 업데이트된 내용을 확인할 수 있습니다.

---

Vite 개발 서버 실행하기

Vite 개발 서버를 실행하는 방법은 매우 간단합니다. 아래 단계를 따라해보세요.

1. 개발 서버를 실행할 Vue.js 프로젝트 폴더로 이동합니다.

cd my-vue-app

위 명령어에서 my-vue-app은 생성한 Vue.js 프로젝트 폴더 이름으로 변경해야 합니다.

2. 다음 명령어를 실행하여 Vite 개발 서버를 실행합니다.

npm run dev

위 명령어를 실행하면 개발 서버가 시작되고, 기본적으로 localhost:3000 주소에서 Vue.js 앱을 확인할 수 있습니다.

3. 브라우저에서 개발 서버 확인하기
Vite 개발 서버가 실행 중인 상태에서 브라우저를 열고 주소창에 localhost:3000을 입력합니다. 이제 Vue.js 앱이 정상적으로 실행되는 것을 확인할 수 있습니다.

4. 개발 서버의 특징: HMR(Hot Module Replacement)
Vite 개발 서버는 HMR(Hot Module Replacement)을 지원합니다. 이는 코드를 수정하고 저장할 때 브라우저에서 즉시 변경된 내용을 확인할 수 있게 해주는 기능입니다. 파일이 변경되면 브라우저에서 자동으로 새로 고침하지 않고 변경된 모듈만 교체하여 수정 사항을 즉시 확인할 수 있습니다.

---

개발 서버 옵션

Vite 개발 서버는 다양한 옵션을 제공하여 사용자 정의할 수 있습니다. 예를 들어, 포트 번호 변경, HTTPS 사용, 호스트 지정 등의 옵션을 설정할 수 있습니다. Vite 개발 서버의 자세한 옵션은 Vite 공식 문서를 참조하세요.

이제 Vite를 이용하여 Vue.js 앱을 개발하기 위해 개발 서버를 실행하는 방법을 알게 되었습니다. 개발 서버를 통해 빠르게 개발하고 수정 사항을 실시간으로 확인할 수 있으므로 효율적인 개발을 진행할 수 있습니다.