Node.js Package Dependencies

우혁·2024년 6월 21일
dependenciesnode.jsnpm
7

FE

목록 보기
1/11

NPM(Node Package Manager)
Node.js 패키지를 관리하고 설치하는 데 사용되는 공식 패키지 관리 도구이다.
개발자들이 코드를 작성하고 공유할 때 필요한 다양한 패키지들을 손쉽게 관리하고 사용할 수 있도록 도와준다.

package.json 파일

Node.js 프로젝트의 루트 디렉토리에 위치한 package.json 파일은 프로젝트의 메타 데이터와 함께 의존성 관리에 중요한 역할을 한다.

이 파일에는 프로젝트 이름, 버전, 설명, 스크립트 등과 함께 dependencies, devDependencies, peerDependencies 등의 필요한 패키지 정보가 포함됩니다.

파일 생성 방법은 npm init 명령어를 입력하면 몇 가지 질문들이 나오고 파일이 생성된다.

버전 관리 기호

  • 캐럿(^): 가장 왼쪽이 0이 아닌 숫자를 수정하지 않는 변경을 허용한다.
    예를 들어 ^1.2.3은 버전 1.xx를 허용하지만 2.0.0은 허용하지 않는다.

  • 물결표(~): 이전 버전과의 호환성을 가정하여 패치 수준 변경을 허용한다.
    예를 들어 ~1.2.3은 버전 1.2.x는 허용하지만 1.3.0은 허용하지 않는다.

package-lock.json

package.json은 기호를 통한 버전 관리의 유연성을 제공하지만 정확한 버전 번호 대신 기호에 의존하면 잠재적인 문제가 발생할 수 있다.

이러한 유연성의 장점을 활용하는 동시에 버전 관련 문제의 위험을 완화하기 위해 package-lock.json이 도입되었다.

package-lock.json 파일은 자동으로 생성되며 프로젝트에 설치된 종속성의 정확한 버전에 대해 자세한 기록으로 사용된다.

이렇게 하면 버전 불일치 가능성이 제거되고 다른 사람 또는 개발자가 프로젝트를 설치할 때 마다 정확히 동일한 종속성 세트를 얻게 된다.

결론은 package-lock.json 파일은 프로젝트에 참여하는 모든 사람이 동일한 내용을 공유하도록 보장하여 안정적이고 일관된 개발 및 배포 프로세스를 조정할 수 있게 해준다.

패키지 종속성

Node.js 프로젝트에서 사용되는 외부 패키지들을 의미하며 프로젝트가 정상적으로 동작하거나 필요한 기능을 구현하는 데 필요한 리소스와 기능을 제공한다.
주로 package.json 파일의 dependencies와 devDependencies에 명시된다.

NPM 패키지 설치 흐름

1. 프로젝트를 복제하고 모든 종속 항목을 설치한다. npm install

2. NPM은 프로젝트의 루트 디렉토리에 있는 package.json 파일을 읽어 직접적으로 필요한 패키지와 그 패키지가 의존하는 다른 패키지들을 포함한 dependency tree를 생성한다.
만약 package-lock.json 파일이 존재한다면 이미 설치된 패키지들과 특정 버전 정보를 확인한다.

3. NPM Registry에서 종속성을 가져오기 전에 NPM은 캐시를 확인하여 필요한 패키지가 이미 다운로드되어 로컬에 저장되어 있는지 확인 후 캐시에서 패키지가 발견되면 NPM은 다운로드를 건너뛰고 캐시된 버전을 사용하여 설치 프로세스 속도를 높인다.

4. 캐시에 패지키가 없거나 업데이트가 필요한 경우 NPM은 NPM Registry에 연결하여 필요한 패키지와 지정된 버전을 가져온다.

5. NPM은 패키지를 다운로드하여 프로젝트 루트 디렉토리 내 node_modules 폴더에 저장한다.
이 폴더는 프로젝트를 실행하는 데 필요한 모든 종속성이 포함되어 있다.

6. 패키지가 업데이트 되거나 새로 설치될 경우 NPM은 package-lock.json 파일을 생성하거나 업데이트 하고 package.json 파일도 업데이트 한다.

7. 의존성 패키지 설치를 성공적으로 마치면, NPM은 새로 다운로드한 패키지로 캐시를 업데이트 한다.
이 캐시 최적화는 동일한 의존성을을 처리할 때 후속 실행 시 설치 속도를 높이는 데 도움을 준다.

dependencies(의존성)

프로덕션 환경에서 실행될 때 필요한 패키지들을 말한다. 즉, 애플리케이션이 동작하는 데 반드시 필요한 패키지를 의미한다

"dependencies": {
    "@tanstack/react-query": "^5.37.1",
    "next": "14.2.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
	},

devDependencies(개발 의존성)

주로 개발 및 빌드 프로세스에서만 필요한 패키지들을 말한다.개발자가 코드를 개발하고 테스트하며, 빌드를 수행하는데 사용된다.

"devDependencies": {
    "@tanstack/react-query-devtools": "^5.40.0",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8.57.0",
    "eslint-config-next": "14.2.3",
    "prettier": "^3.2.5",
    "typescript": "^5"
  }

peerDependencies(피어 의존성)

패키지가 다른 패키지와 협력하여 동작하기 위해 필요한 패키지들을 명시하는 것이다.
일반적으로 패키지가 직접적으로 의존하는 경우 dependencies에 명시하지만, 다른 패키지와 협력할 때는 peerDependencies를 사용한다.

이는 패키지가 설치자에게 특정 패키지를 설치할 것을 요구하며, 이 패키지가 특정 패키지의 정상적인 동작에 필요하다는 것을 나타낸다.

Node.js에서 peerDependencies라는 개념이 등장한 배경은 다음과 같다.

  • 라이브러리와 프레임워크 호환성 유지: 특정 라이브러리나 프레임워크가 다른 패키지와 함께 사용될 때, 그 패키지가 정확한 버전의 의존성을 필요로 하는 경우에 peerDependencies로 명시된다.

  • 패키지 간 협력 관계: 다른 패키지의 특정 기능을 확장하거나, 특정 환경에서만 적절하게 동작할 수 있도록 지정 될 때 peerDependencies를 사용한다.

대표적인 예시로는 React와 Babel의 관계이다.

React 패키지는 일반적으로 자체적으로 다른 패키지에 의존하는 것은 아니지만, 다른 패키지가 React와 함께 동작해야 할 때 peerDependencies로 명시된다.

React는 JSX 문법을 사용하므로, JSX 코드를 JavaScript로 변환하는 Babel 이라는 트랜스파일러와 함께 사용될 수 있다.

{
  "name": "my-react-component",
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
  • React와 react-dom은 애플리케이션의 UI 구성 요소를 구현하는 데 필요한 주요 패키지이다.
  • React를 peerDependencies로 명시함으로써 사용자에게 React 및 react-dom을 명시적으로 설치하도록 유도하여, React 기반의 컴포넌트가 정상적으로 작동할 수 있도록 보장한다.

지금까지 프로젝트를 진행할 때는 dependencies, devDependencies의 차이를 명확히 알지 못하고 개발 환경에서만 사용되는 라이브러리도 dependencies에 설치해서 사용했던 것 같은데 이번 계기로 명확히 구분지어 설치할 수 있고, NPM과 peerDependencies의 개념을 익힐 수 있었던 것 같다!

🙃 도움이 되었던 자료들

All You Need to Know About NPM and Node Packages as a Beginner
An introduction to the npm package manager

profile
우혁
🏁
다음 포스트

트랜스파일러 톺아보기 🔎

0개의 댓글