728x90

NPM 이란?

NPM(Node Package Manager) 시작하기

npm 을 사용할 폴더에서 npm init 커맨드를 입력한다.

npm init

//package.json을 기본값으로 바로 생성해줌
npm init -y

NPM 사용하는 이유와 장점

라이브러리 &의존성 관리

과거 웹 개발에서는 라이브러리를 script 태그로 관리했기 때문에 버전업이나 협업관련해서 어려움이 있었는데 npm을 사용하면 package.json 파일에서 한눈에 파악할 수 있기 때문에 라이브러리 관리 측면에서 효율적입니다.

cdn을 사용했을 때는 공식 문서를 찾아서 태그를 찾아오는 방법이 번거롭다. 필요한 라이브러리를 npm install로 간단하게 설치하고 사용할 수 있습니다.

NPM 설치 명령어

지역 설치 명령어

npm install <라이브러리명>

위 명령어로 설치 시 현 폴더에 node_modules 파일에 라이브러리가 설치가 됩니다.

전역 설치 명령어

npm install <라이브러리> --global

\--global 옵션을 붙이면 라이브러리가 시스템의 아래와 같은 경로에 전역으로 설치가 됩니다.

# window
%USERPROFILE%\AppData\Roaming\npm\node_modules

# mac
/usr/local/lib/node_modules

전역 설치 vs 지역 설치

지역 설치

npm i jquery --save-prod

지역 설치 명령어의 경우 명령어 옵션으로 --save-prod를 붙이지 않아도 동일한 효과가 납니다. 또한, install 대신 i를 사용해도 됩니다.

전역 설치

NPM 전역 설치는 위와 같이 프로젝트에서 사용할 라이브러리를 불러올 때 사용하는 것이 아니라 시스템 레벨에서 사용할 자바스크립트 라이브러리를 설치할 때 사용합니다.

npm install gulp --global

전역 설치 명령어 옵션 --global 대신 -g를 사용해도 됩니다.

지역설치 2가지 명령어 옵션

npm install jquery --save-prod
npm install jquery --save-dev

위의 명령어 2가지를 아래와 같이 축약해서 사용할 수 있습니다.

npm i jquery
npm i jquery -D

devDependencies vs dependencies

NPM 지역 설치를 할 때는 해당 라이브러리가 배포용(dependencies)인지 개발용(devDependencies)인지 꼭 구분해주어야 합니다. 예를 들어, jquery와 같이 화면 로직과 직접적으로 관련된 라이브러리는 배포용으로 설치해야 합니다.

설치된 배포용 라이브러리는 npm run build로 빌드를 하면 최종 애플리케이션 코드 안에 포함됩니다.

그런데 만약 반대로 설치 옵션에 -D를 주었다면 해당 라이브러리는 빌드하고 배포할 때 애플리케이션 코드에서 빠지게 됩니다. 따라서, 최종 애플리케이션에 포함되어야 하는 라이브러리는 -D로 설치하면 안 됩니다. 개발할 때만 사용하고 배포할 때는 빠져도 좋은 라이브러리의 예시는 다음과 같습니다.

webpack : 빌드 도구
eslint : 코드 문법 검사 도구
imagemin : 이미지 압축 도구