# npm 기초 정리

# npm이란?

  • 명령어로 자바스크립트 라이브러리를 설치하고 관리하는 패키지 매니저

    node.js 설치시 자동으로 같이 설치됨

# npm 초기화 명령어

npm init -y
// npm 초기 디폴트 명령어로 실행한다.

# npm이 기존 방법보다 좋은 장점

관리 용이

  • 라이브러리가 페이지 중간에 넣어도 돌아가는게 웹 개발의 유연함이지만 그에 따라 의존성, 라이브러리 버전 관리 매우 불편
  • 라이브러리 사이간 버전 의존이 있어 버전 관리가 불편했으나 package.json안에서 dependencies 한곳에 다 뭉치게 되어 라이브러리 관리가 편해졌다.

설치 용이

  • cdn (일반적인 자바스크립트 로딩방식)을 사용할 떄는 검색하고 찾아서 태그를 긁어와야 하는 불편함, 시간이 많이 든다
  • 내가 필요한 것이 있다면 npm install로 라이브러리가 설치가 빠르게 되는 장점이 있다.
  • 내 컴퓨터 환경에 node_modules에 잘 정돈되어 설치된다.

# npm 설치 명령어

# 1. npm 지역 설치

// 프로젝트 node_modules에 설치된다
npm install ... --save-prod
or
npm i ...
or
npm install ...
npm uninstall ...

# 1.1 지역 설치 옵션

# 1. npm install ... --save-dev or -D or npm i ... -D

devDependencies에 설치

# 2. npm install ... --save-prod

# 1.2 dependencies와 devDependencies 차이

# 1. npm i vue : dependencies

  • dependencies: 앱의 로직을 직접적으로 구현되는데 필요한 라이브러리 (vue, react, chartjs 등등)

# 2. npm i vue -D: devDependencies

  • devDependencies: 개발을 할때 도움을 주는 보조 라이브러리 (webpack, js-compress, sass)

# 1.3 dependencies(배포용)와 devDependencies(개발용) 사용시 주의점

  • 배포용npm run build시 최종 애플리케이션 코드안에 포함됨
    • 주의! 배포용에 필요 없는 개발용 라이브러리가 포함시 빌드 시간이 매우 오래 걸린다.
  • 개발용npm run build시 앱에 포함 안됨
  • 기본적으로는 개발자가 설치시 구분하나, 구분을 못하겠으면 라이브러리 안내 된 곳에서 설치 하라는 방법대로 하면 된다.

# 3. npm 전역 설치

// 프로젝트 node_modules에 설치되지 않는다
npm install ... --global
or
npm install ... -g
npm uninstall ... --global
// 전역 설치 라이브러리 경로
// /usr/local/lib/node_modules
#webpack
노경환
이 글이 도움이 되셨다면! 깃헙 스타 부탁드립니다 😊😄
최근변경일: 3/25/2024, 12:16:11 PM