반응형
⭕ 자바스크립트 JavaScript | JavaScript 패키지 매니저(package manager)
- 패키지 매니저(package manager)는 프로젝트가 의존하고 있는 패키지를 효과적으로 설치, 갱신, 삭제할 수 있도록 도와주는 관리 도구입니다.
- 특히 자바스크립트는 풍부한 오픈 소스 생태계를 자랑하기 때문에, 패키지 매니저는 필수적인 역할을 합니다.
- 자바스크립트 프로젝트는 적게는 수십 개, 많게는 수백 개의 다른 패키지에 의존할 수 있습니다.
➡️ NPM (Node Package Manager)
- Node.js 환경에서 JavaScript 패키지를 관리하기 위한 패키지 관리자입니다.
- Node.js 프로젝트에서는 추가적인 설치 없이 기본적으로 npm을 사용할 수 있습니다.
- 파일 구성: package.json, package-lock.json
- 적합한 프로젝트
- 작은 규모의 프로젝트나 개인 프로젝트에 적합합니다.
- npm 생태계에 익숙하거나 특정 패키지를 찾을 때 유용합니다.
➡️ NPM 사용하기
프로젝트 초기화
- 프로젝트를 시작할 때 package.json 파일을 생성하는 명령어입니다.
- 문답식으로 입력된 내용이 package.json 파일에 기록됩니다.
- $ npm init
- 기본값으로 자동 생성하려면 다음 명령어를 사용합니다
- $ npm init --yes
패키지 설치
- 일반 패키지 설치
- 프로젝트에서 사용할 패키지를 설치합니다.
- 설치된 패키지의 이름과 정보가 package.json의 dependencies에 기록됩니다.
- $ npm install [패키지 이름]
- 개발용 의존성 설치
- 개발 단계에서만 필요한 패키지를 설치합니다.
- 개발용 의존성의 이름과 정보는 package.json의 devDependencies에 기록됩니다.
- $ npm install [패키지 이름] --save-dev
프로젝트에 의존성 내려받기
- 의존성 내려받기
- package.json에 정의된 모든 의존성을 node_modules 디렉터리에 설치합니다.
- node_modules 디렉터리는 코드 관리나 배포 시 업로드하지 않으며, 삭제 후 npm install 명령어를 사용하면 다시 설치됩니다.
- $ npm install
- 개발용 의존성을 제외하고 내려받기
- 프로젝트 배포 시 개발용 의존성을 제외하고 설치합니다.
- package.json의 dependencies만 node_modules에 내려받습니다.
- $ npm install --production
➡️pacakage.json
- 프로젝트 정보와 의존성(dependencies)을 관리하는 문서입니다.
- JSON 파일로, 속성-값의 쌍으로 이루어져 있습니다.
- 주요 기능
- 프로젝트에서 사용하는 패키지(오픈 소스)와 해당 패키지의 버전을 기록합니다.
- 어느 환경에서도 동일한 개발 환경을 구축할 수 있게 합니다.
package-lock.json
- package.json을 이용해 npm install을 진행할 때 버전 차이를 방지하는 파일입니다.
- npm을 사용해 package.json 파일 또는 node_modules 트리를 수정할 때 자동으로 생성됩니다.
- 주요 기능
- npm의 버전이 다르거나, version range에 명확히 명시되지 않은 경우, 새로운 패키지 버전이 배포된 경우 발생할 수 있는 버전 차이를 해결합니다.
- 협업 시 동일한 환경을 보장하기 위해 소스 저장소에 반드시 commit 해야 합니다.
➡️ npm의 문제점
보안 문제
- 자동 의존성 처리
- npm은 패키지 설치 시 의존성을 자동으로 처리합니다.
- 신뢰성이 검증되지 않은 패키지가 설치될 위험이 있습니다.
- 악성 코드가 포함된 패키지가 의도치 않게 설치될 가능성을 높입니다.
- 오타 및 악성 코드
- 패키지 이름의 오타로 인해 잘못된 라이브러리가 설치될 수 있습니다.
- 악의적으로 악성 코드를 포함한 패키지가 배포될 가능성이 존재합니다.
- 이러한 문제는 시스템 보안에 심각한 위협을 가할 수 있습니다.
성능 문제
- 순차적 설치
- npm은 패키지 설치를 순차적으로 처리합니다.
- 설치 속도가 느려질 수 있습니다.
- 많은 수의 패키지를 설치할 때나 대용량 패키지를 설치할 때 이 문제가 두드러집니다.
- 네트워크 속도
- 네트워크 속도에 따라 설치 속도가 크게 영향을 받을 수 있습니다.
- 대규모 프로젝트의 경우 설치 시간이 상당히 오래 걸릴 수 있습니다.
디스크 용량 문제
- 중복 설치
- npm은 각 프로젝트마다 node_modules 디렉터리에 필요한 모든 패키지를 설치합니다.
- 동일한 패키지가 여러 버전으로 중복 설치될 수 있습니다.
- 이는 디스크 용량을 불필요하게 많이 차지하게 만듭니다.
- 의존성 트리
- 많은 의존성을 가진 프로젝트는 깊고 복잡한 의존성 트리를 가지게 됩니다.
- node_modules 디렉터리의 크기가 매우 커질 수 있습니다.
- 이는 디스크 공간 부족 문제를 야기할 수 있습니다.
➡️ npm 대안
Yarn
- 2016년 Facebook에서 개발한 패키지 매니저로, npm의 대안으로 발표되었습니다.
- 파일 구성: package.json, yarn.lock
- 특징
- 패키지를 병렬로 다운로드하여 설치 속도를 개선합니다.
- 패키지의 의존성을 자동으로 해결합니다.
- 설치된 패키지를 캐싱하여 재사용할 수 있습니다.
- 적합한 프로젝트
- 큰 규모의 프로젝트나 복잡한 의존성을 가진 프로젝트에 유용합니다.
- 성능과 속도, 일관성, 신뢰성 측면에서 더 나은 선택입니다.
- 참고 링크: Yarn 공식 사이트
Pnpm
- 디스크 공간을 절약하고 설치 시간을 단축하는 패키지 매니저입니다.
- 파일 구성: package.json, pnpm-lock.yaml
- 특징
- 심볼릭 링크를 통해 패키지를 공유하여 중복 다운로드를 방지합니다.
- 각 프로젝트에서 필요한 패키지 버전을 선택적으로 설치할 수 있습니다.
- 적합한 프로젝트
- 여러 프로젝트에서 같은 패키지를 사용하는 경우 디스크 공간을 절약할 수 있습니다.
- 의존성 트리가 복잡한 프로젝트에서 설치 시간을 단축할 수 있습니다.
- 참고 링크: Pnpm 공식 사이트
➡️ npm와 yarn 혼용
충돌 문제
- 각 lock 파일이 패키지 매니저마다 의존성을 다르게 관리합니다.
- 서로 다른 패키지 매니저를 사용할 경우 의존성 충돌이 발생할 수 있습니다.
- 프로젝트의 특성에 맞는 패키지 매니저를 하나 선택하여 사용해야 합니다.
npm과 Yarn의 패키지 관리 방식
- npm
- 관리 방식: 각 설치된 패키지별로 서브패키지를 구성합니다.
- 특징: 각 패키지의 독립성이 보장되지만, 패키지 중복으로 인해 디스크 용량이 커집니다.
- Yarn
- 관리 방식: 설치된 패키지와 종속 패키지를 일렬로 나열한 뒤 설치 패키지로 링크합니다.
- 특징: 패키지 중복이 제거되어 적은 용량으로 빠르게 실행됩니다. 그러나 네이티브 모듈과의 충돌 가능성이 있습니다.
lock 파일 관리
- 혼용 문제: package-lock.json과 yarn.lock 파일이 동시에 존재해도 상관없지만, 의존성 충돌을 피하기 위해서는 한 가지 패키지 매니저를 일관되게 사용하는 것이 좋습니다.
- 권장 방법: npm install을 사용하기로 했다면 끝까지 npm으로, yarn add를 사용하기로 했다면 끝까지 Yarn으로 패키지를 관리합니다.
반응형
'프론트엔드 > HTML & CSS & Javascript' 카테고리의 다른 글
CSS | 플렉스(Flex, Flexbox, Flexible Box Layout) 레이아웃 배치 (73) | 2024.05.14 |
---|---|
CSS | position 위치 속성: Static, Relative, Absolute, Fixed, Sticky (74) | 2024.05.14 |
CSS | 여백 속성: Margin 및 Padding (74) | 2024.05.14 |
CSS | background-size 속성: contain 및 cover (73) | 2024.05.14 |
웹 구조 Web | 프론트엔드 개발 기술 목록: HTML, CSS, JavaScript(JS) (84) | 2024.04.22 |
웹 구조 Web | 프론트엔드 개발: UI(User Interface)와 GUI(Graphic User Interface) (82) | 2024.04.22 |
리액트 네이티브 React Native | React.createElement와 JSX (68) | 2024.03.20 |
리액트 네이티브 React Native | JSX와 XML 마크업 언어 (62) | 2024.03.20 |