[Intermediate] NPM

1. NPM

• Node Package Manager
• 전 세계의 개발자들이 만든 다양한 기능(패키지, 모듈)들을 관리해주는 도구
• NPM의 생태계에 있는 패키지를 명령어를 통해 프로젝트 내에 설치하여 활용할 수 있다.
• 기존에는 link와 script 태그로 프로젝트에 연결하여 사용하는 방식이었다.
• 최신의 프론트엔드 개발에서는 이러한 기능들을 프로젝트에 직접적으로 설치하여 별도의 가공 처리를 거쳐 결과물을 웹사이트로 동작시킨다.

2. NPM의 장점과 단점

• 장점: 관리 효율 증가, 손쉬운 기능 고도화
• 단점: 학습 난이도 증가, 구성이 복잡함

3. NPM 명령어 사용 예시

1) npm init -y

• npm으로 패키지 관리를 시작한다는 명령어
• 지정한 폴더 내에 package.json 파일이 생성됨
• package.json 파일 내, 여러가지 옵션이 명시됨
• name: 프로젝트명
• version: 프로젝트의 버전
• description: 프로젝트의 설명
• main: 현재 프로젝트를 하나의 패키지로 만들어 npm의 생태계에 업로드할 때 필요한 옵션이며, 웹사이트 제작 시에는 필요하지 않으므로 삭제하여도 무방함
• scripts: 현재 프로젝트 내부에서 사용할 수 있는 스크립트 명령들을 명시함
• 이외에 keywords, author, license 등의 옵션이 있음

2) npm install parcel-bundler -D

• parcel-bundler라는 이름의 패키지(모듈)를 설치하는 명령어
• node_modules 폴더와 package-lock.json 파일이 생성됨
• node_modules 폴더 내에 설치한 parcel-bundler 패키지가 생성됨
• parcel-bundler가 생성되고 활용되는 데에 필요한 패키지들이 함께 설치됨
• package.json 파일 내, devDependencies 옵션으로 "parcel-bundler": "^1.12.4"와 같이 설치한 패키지가 버전과 함께 명시됨

3) npm install lodash

• lodash라는 이름의 패키지(모듈)를 설치하는 명령어
• package.json 파일 내, dependencies 옵션으로 "lodash": "^4.17.21"와 같이 설치한 패키지가 버전과 함께 명시됨

  devDependencies, dependencies 옵션으로 패키지명과 버전의 내역이 명시됨으로써 node_modules 폴더를 삭제한다하더라도 npm i 또는 npm install이라는 명령어를 통해 해당 폴더가 재설치되며 프로젝트에 패키지를 설치할 수 있게 된다.

4. package-lock.json

• 패키지(모듈)를 설치하게 되면 생성되는 파일
• 설치한 해당 패키지(모듈)가 내부적으로 사용하는 또 다른 패키지(모듈)들의 정보가 명시됨
• 다시 말해, package.json은 직접적으로 관리하는 파일이지만, package-lock.json은 자동으로 관리되는 파일

5. 개발용 의존성과 일반 의존성 패키지

• 개발용 의존성 패키지 설치 방법은 npm install parcel-bundler -D와 같이 뒤에 -D의 명령어를 붙임(-D는 --save-dev의 약어)
• 설치한 특정한 패키지들이 개발하는 상황에만 필요하며, 웹브라우저에서 동작할 시에는 필요하지 않음을 의미
• 이와 반대로 npm install lodash와 같이 일반 의존성 설치가 있음
• 일반 의존성 설치는 웹브라우저에서도 동작할 수 있음을 의미