[node.js npm] package.json은 뭘까?

리액트나 다른 npm을 사용하는 개발을 할 때 필수적으로 저장하는 package.json.. 

지금까지는 이게 뭔지도 모르고 설치하라니까 설치하고 수정하고 그랬다.

근데 이제 블로그 정리를 시작하려는데 막상 개발환경 설정 게시글을 작성하려니 package.json 이 파일은 도대체 어떤 파일인지 궁금했다.

---

package.json?

프로젝트의 정보와 해당 프로젝트가 의존하는(기능을 사용하는) 패키지에 대한 정보를 가지고 있는 문서이다. 

npm은 오픈소스 기반이기 때문에 한 사람이 배포한 패키지에 대해 다른 사람들이 사용할 때 관리하기 쉽게 하기 위해 정리해놓은 문서라고 생각하면 편하다.

 

json파일이기 때문에 key:value 관계로 되어 있으며 이때 key(속성)값을 field라고 한다.

기본 구조를 확인해보자

package.json의 디폴트 구조를 확인하는 방법은 다음과 같다.

npm init -y

여기서 -y는 yes라는 뜻으로 default값을 불러온다는 뜻이다.

{
  "name": "test", //패키지 이름
  "version": "1.0.0", //패키지 현재 버전
  "description": "", //패키지에 대한 설명
  "main": "index.js", //패키지의 진입점(root에서의 상대경로로 지정해야함)
  "scripts": { //명령어에 대한 별명 긴 명령을 간단한 명령으로 바꿀 수 있음
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [], //해당 패키지를 나타내는 키워드
  "author": "", //배포자
  "license": "ISC" //사용자가 패키지를 사용하는데 어떠한 제약사항이 있는지 알려줌
}

여기서 필수적으로  name과 version 필드는 있어야 하고 없을 경우 설치가 되지 않는다.

생각해보면 위 부분들은 "scripts"를 제외하고 패키지를 만들어 배포할 때만 사용되고 일반적으로 프로젝트 개발 목적에선 잘 사용되지 않는다. 그래서 지워도 상관없다!

 

프로젝트 개발에서 중요한 부분은 의존성, 즉 다른 패키지를 사용할 때 그 패키지에 대한 명세 부분이 중요하다.

이에 해당하는 필드는 dependencies와 devDependencies가 있다.

예시로 다음이 있다.

  "devDependencies": {
    "css-loader": "^6.5.1",
    "css-minimizer-webpack-plugin": "^3.3.1",
    "eslint": "^8.30.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.2.1",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.4.6",
    "prettier": "2.8.1",
    "terser-webpack-plugin": "^5.3.0",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.2"
  }

devDependencies는 개발 할 때만 필요한 의존 패키지 정보가 저장되어 있으며

패키지를 설치하면 자동으로 dependencies에 추가되지만 --save-dev 나 -D 옵션을 추가하면 devDependencies에 추가된다.

---

여기서 각 패키지 버전에 ^가 붙여져 있는 걸 볼 수 있다.

 

이는 "캐럿"으로 불리며 메이저.마이너.패치 로 이루어진 버전 정보에서 마이너와 패치의 변경을 허용하겠다는 뜻이다

즉 ^3.3.2일 때 3.3.2에서 4.0.0사이의 변경을 허용한다는 의미이다

 

다른 걸로는 '~'로 표시하는 틸드가 있다. 

틸드는 패치의 변경을 허용하겠다는 뜻으로 ~3.3.2일때 3.3.2에서 3.4.0 사이의 버전 변경을 허용한다는 의미를 가진다

이 부분의 자세한 설명은 아래 게시글을 참고하면 좋다.

npm semver - 틸트 범위(~)와 캐럿 범위(^)

 

아무튼! 이렇게 정리하니까 드디어 package.json이 뭔지 어느 정도는 알게 됐다. 앞으로 잘 써먹어야지