본문 바로가기
Frontend

npm, package.json, package-lock.json

by 잘먹는 개발자 에단 2025. 3. 18.
npm init package.json 생성
npm install  npm 모듈 로컬 설치
npm install 패키지@버전 특정버전 설치
npm install --save 패키지이름 node_modules 디렉토리에 설치, dependencies 항목에 패키지 추가
npm install -g 패키지 시스템 전역에 패키지 설치, 해당 프로젝트의 node_modules 디렉토리와 관계 없이 사용가능
npm install --save옵션 dependencies 항목에 추가가 됨
npm install --save-dev devDependencies 항목에 추가가 됨
  ** 주의해야
npm update npm 모듈 업데이트
npm dedupe 중복된 모듈 정리
npm outdated 오래된 패키지의 존재 유무를 알려줌
npm cache npm 내의 cache 목록 확인
npm cache clean --force 캐시 삭제
npm run 그 외의 script 실행
npm rebuild npm 재설치, 주로 에러가 났을 때 캐시를 먼저 지우고 한다.
   

 

 

** dependency, dev Dependency 차이

- package.json에는 dependency가 있고 devDependency가 있다.

- dependencies에는 어플리케이션 동작과 직접적으로 연관된 라이브러리를 설치하고

- devDependencies에는 개발할 때 필요한 라이브러리를 설치하면 된다.

 

이렇게 나누어서 설치하게 되면 devDependencies에 포함된 라이브러리는 실제 배포할 때 포함되지 않기 때문에 빌드 시간을 줄일 수 있다. esline, prettier와 같은 라이브러리들은 devDependencies에 설치한다.

 

** package.json  package-lock.json 차이

< package.json >

- package.json은 Node 프로젝트에서 사용되는 파일로, 프로젝트 이름, 버전, 설명, 작성자, 라이센스, 프로젝트 실행에 필요한 서드파티 패키지인 의존성 목록이 포함된다. 

- npm install을 하게 되면 package.json 파일에 나열된 의존성이 자동으로 설치된다.

이로써, 필요한 패키지의 동일한 버전을 사용하는 모든 사용자를 보장할 수 있다. 

- package.json 파일 안에서 의존 성 선언에는 'version range'가 사용된다.

이는 특정 버전을 지칭하는 게 아니라, '특정버전 이상'이라는 range를 말해준다.

예를 들어서 '^18.2.0 ===' 은 18.2.0 버전 이상을 말한다.

 

< package-lock.json >

- package-lock.json 파일은 npm을 사용해서 node_modules 트리나 package.json 파일을 수정하게 되면 자동으로 생성되는 파일이다.

- 이 파일은 파일이 생성되는 시점의 의존성 트리에 대한 정확한 정보를 가지고 있다. 

- 그럼 이 package-lock.json은 왜 필요할까?

- package.json에는 version range가 사용된다. 그렇기 때문에 예를 들어서 ^18===라고 했다. 이건 18버전 이상이라는건데 만약에 

버전 18.02가 나오게 되면 18.02가 설치되게 된다. 물론 대부분의 경우에는 문제가 생기지 않을 가능성이 높겠지만, 문제가 생길 수 있다. 

때문에 package-lock.json 파일은 의존성 트리에 대한 정보를 가지고 있으며, package-lock.json 파일이 작성된 시점의 의존성 트리가 다시 생성될 수 있도록 보장한다. 

 

 

- 즉 package-lock.json이 없는데, 새로운 버전이 나왔고 이게 오류를 발생시킨다면, 정말 큰일이다. 

    ㄴ 각 라이브러리는 호환되는 버전이 있기에 이를 잘 유지하고 기록하는 것이 중요하다. 

 

 

 

'Frontend' 카테고리의 다른 글

css -> tailwind css  (0) 2025.03.28
Recoil-Persist  (0) 2025.03.24
인증  (0) 2024.12.17
왜 BrowserRouter는 새로고침하면 404 에러가 뜰까  (2) 2024.11.17
HashRouter의 #는 어떤 역할을 하는가  (0) 2024.11.17