📝dependencies
npm install 명령어를 통해서 설치한 라이브러리들이 존재한다
📝devDependencies
배포할 때 포함되지는 않는다 그래서 애플리케이션 동작과 직접적인 연관은 없지만, 개발할 때 필요한 라이브러리를 설치하면 된다 대표적인 라이브러리로는 eslint, prettier 등이 있다
-D를 붙여서 설치한다 → 예) npm i ${설치할 pakcage} -D
📝package.json
현재 프로젝트에 대한 정보들을 저장합니다
{
"name": "netflix", // 프로젝트 명
"version": "0.1.0", // 빌드 버전
"private": true,
"dependencies": { // 설치된 라이브러리
"@testing-library/jest-dom": "^5.17.0",
....
"web-vitals": "^2.1.4"
},
"scripts": { // Short Cut(단축키 설정)
"start": "react-scripts start",
....
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": { // 로직과 관련 없는 라이브러리
}
}
여러가지 옵션이 존재하고 대표적인 것들은 주석으로 설명을 달아놨습니다
- npm install
- package.json에 있는 dependecies에 명시된 최신 모듈을 설치합니다
- npm cache clean --force
- npm install 했는데 예전버전이 계속 깔리던가 하는 상황에 쓰인다
- npm update
- package.json에 있는 dependecies에 명시된 Range안에서 최신 버전으로 업데이트합니다
📝버전 정보 ^(캐럿) , Major(메이저), Minor(마이너), Patch(패치)
- ^(캐럿)
- 새로운 Patch버전 및 Minor버전이 나올 때 최신 버전으로 업데이트하라는 버전 범위 명시입니다
- Major(메이저)
- 주요 변경 사항이나 호환성에 큰 영향을 미치는 변경 사항이 있는 경우
- Minor(마이너)
- 새로운 기능이나 개선 사항이 추가되지만 기존 코드와 호환성이 유지되는 경우
- Patch(패치)
- 주요 변경이나 새로운 기능이 없고, 오직 버그 수정과 같은 작은 변경 사항만 있는 경우
예를 들면 1.3.5버전이면 1은 Major를 의미하고 3은 Minor 5는 Patch를 의미합니다
📝package-lock.json
{
"name": "netflix",
"version": "0.1.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "netflix",
"version": "0.1.0",
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
....
"axios": "^0.4.0",
},
"devDependencies": {
"@types/uuid": "^9.0.3"
}
},
"node_modules/@aashutoshrathi/word-wrap": {
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
"integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/axios": {
"version": "0.4.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.4.2.tgz",
"integrity": "sha512-uWHkoTqft48NouJRcauDHals99zKFZG2dDnuyPT4vf+nm17v43RDIdJi3bjYOzvmyBTMP1NKAgGpBYsPCkhsSA==",
"deprecated": "Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410",
"dependencies": {
"es6-promise": "^1.0.0"
}
},
...
}
package-lock.json의 존재 이유는 기존에 사용하는 package.json의 정보가 부족하기 때문입니다. package.json에서 버전을 지정할때는 일반적으로 version range(^0.0.1)의 형태를 사용합니다 그리고 협업을 위해 같은 package.json을 사용해 각자의 컴퓨터에 같은 패키지들을 설치해 같은 개발환경을 구축합니다 하지만 몇 가지 이슈가 발생한다면 같은package.json을 사용하여 npm install을 진행하더라도 서로 다른 node_modules를 생성하는 경우가 발생합니다
❗ 이슈사항
- npm 버전이 다른 경우
- 버전을 명시하지 않고 version range를 사용하여, 새로운 버전의 패키지가 배포된 이후 설치를 진행할 경우
- 내가 사용하는 패키지를 의존하고 있는 패키지가 새로운 버전으로 배포되었을 경우
위의 3개를 예시를 들자면 아래와 같습니다
- A라는 사람이 2022년 5월 1일에 npm install시 axios 버전은 0.4.0이였다
- B라는 사람이 입사해서 npm install시 2022년 6월 1일에 나온 axios 버전 0.4.2를 다운 받았다
- 어째서인지 B라는 사람 컴퓨터에선 프로젝트가 정상동작하지 않는다
이러한 걸 해결하기 위해서 package-lock.json을 같이 공유하면 A라는 사람의 npm install 당시 실제적으로 다운 받은 것 등에 대한 자세한 정보를 확인해 에러에 대한 문제를 해결할 수 있습니다
"axios": "^0.4.0"라고 적혀있지만 ^으로 인해 실제적으로 밑에 적힌 내용을 보면 패치버전의 최신버전인 0.4.2이 설치된 걸 확인 할 수 있습니다
🔗 참고 및 출처
https://1000hg.tistory.com/m/47
https://velog.io/@remon/dependencies-%EC%99%80-devDependencies-%EC%B0%A8%EC%9D%B4
