데브허브 | DEVHUB | [React.JS(19) + TypeScript] 05. npm run dev란??[React.JS(19) + TypeScript] 05. npm run dev란??
npm run dev 명령어는 package.json 파일의 scripts 속성 내 dev 스크립트를 실행하라는 의미입니다. ⚙️
dev 스크립트에는 vite와 같은 개발 서버 시작 명령어가 정의되어 있으며, 이를 통해 Vite 개발 서버가 구동됩니다. 🚀
- 만약
package.json에서 dev 스크립트 이름이 변경되면 npm run dev는 에러를 발생시키므로, 스크립트 이름 확인이 중요합니다. ⚠️
- Vite 개발 서버는 작성된 React 코드를 실시간으로 변환하고 브라우저에서 실행 가능하도록 준비하는 역할을 합니다. 🔄
- Vite는 ES 모듈 방식을 사용하여 필요한 파일만 불러오므로, 기존 번들러 대비 개발 서버 구동 속도가 매우 빠릅니다. ⚡
- 개발 서버는
http://localhost:5173과 같은 주소로 실행되며, 해당 포트가 사용 중일 경우 자동으로 포트 번호가 증가합니다. 🌐
- 사용자가 개발 서버 주소에 접속하면
index.html이 먼저 로드되고, 이어서 main.tsx, 그리고 App.tsx 순서로 파일이 불러와집니다. 📂
- 최종적으로
App.tsx의 내용은 index.html 내 id="root" 요소에 렌더링되어 웹 브라우저에 표시됩니다. 🖼️