npm run dev 명령어, React 개발 서버는 어떻게 작동할까?

📦 npm run dev 실행
   ↓
📜 package.json에서 "dev": "vite" 확인
   ↓
🚀 Vite 실행
   ↓
🌐 로컬 개발 서버 구동
   ↓
🧠 React 코드 분석 및 변환
   ↓
🖥️ 브라우저에서 실시간 미리보기 가능
   ↓
🛠️ 코드 저장 시, 자동 새로고침 또는 일부 영역만 실시간 반영 (HMR)

React 프로젝트를 시작하면 가장 먼저 듣게 되는 명령어 중 하나가
바로 npm run dev입니다.

"개발 서버를 실행하는 명령어예요!"라는 설명을 듣긴 했지만,
도대체 이게 무슨 일을 하고 있는 걸까?
이 글에서 초보자의 눈높이로 차근차근 설명해보겠습니다.

---

✅ npm run dev란 무엇인가요?

한 줄 요약:

npm run dev는 내 코드를 브라우저에서 실시간으로 확인할 수 있도록 개발 서버를 실행해주는 명령어입니다.

---

🧱 1. npm run 명령어의 원리

이 명령은 프로젝트의 package.json 파일 안에 다음처럼 정의되어 있어요.

"scripts": {
  "dev": "vite"
}

 

즉, npm run dev는 실제로는 아래 명령을 실행하는 것과 같아요:

vite​

 

 

---

⚡ 2. Vite가 해주는 일은?

React + Vite 프로젝트에서 vite는 이런 일을 합니다:

1. React 앱의 진입점 파일 분석 (예: main.jsx)
2. JSX, TypeScript 등 브라우저가 이해하지 못하는 문법을 변환
3. 로컬 개발 서버 실행 (예: http://localhost:5173)
4. 코드 변경 시 브라우저에 자동 반영 (HMR = Hot Module Replacement)

---

🔁 3. 실제 흐름 정리

📦 npm run dev 실행
   ↓
📜 package.json에서 "dev": "vite" 확인
   ↓
🚀 Vite 실행
   ↓
🌐 로컬 개발 서버 구동
   ↓
🧠 React 코드 분석 및 변환
   ↓
🖥️ 브라우저에서 실시간 미리보기 가능
   ↓
🛠️ 코드 저장 시, 자동 새로고침 또는 일부 영역만 실시간 반영 (HMR)

 

---

🧪 예시 상황

• App.jsx에서 버튼 텍스트를 수정함
• 파일 저장(Ctrl+S)
• 브라우저에서 즉시 반영됨 (새로고침 없이도!)

---

💡 핵심 개념 요약

개념설명

npm run dev	개발 서버 실행 명령
실행 대상	보통 Vite (vite 명령어)
역할	내 코드를 변환하고 브라우저에서 실시간 확인 가능하게 함
특징	빠름, HMR 지원, 설정 간편

 

---

🔚 마무리하며

React + Vite 환경에서 npm run dev는 단순한 실행 명령어 그 이상입니다.
이 명령을 통해 우리는 빠르게 개발하고, 바로 결과를 확인하며,
효율적인 프론트엔드 개발 루틴을 만들 수 있게 됩니다.

"왜 작동되는지 모르고 쓰는 명령어"에서,
"어떤 과정을 거치는지 이해하고 쓰는 명령어"가 되었길 바랍니다 😊