[webpack]package.json의 dependencies와 devDependencies의 차이점

package.json은 Node.js 프로젝트에서 중요한 역할을 하는 파일입니다. 이 파일은 프로젝트의 메타데이터와 함께 의존성(dependencies) 관리를 담당합니다. 의존성 관리는 크게 두 가지 범주로 나뉩니다. dependencies와 devDependencies.

dependencies

dependencies는 프로젝트가 실행될 때 필요한 라이브러리나 프레임워크를 명시합니다. 예를 들어, Vue.js 프로젝트에서는 Vue 프레임워크 자체와 같은 주요 기능을 포함하는 라이브러리들이 이 부분에 포함됩니다. 이 의존성들은 실제로 프로덕션 환경(사용자에게 서비스되는 환경)에서 필요한 것들이므로, 프로젝트를 배포할 때 이 의존성들도 함께 포함되어야 합니다.

devDependencies

devDependencies는 개발 과정에서만 필요한 라이브러리와 도구들을 명시합니다. 이들은 개발자의 효율을 높이거나 코드 품질을 관리하는 데에 중점을 둡니다. 예를 들어, 코드 포맷팅 도구(Prettier), 단위 테스트 라이브러리(Jest), 빌드 도구(Webpack) 등이 여기에 포함됩니다. 이 의존성들은 프로덕션 환경에서는 필요하지 않으므로, 배포 과정에서는 제외됩니다.

이 두 범주의 구분은 효율적인 개발 환경 구축과 프로덕션 환경의 최적화에 중요합니다. devDependencies를 적절히 관리함으로써, 필요하지 않은 라이브러리가 프로덕션 환경에 배포되는 것을 방지할 수 있습니다. 이는 애플리케이션의 로딩 시간을 줄이고, 불필요한 리소스 사용을 최소화하는 데 도움을 줍니다.

예시

아래는 package.json 파일의 간단한 예시입니다. vue와 axios는 실제 애플리케이션에서 사용되므로 dependencies에, eslint와 jest는 개발 과정에서만 사용되므로 devDependencies에 포함되어 있습니다.

{
  "name": "example-project",
  "version": "1.0.0",
  "dependencies": {
    "vue": "^3.0.0",
    "axios": "^0.21.1"
  },
  "devDependencies": {
    "eslint": "^7.20.0",
    "jest": "^26.6.3"
  }
}

dependencies와 devDependencies의 구분은 프로젝트의 성능과 관리 효율성에 큰 영향을 미칩니다. 프론트엔드 개발자로서 이 두 범주를 명확히 구분하고 관리하는 것은 프로젝트의 성공적인 운영에 필수적입니다.