개발 기본
npm
npm은(는) 바이브 코딩 중 자주 마주치는 핵심 개념입니다. 정의만 외우기보다 실제 작업 흐름에서 어떤 역할을 하는지 이해하는 것이 중요합니다.
쉬운 설명
자바스크립트(JavaScript) 패키지를 설치하고 스크립트를 실행하는 도구.
배경과 쓰임까지 이해하기
조금 더 자세히
npm은 자바스크립트(Javascript) 프로젝트에서 필요한 패키지를 설치하고 명령을 실행하는 도구입니다. 보통 React, Next.js, Astro 같은 웹 프로젝트는 여러 외부 라이브러리에 의존하고, 개발 서버나 빌드 명령도 npm 스크립트로 실행합니다. 예를 들어 `npm install`로 패키지를 설치하고, `npm run dev`로 개발 서버를 켜고, `npm run build`로 배포용 결과물을 만들고, `npm test`로 테스트를 실행합니다.
`package.json`에 프로젝트 이름, 의존성, 실행 명령이 정리되어 있습니다. 한마디로, npm은 자바스크립트 프로젝트의 패키지 설치와 실행 명령을 관리하는 도구입니다.
실제로는 이렇게 만나요
`npm install`로 패키지를 설치하고, `npm run dev`로 개발 서버를 띄우며, `npm run build`로 배포 가능한 결과물을 만듭니다.
- 이런 거 할 때 나와요 대부분의 웹 프로젝트는 npm으로 의존성을 설치하고 개발 서버, 빌드, 테스트 명령을 실행합니다.
- 이렇게 생겼어요 npm은(는) Package, Node.js, Build 같은 주변 개념과 함께 문서, 설정 화면, 오류 메시지에서 자주 보입니다.
- 나오는 화면 예시 개발 기본 작업을 하다가 Package, Node.js, Build를 확인하는 화면
헷갈리기 쉬운 점
Node 버전이나 lockfile이 다르면 설치 결과가 달라질 수 있습니다. 팀 프로젝트에서는 버전 기준을 맞추는 것이 좋습니다.
왜 알아두면 좋을까요?
대부분의 웹 프로젝트는 npm으로 의존성을 설치하고 개발 서버, 빌드, 테스트 명령을 실행합니다.
Checklist
실제로 볼 때 확인할 것
- 01
package.json의 scripts를 확인한다
- 02
lockfile을 함께 관리한다
- 03
설치 오류는 Node 버전부터 확인한다