빌드 / 최적화
Vite
Vite는 웹앱을 개발할 때 변경을 확인할 개발 서버와 배포용 파일을 만드는 빌드 기능을 제공하는 도구입니다.
쉬운 설명
AI가 만든 웹 프로젝트를 실행했을 때 터미널에 VITE와 localhost 주소가 표시될 수 있어요. Vite의 개발 서버가 파일 변경을 브라우저에서 빠르게 확인하도록 도와주는 상황이에요. 공유할 버전을 만들 때는 빌드 기능으로 배포용 파일을 만들어요. React가 화면을 만드는 라이브러리라면 Vite는 개발 중 실행과 빌드를 돕는 도구라서 함께 쓸 수 있어요.
이런 상황에서 만나요
AI에게 받은 React 프로젝트에서 “npm run dev로 확인하고, 다 만들면 npm run build를 실행하세요”라는 안내를 받았다고 해 볼게요. 먼저 package.json의 scripts에서 이 이름들이 어떤 명령에 연결돼 있는지 확인해요.
같은 프로젝트의 세 명령이 하는 일이 달라요
"dev": "vite", "build": "vite build", "preview": "vite preview"
npm run dev → 개발 서버에서 변경 확인
npm run build → 배포용 파일 생성 npm run preview → 만든 결과를 로컬에서 확인
- 1스크립트 이름과 실제 실행할 명령을 연결해요.
- 2주소와 포트는 터미널에 실제로 표시된 값을 확인해요.
- 3빌드와 미리보기를 끝내도 외부 공개는 별도 작업이에요.
아래 구성에서는 dev가 Vite 개발 서버를 시작하고 build가 배포용 파일을 만들어요. preview는 빌드한 결과를 내 컴퓨터에서 확인하는 명령이에요. localhost 주소를 공유했다고 다른 사람도 내 앱을 볼 수 있는 것은 아니며, 외부 공유에는 배포가 필요해요.
헷갈리기 쉬운 점
npm run preview를 켜 두면 운영 배포가 된 건가요?
아니요. vite preview는 빌드 결과를 로컬에서 확인하기 위한 기능이며 운영 서버 용도가 아니에요. 실제 공개에는 결과물을 배포 서비스에 올리거나 프로젝트에 맞는 서버 구성을 사용해요.
개발 서버에서 잘 보여도 빌드나 배포 환경에서는 실패할 수 있어요. 빌드 결과를 확인하고, 배포 후에도 파일 경로와 API 연결이 제대로 동작하는지 확인해요.
왜 알아야 할까요?
개발 서버가 켜진 상태, 빌드 파일이 만들어진 상태, 실제로 공개된 상태를 구분할 수 있어요. AI의 실행 안내도 프로젝트 스크립트와 대조해 어떤 작업인지 이해할 수 있어요.
조금 더 자세히
일반적인 Vite 정적 웹앱에서는 빌드 결과가 기본적으로 dist 폴더에 만들어집니다. 출력 위치는 설정으로 바꿀 수 있고, 서버 렌더링 등 프로젝트 구조에 따라 배포 방식도 달라집니다.
개발 중에는 변경된 부분을 갱신하는 HMR(Hot Module Replacement) 등을 사용합니다. npm run dev라는 이름 자체가 Vite를 뜻하는 것은 아닙니다. 다른 프로젝트에서는 같은 이름이 다른 개발 도구를 실행할 수 있습니다.
직접 사용할 때 확인해 보세요
- package.json의 실제 스크립트를 확인한다
- 개발 확인과 빌드 결과 확인을 구분한다
- 배포 후 공개 주소에서 기능을 확인한다
관계 지도
