"npm run dev 명령어로 웹페이지가 생성되는 이유"
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

"npm run dev" 명령어를 치면 왜 웹페이지가 나오는가?

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

  • *초보 웹 개발자**

- 난이도: 기초 수준 (Node.js, npm, Vite 개념 이해 필요)

핵심 요약

  • npm run devpackage.jsonscripts 항목에 정의된 명령어를 실행
  • Vite는 개발용 웹 서버로, localhost:5173에서 정적 파일을 제공
  • 브라우저는 Vite 서버가 제공한 파일을 기반으로 웹페이지를 렌더링

섹션별 세부 요약

1. `package.json`의 역할

  • package.json은 프로젝트의 의존성, 스크립트, 메타데이터를 정의한 파일
  • "scripts" 항목에 "dev": "vite"와 같은 명령어가 정의되어 있음
  • npm run devvite 명령어를 실행하는 트리거 역할

2. Node.js와 Vite의 관계

  • Node.js는 JavaScript를 서버 환경에서 실행할 수 있도록 하는 런타임 환경
  • Vite는 React, Vue 등 프레임워크를 위한 빠른 개발 서버 도구
  • npm run devvite 실행 → 로컬 개발 서버 실행

3. 웹서버 동작 원리

  • Vite는 localhost:5173 포트에 서버를 열고, 정적 파일을 제공
  • 브라우저는 http://localhost:5173에 접근 → index.html과 자원 파일 요청
  • 서버는 파일만 제공 → 브라우저가 HTML/JS/CSS를 기반으로 화면 렌더링

4. 정적 서버 vs 백엔드 서버

  • 정적 서버는 HTML, JS, CSS 같은 파일만 제공 (Vite의 역할)
  • 백엔드 서버는 로그인, DB 처리 등 비즈니스 로직 처리
  • curl 명령어로 서버가 파일만 제공하는지 확인 가능

결론

  • npm run devVite 서버를 실행해 브라우저에 파일을 제공하는 과정
  • curl http://localhost:5173 명령어로 서버 응답 확인 가능
  • 정적 파일 서빙과 백엔드 서버의 역할 구분을 통해 웹 개발 아키텍처 이해