[Node] 자바스크립트 패키지 매니져(npm/yarn) 이해하기 -1

해당 글에서는 자바스크립트의 패키지 매니져를 이해하고 이와 관련된 용어들을 이해하는 글 입니다.

 

1) 자바스크립트 패키지 매니저(Javascript Package Manager)란?

---

💡 자바스크립트의 패키지 매니저는 Node.js의 실행환경(runtime)에서 수행하며 프로젝트가 의존(dependency)하고 있는 패키지를 효과적으로 설치, 갱신, 삭제를 할 수 있도록 도와주는 도구를 의미합니다. 대표적으로는 npm, yarn이 있습니다

 

패키지 매니저 관련 파일 이해하기 

---

• pacakage.json: 프로젝트에서 사용되고 있는 패키지를 관리하는 JSON 형태의 파일입니다.
• pacakage-lock.json / yarn.lock: 프로젝트 내에서 팀원들 간에 서로 다른 버전을 설치하지 않고, 동일한 버전을 설치하는 것을 보장하도록 명시된 패키지 잠금 파일입니다.
  • pacakage-lock.json: npm 패키지 매니저를 사용 할 경우 사용되는 패키지 잠금 파일입니다.
  • yarn.lock: yarn 패키지 매니저를 사용 할 경우 사용되는 패키지 잠금 파일입니다.
• node_modules: pacakge.json 파일에 명시된 패키지에 따라서 설치 된 패키지 디렉토리입니다.

[ 더 알아가기 ] 
💡  Github Repository에 'node_modules' 디렉토리를 올리지 않는 이유?
- package.json에 명시된 패키지 목록과 lock파일에 지정된 버전만 있다면 모든 개발자가 동일한 버전에서 프로젝트를 구성 할 수 있기에 용량이 큰 node_modules 파일은 올리지 않는다.

 

[참고] 패키지 매니저 공식사이트 - npm / yarn

npm

Home

 

2) pacakage.json 파일 이해하기

---

💡 pacakage.json 파일에 구성된 의존성에도 다양한 목적으로 사용되는 경우가 많기에 각각에 대한 이해가 필요합니다.

 

[참고] yarn 패키지에 대한 설명

Yarn

 

1. dependencies

---

💡 프로젝트에서 의존하고 있는 일반적인 종속성이거나 코드를 실행하는데 사용하는 패키지들을 포함하고 있으며, 이 의존성 패키지는 컴파일을 수행하고 런타임 단계에서까지 수행되는 패키지들이 이에 해당 됩니다.

 

[참고] package.json 파일 내에 사용한 예시 

"dependencies": {
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router": "^6.3.0",
    "react-router-dom": "^6.3.0",
    "typescript": "^4.6.4",
  }

 

[참고] 설치 방법 - 예시

# yarn 
$ yarn add react

# npm 
$ npm install react
$ npm i react
$ npm --save react

 

2. devDependencies

---

💡 프로젝트에서 개발과 테스트 단계에서만 사용이 되는 패키지를 포함하고 있으며, 이 의존성 패키지는 컴파일 내에서만 수행되고 런타임 단계에서는 수행되지 않는 패키지들이 이에 해당 됩니다.
ex) prettier, eslint, @types/xxx

 

[참고] package.json 파일 내에 사용한 예시 

"devDependencies": {
    "@types/react-router": "^5.1.18",
    "@types/react-router-dom": "^5.3.3",
    "eslint": "^8.16.0",
    "prettier": "2.6.2"
  }

 

[참고] 설치 방법 - 예시

# yarn 
$ yarn add prettier --dev
$ yarn add prettier -D

# npm 
$ npm install -D prettier
$ npm install --save-dev prettier

 

3. peerDependencies

---

💡 런타임에는 필요하기는 하지만 소스코드내에 의존성을 직접 관리하지 않는 라이브러리들이 포함된다. 소스코드 내에 require , import로 불러오지는 않지만 라이브러리 의존성으로 필요한 경우가 이에 해당 됩니다.
ex) 플러그 인

 

3) 버전관리

---

💡 pacakage.json 파일에 버전을 관리하는 방법

 

1. 시맨틱 버저닝(Semantic Versioning)

---

💡 Node.js, npm, yarn은 시멘틱 버저닝을 채택하여서 패키지의 버전을 관리 합니다.

용어	정의	구조
MAJOR 버전	API 호환성이 깨질만한 변경사항	[MAJOR].[MINOR].[PATCH] x.0.0 버전이 업데이트 되는것을 의미한다.
MINOR 버전	일반적인 업데이트(기능 추가)를 수행할때 진행된다.	[MAJOR].[MINOR].[PATCH] .x.0 버전이 업데이트 되는것을 의미한다.
PATCH 버전	단순한 버그 해결을 위한 업데이트를 위해서 진행이 된다.	[MAJOR].[MINOR].[PATCH] 0.0.x 버전이 업데이트 되는것을 의미한다.

 

[참고] 시멘틱 버저닝에 대한 설명

 

Introduction to Semantic Versioning - GeeksforGeeks

 

2. 틸트(~)

---

💡 현재 지정한 버전의 마지막 자리 내의 범위에서만 자동으로 업데이트한다. 틸드를 사용하면 'PATCH' (0.0.x)버전까지 업데이트가 수행이 된다.

// 현재버전 : ~0.0.1 일 경우 
0.0.1 <= [현재버전] < 0.1.0 // 업데이트가 수행된다.

// 현재버전 : ~0.1.1
0.1.1 <= [현재버전] < 0.2.0 // 업데이트가 수행된다.

// 현재버전 : ~0.1
0.1.0 <= [현재버전] < 0.2.0 // 업데이트가 수행된다.

 

3. 캐럿(^)

---

 💡 캐럿(^)을 사용하면 ‘MINOR'(0.x.0) 버전까지 업데이트가 수행된다.

// 현재버전 : ^1.0.2
1.0.2 <= [현재버전] < 2.0.0 // 업데이트가 수행된다.

// 현재버전 : ~1.0
1.0.0 <= [현재버전] < 2.0.0 // 업데이트가 수행된다.

// 현재버전 : ^1
1.0.0 <= [현재버전] < 2.0.0 // 업데이트가 수행된다.

 

 

4) 오늘의 결론

---

처음 패키지 매니저를 사용하는 경우, 각각의 목적에 맞지 않게 사용을 했던것 같습니다.
각각의 의존성을 이해하고 맞게 설치하며, 관리하면 좋을것 같습니다.

 

오늘도 감사합니다😀