webpack - NPM

장밤톨·2024년 4월 30일

매일 프로젝트를 하며 숨쉬듯이 봐온 webpack, npm이지만 이게 뭔지도 모르고 사용하는 것 같았다. 여러 라이브러리를 사용하면서 내가 어떤 라이브러리를 설치했는지 잘 모르겠고 이걸 어떻게 관리해야하는지도 몰라서 이에 대해 공부해보고자 한다.

npm(node package manager)이란?

: 자바스크립트 프로그래밍 언어를 위한 패키지 관리자이다. 즉, 쉽게 말해서 자바스크립트 라이브러리 관리해주는 도구라고 말할 수 있다.

npm 사용하기(명령어)

버전 확인

node -v // 노드 버전확인
npm -v // npm 버전 확인

프로젝트 초기화 / package.json 생성

npm init
npm init -y //자동 설치

package.json

: 위와 같이 초기화를 해주면 해당 프로젝트(폴더)에 아래와 같은 package.json파일이 생성된다.

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

위 구조는 가장 기본적인 구조이며 실제 애플리케이션을 만들 때 자주 사용되는 속성은 다음과 같다.

scripts

dependencies

devDependencies

라이브러리 설치 명령어

npm install
npm i

라이브러리 삭제 명령어

npm uninstall

왜 이렇게 관리를 해야할까?

라이브러리간의 의존관계들, 특정 라이브러리가 다른 라이브러리에 영향을 줄 수도 있기에 라이브러리 관리를 해줘야 한다. (특히, 굉장히 많은 라이브러리를 사용할 때)

npm의 장점

라이브러리의 관리를 한 곳(package.json)에서 원활하게 해줄 수 있다.
해당 페이지에서 CDN을 불러오지 않아도 install로 설치했을 때, 로컬 환경에 바로 불러와서 사용할 수 있다.

지역/전역 라이브러리 설치

위의 방식대로 설치한 라이브러리들은 모두 지역 라이브러리로 취급된다.

라이브러리 전역 설치

npm install (라이브러리 이름) --global
// = npm install (라이브러리 이름) --g

: 설치 이후에 해당 라이브러리 이름을 입력하면 명령어로 인식한다.
전역 설치(시스템 레벨에 설치)하게 되면 시스템에서 제공하는 CLI, 명령어 기능을 활용할 수 있다.

라이브러리 전역 설치 경로(항상 일치한다.)

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

# mac
/usr/local/lib/node_modules

라이브러리 지역 설치 경로

해당 프로젝트\node_modules\

라이브러리 지역 설치 옵션

개발용 라이브러리 설치

npm install (library) --save-dev
npm i (library) -D

dependencies
- npm i (라이브러리 이름)를 통해서 설치했을 때
- 애플리케이션의 로직(화면의 로직)을 구현하는 것에 관련되어 있다.
- ex: react, angular …
devDependencies
- npm i (라이브러리 이름) -D를 통해서 설치했을 때
- 개발용 보조 라이브러리
- ex: webpack, sass …