package.json에서 라이브러리 관리하기

우리가 패키지json 파일을 보면 이것저것 콘텐츠가 많은데 이번엔 dependencis와 devDependencies 차이에 대해 적어보려고 한다!
npm공식문서

 "dependencies": {
    "chart.js": "^4.3.0",
    "react": "^18.2.0",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.11.2"
  },
  "devDependencies": {
    "@babel/core": "^7.22.1",
    "@babel/preset-env": "^7.22.4",
    "@babel/preset-react": "^7.22.3",
    "babel-loader": "^9.1.3",
    "css-loader": "^7.1.2",
    "css-minimizer-webpack-plugin": "^7.0.0",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^4.0.0",
    "terser-webpack-plugin": "^5.3.10",
    "webpack": "^5.84.1",
    "webpack-bundle-analyzer": "^4.9.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.0"
  },

이렇게 dependencies와 devDependencies 두가지 항목으로 나눠져 있는걸 보곤 한다. 이 둘의 차이는 어떤걸까?

말 그대로 devdependencies는 개발 당시에만 사용하는 라이브러리들로 실제 production 빌드에는 포함되지 않는다. 테스트 도구나 트랜스파일러 등의 라이브러리등은 실제로 production에 사용되는 라이브러리가 아니기 때문에 dependencies 가 아닌 devdependencies 에 포함시켜야 한다. 이렇게 함으로써 얻는 이점은?

첫번째 빌드 최적화가 가능하다 빌드시 프로덕션 환경에서는 dependencies 에 명시된 패키지들만 설치된다. 그로 인해 빌드 크기가 줄어들고 설치시간이 단축된다. 두번째 package.json파일만 보고도 어떤 패키지가 dev환경에서 사용되는 패키지인지 한눈에 확인 할 수 있다.

devdependencies로 다운 받는 명령어를 잠깐 알아보자! (npm 쓴다고 가정)

npm install --save-dev [package-name]
npm i -D [package-name]
npm add -D [package-name]

이렇게 세가지 명령어를 통해 디펜던시 패키지로 인스톨이 가능하다! 무분별한 npm i 보다 좀 계획..?적으로 분리해서 패키지 관리를 해야겠다!