package.json 에 대해 파해쳐보자

자바스크립트 프로젝트 최상위 경로에는 package.json 파일이 존재하는데요.

그럼 packge.json에 대해 알아볼까요?

 

package.json 파일은 왜 필요할까?

package.json 파일은 쉽게 말해서 우리의 자바스크립트 프로젝트를 npm 패키지 저장소와 상호 작용할 수 있도록 만들어주는 중요한 연결 고리인데요. package.json 파일을 통해 npm 패키지 저장소로부터 어떤 패키지를 내려받아 설치해야 하는지, 또한 우리의 프로젝트를 다른 프로젝트에서 사용할 수 있도록 어떻게 npm 패키지 저장소에 올릴 것인지를 설정할 수 있습니다. 그러므로 package.json 파일에는 패키지 사용자 입장에서 설정이 필요한 부분이 있고, 패키지 발행자 입장에서 추가로 설정이 필요한 부분도 있죠.

 

여러분이 개발하시는 자바스크립트 프로젝트가 npm 패키지 저장소로부터 패키지를 내려받기만 한다면, package.json 파일에 대해서 아셔야 할 내용이 사실 얼마되지 않아요. scripts, dependencies, devDependencies 필드 정도만 아시면 충분할 것입니다.

 

하지만 개발하시는 자바스크립트 프로젝트를 npm 패키지 저장소에 올려서 다른 사람들도 쓸 수 있도록 공개하시고 싶다면, package.json 파일에 대해서 잘 알고 계셔야 합니다.

그렇다면 package.json 에 어떤 필드가 들어가는지 알아봅시다.

scripts

scripts 항목은 프로젝트 작업을 자동화하기 위한 스크립트를 정의할 수 있습니다. 즉, 프로젝트에서 빈번하게 수행해야 하는 작업을 스크립트로 등록할 수 있습니다. 예를 들어, start, build, test와 같은 커맨드는 개발자와 사용자가 프로젝트를 간편하게 실행하거나 빌드하고, 테스트할 수 있게 해 줍니다.

작성 예시

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

위 스크립트는 npm run <script name> 명령어를 통해 정의된 스크립트를 실행할 수 있습니다.

 

터미널 실행 명령어 예시

npm run dev //next dev 작업 실행

 

dependencies

이 항목은 프로젝트를 실행할 때 필요한 패키지를 나열합니다. 여기에 나열된 패키지들은 실제 운영 환경에서 프로젝트가 정상적으로 작동하는 데 필수적입니다. npm install <패키지>@<버전>  명령어를 실행하면 dependencies 항목에 지정된 패키지들이 자동으로 설치됩니다. 그래서 개발자가 직접 dependencies 항목을 수정해야 할 일은 흔치 않으며, 오타 가능성도 있기 때문에 가급적 직접 수정은 피하는 것이 좋습니다.

 

작성 예시

{
  "dependencies": {
    "@tanstack/react-query": "^4.35.0",
    "@types/react": "^18.2.21",
    "@types/react-dom": "^18.2.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.46.1",
    "react-router-dom": "^6.15.0",
    "zod": "3.22.2"
  }
}

 

devDependencies

이 항목은 개발 과정에서만 필요로 하는 패키지를 나열합니다. 테스트 도구, 빌드 도구, 컴파일러 등 개발자가 개발 환경에서만 사용하고 실제 제품에는 필요 없는 패키지가 여기에 포함됩니다. --save-dev 또는 -D 옵션을 줘서 npm install 명령어를 실행하여 devDependencies에 있는 패키지를 설치할 수 있으며, 프로덕션 환경에 배포할 때는 포함되지 않습니다.

 

작성 예시

{
  "devDependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "eslint": "^8.48.0",
    "jest": "^29.6.4",
    "prettier": "^3.0.1",
    "typescript": "^5.2.2"
  }
}

 

터미널 실행 명령어 예시

npm install zod --save-dev

 

private

package.json 파일의 private 항목은 프로젝트가 npm 패키지 저장소로 발행(publish) 해도 되는지 여부를 지정하기 위해서 사용됩니다. 기본값은 false이기 때문에 따로 명시해주지 않으면 해당 프로젝트가 실수로 npm 패키지 저장소로 업로드되는 사고가 발생할 수 있습니다. 따라서 npm 패키지 저장소로 올리면 안 되는 프로젝트에서는 private 필드의 값을 반드시 true로 설정하는 것이 보안 측면에서 권장됩니다.

 

작성 예시

{
  "private": true
}

 

name & version

package.json 파일에서 name과 version 필드는 각각 사용자들이 npm install 명령어로 해당 패키지를 설치할 때 사용할 패키지 이름과 버전을 명시합니다. 따라서 npm 패키지 저장소에 올리지 않을 프로젝트라면 크게 신경 쓸 필요가 없는 설정입니다.

 

작성 예시

{
  "name": "our-project",
  "version": "0.1.0"
}

 

 

참고

https://www.daleseo.com/js-package-json/