"npm run dev" 명령어를 치면 왜 웹페이지가 나오는가?
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- *초보 웹 개발자**
- 난이도: 기초 수준 (Node.js, npm, Vite 개념 이해 필요)
핵심 요약
npm run dev
는package.json
의scripts
항목에 정의된 명령어를 실행- Vite는 개발용 웹 서버로,
localhost:5173
에서 정적 파일을 제공 - 브라우저는 Vite 서버가 제공한 파일을 기반으로 웹페이지를 렌더링
섹션별 세부 요약
1. `package.json`의 역할
package.json
은 프로젝트의 의존성, 스크립트, 메타데이터를 정의한 파일"scripts"
항목에"dev": "vite"
와 같은 명령어가 정의되어 있음npm run dev
는vite
명령어를 실행하는 트리거 역할
2. Node.js와 Vite의 관계
- Node.js는 JavaScript를 서버 환경에서 실행할 수 있도록 하는 런타임 환경
- Vite는 React, Vue 등 프레임워크를 위한 빠른 개발 서버 도구
npm run dev
→vite
실행 → 로컬 개발 서버 실행
3. 웹서버 동작 원리
- Vite는
localhost:5173
포트에 서버를 열고, 정적 파일을 제공 - 브라우저는
http://localhost:5173
에 접근 →index.html
과 자원 파일 요청 - 서버는 파일만 제공 → 브라우저가 HTML/JS/CSS를 기반으로 화면 렌더링
4. 정적 서버 vs 백엔드 서버
- 정적 서버는 HTML, JS, CSS 같은 파일만 제공 (Vite의 역할)
- 백엔드 서버는 로그인, DB 처리 등 비즈니스 로직 처리
curl
명령어로 서버가 파일만 제공하는지 확인 가능
결론
npm run dev
는 Vite 서버를 실행해 브라우저에 파일을 제공하는 과정curl http://localhost:5173
명령어로 서버 응답 확인 가능- 정적 파일 서빙과 백엔드 서버의 역할 구분을 통해 웹 개발 아키텍처 이해