[CS 지식] dependencies, devDependencies, package.json, 버전 정보 ^(캐럿) , Major(메이저), Minor(마이너), Patch(패치), package-lock.json

📝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를 생성하는 경우가 발생합니다

 

 

❗ 이슈사항

1. npm 버전이 다른 경우
2. 버전을 명시하지 않고 version range를 사용하여, 새로운 버전의 패키지가 배포된 이후 설치를 진행할 경우
3. 내가 사용하는 패키지를 의존하고 있는 패키지가 새로운 버전으로 배포되었을 경우

 

위의 3개를 예시를 들자면 아래와 같습니다

1. A라는 사람이 2022년 5월 1일에 npm install시 axios 버전은 0.4.0이였다
2. B라는 사람이 입사해서 npm install시 2022년 6월 1일에 나온 axios 버전 0.4.2를 다운 받았다
3. 어째서인지 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