📦 package.json를 톺아보자

💡 JS 기반 프로젝트에는 웬만해서는 package.json 파일이 있다. 평소엔 그저 프로젝트에서 사용되었던 써드파티 라이브러리명이랑 버전 정도 기재된 것으로만 알다가 점점 install 하는 방식마다 다른 옵션으로 설치하는게 내 머리로는 잘 정리가 안되서 이참에 한 번 정리한다!

왜 package.json이 필요할까?

자바스크립트가 프로그래밍 언어로서 흔히들 많이 사용하는 자바와 더불어 많이 쓰이는 이유로는 오픈 소스 생태계가 그 이유가 될 것이다. 예를 들어 서버에서 내려받은 DateTime 값을 화면에 표시할 때 day.js 라이브러리 관련 메서드가 없다면 별도의 커스텀 훅이 필요할 것이다. 이는 그럴수 있다 치지만 react-router-dom, react-redux 등 프로젝트에 관해서 중축이 되는 써드파티 라이브러리는 커스텀 훅으로는 대체하기가 사실상 힘들다.

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

scripts

package.json 파일의 scripts 필드는 프로젝트에서 빈번하게 수행해야 하는 작업을 스크립트로 등록하기 위해 사용된다. 터미널에서 흔히 npm run 명령어로 실행하는 스크립트는 모두 여기에 정의되어 있다고 보면 된다. (예, npm run dev, npm run test, npm run storybook, …)

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

dependencies

package.json 파일에서 가장 친숙한 필드를 뽑으라면 의존성 명시를 위한 dependencies 일 것이다. 좀 더 엄밀한 얘기를 하면 해당 프로젝트가 실행되기 위해서 반드시 필요한 패키지를 의미한다.

우리가 패키지를 설치하기 위해서 터미널에서 npm install <패키지>@<버전> 명령어를 실행하면 package.json 파일의 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

package.json 파일의 devDependencies 필드는 소위 개발 의존성, 즉 테스트 작성/실행이나 프로젝트 빌드 시에만 필요한 패키지를 명시하기 위해서 사용된다.

개발 의존성으로 패키지를 설치할 때는 —save-dev 또는 -D 옵션을 줘서 npm install 명령어를 실행하면 된다.

{
  "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"
  }
}

🥕 특정 패키지를 설치할 때

---

특정 패키지를 설치할 때는 크게 두 가지 옵션으로 구분된다.

하나는 프로젝트를 구동할 때 필요한 dependencies(실제 코드에도 포함되며 앱 구동을 위해 필요한 의존성 파일들) 목록에 추가될 $ npm install (프로젝트명) 으로 프로젝트를 설치하는 옵션이고, 다른 하나는 개발 단계에서만 필요한 devDependencies(실제 코드에 포함되지 않으며 개발 단계에만 필요한 의존성 파일들) 목록에 추가될 $ npm install -D (프로젝트명) 옵션이다.

• -D 와 같은 접미어를 “플래그”라고 부르는데, 주로 사용되는 플래그는 다음과 같다.

  플래그	효과
  -P	패키지 설치 & dependencies 추가
  —save-prod	패키지 설치 & dependencies 추가
  -D	패키지 설치 & devDependencies 추가
  —save-dev	패키지 설치 & devDependencies 추가
  -g	패키지를 프로젝트가 아닌 시스템의 node_modules 폴더에 추가

private

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

{
	"private": true
}

homepage & repository

package.json 파일의 homepage 옵션에는 해당 프로젝트의 홈페이지나 문서 페이지의 URL을 설정할 수 있다. 그러면 터미널에서 npm docs 명령어를 실행하여 간편하게 해당 URL을 열어볼 수 있다.

반면에 package.json 파일의 repository 옵션에는 해당 프로젝트의 코드 저장소의 URL을 설정할 수 있다. 그러면 터미널에서 npm repo 명령어를 실행하여 간편하게 해당 URL을 열어볼 수 있다.

이 두개의 옵션은 특히 npm 패키지 저장소에 프로젝트를 발행할 때 상당히 중요한데, npm 웹사이트에서 패키지 상세 페이지에 들어가면 homepage와 repository 항목에 이 두 개의 URL이 링크되기 때문이다. 사용자들이 좀 더 안심하고 미리 패키지에 대한 정보를 확인 후에 설치할 수 있도록 돕기 위함이다.

{
  "homepage": "https://www.algodale.com",
  "repository": "github:DaleSeo/AlgoDale"
}

license

package.json 파일의 license 필드를 통해서는 해당 프로젝트의 라이선스를 표시할 수 있다. 아무리 좋은 패키지라도 라이선스가 명시되어 있지 않으면 쓰기가 꺼려지기 때문에, npm에 발행할 패키지라면 반드시 명시하는 것이 좋다.

{
	"license": "MIT"
}

🔫 결론

---

사실 플래그 없이 npm install 만을 사용해도 동작은 하지만, 플래그를 사용해 dependencies 와 devDependencies 로 의존성 목록을 구분하면 “이건 개발용, 이건 실제 서비스용” 으로 구분하기 쉬워진다는 면에서 개발자들에게 필요한 기능이라고 볼 수 있겠다 !