2026-01-28

학습 요약: npm 스크립트 명령어의 목적과 물리적 차이

프론트엔드 개발 워크플로우에서 필수적으로 사용되는 npm run dev, npm run build, npm run preview 명령어의 차이점을 명확히 학습하였습니다. 단순히 실행 커맨드가 다른 것이 아니라, 각 명령어가 다루는 코드의 형태와 실행 환경이 근본적으로 다름을 이해하였습니다.

주요 포인트: 명령어별 목적과 환경 차이

• npm run dev (개발 서버):
  • 환경: 메모리 내 실행. 소스 코드를 실시간으로 감시하며 변경 사항을 즉시 반영(HMR)합니다.
  • 차이점: 실제 파일을 생성하지 않고 개발용 서버를 띄워 인터랙티브한 개발 경험을 제공하는 데 집중합니다. 개발 중 최적화보다는 수정 속도에 우선순위를 둡니다.
• npm run build (프로덕션 빌드):
  • 환경: 물리적 파일 생성. 소스 코드를 최적화(코드 분할, 트리 쉐이킹, 압축)하여 브라우저가 이해할 수 있는 정적 자산(Static Assets)으로 변환합니다.
  • 차이점: 배포 가능한 상태의 결과물을 dist 등의 폴더에 물리적으로 남기는 과정입니다. 개발 서버와 달리 실제 서버에 올리기 위한 ‘제품’을 만드는 과정입니다.
• npm run preview (빌드 결과물 미리보기):
  • 환경: 정적 서버 실행. npm run build로 생성된 파일을 대상으로 로컬 서버를 구동합니다.
  • 차이점: 개발용 환경(dev)이 아닌, 실제 배포될 결과물(build)을 로컬에서 최종 점검하는 단계입니다. 소스 코드를 수정해도 즉시 반영되지 않는다는 점이 dev와 가장 큰 차이이며, 빌드 시 발생한 문제를 사전에 걸러내기 위해 사용합니다.

결론

dev는 개발 효율성을 위한 가상의 환경이며, preview는 배포 직전의 실제 결과물을 검증하기 위한 거울과 같은 도구입니다. 배포 전 반드시 preview 단계를 거쳐 빌드 과정에서 발생할 수 있는 잠재적 오류를 사전 차단해야 함을 명심해야겠습니다.