package.json

package.json 파일에서 dependencies와 devDependencies는 프로젝트의 패키지를 관리하는 두 가지 주요 섹션입니다. 이들은 각각 다른 목적을 가지고 있으며, 사용 용도에 따라 패키지를 구분하여 설치합니다.

1. Dependencies

dependencies 섹션은 애플리케이션이 실행되는 동안 필요한 패키지를 나열합니다. 이러한 패키지는 프로덕션 환경에서도 반드시 필요합니다. 예를 들어, 애플리케이션이 사용자에게 제공되거나 서버에서 실행될 때 필요한 라이브러리들입니다.

예:

• 프론트엔드 프레임워크 (React, Vue, Angular 등)
• 백엔드 프레임워크 (Express, Koa 등)
• 데이터베이스 클라이언트 (mongoose, sequelize 등)

2. DevDependencies

devDependencies 섹션은 개발 중에만 필요한 패키지를 나열합니다. 이러한 패키지는 프로덕션 환경에서는 필요하지 않으며, 개발, 테스트, 빌드 과정에서만 사용됩니다.

예:

• 빌드 도구 (webpack, Parcel 등)
• 트랜스파일러 (Babel, TypeScript 등)
• 테스팅 프레임워크 (Jest, Mocha 등)
• 린팅 도구 (ESLint, Prettier 등)

예시: package.json

{
  "name": "example-project",
  "version": "1.0.0",
  "description": "An example project",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "test": "jest"
  },
  "dependencies": {
    "react": "^17.0.2",
    "express": "^4.17.1"
  },
  "devDependencies": {
    "webpack": "^5.37.1",
    "babel-core": "^6.26.3",
    "jest": "^26.6.3",
    "eslint": "^7.26.0"
  }
}

어떤 라이브러리를 어디에 넣어야 할까?

• dependencies에 넣어야 하는 경우:

  • 애플리케이션이 실행될 때 꼭 필요한 라이브러리.
  • 예를 들어, 프론트엔드 애플리케이션의 경우 React, Vue 같은 라이브러리, 백엔드 애플리케이션의 경우 Express, Koa 같은 프레임워크.

• devDependencies에 넣어야 하는 경우:

  • 개발 환경에서만 필요한 도구나 라이브러리.
  • 예를 들어, 코드를 빌드하는 도구(webpack, Babel), 테스트 프레임워크(Jest, Mocha), 코드 품질 검사 도구(ESLint, Prettier).

설치 명령어

• dependencies에 패키지를 설치하려면 yarn add 또는 npm install 명령어를 사용합니다.

  yarn add react
  npm install react

• devDependencies에 패키지를 설치하려면 yarn add --dev 또는 npm install --save-dev 명령어를 사용합니다.

  yarn add --dev jest
  npm install --save-dev jest

이러한 구분을 통해 프로젝트의 의존성을 명확히 관리할 수 있으며, 프로덕션 빌드에서 불필요한 패키지가 포함되는 것을 방지할 수 있습니다.