NPM 설치 및 설정

강의 교안 소개

웹팩 핸드북 : https://joshua1988.github.io/webpack-guide/

---

Node.js란?

Node.js는 브라우저 밖에서도 자바스크립트를 실행할 수 있는 환경을 의미합니다. Node.js가 나오기 전까지는 자바스크립트가 브라우저의 동작을 제어하는데 사용되었고 브라우저에서만 실행할 수 있었지만 이제는 Node.js로 자바스크립트를 브라우저 밖에서도 실행할 수 있게 되었다.

추가내용 : https://ninjaggobugi.tistory.com/7

---

NPM이란?

NPM(Node Package Manager)은 Node.js를 설치하면 자동으로 설치가 된다. NPM은 명령어로 자바스크립트 라이브러리를 설치하고 관리할 수 있는 패키지 매니저로, 전 세계 자바스크립트 개발자들이 모두 자바스크립트 라이브러리를 공개된 저장소에 올려놓고 npm 명령어로 편하게 다운로드 가능하다.

---

Node.js 설치

다운로드 : https://nodejs.org/ko/
Node.js 설치시 NPM도 함께 설치가 되며, 터미널 실행 후 아래 명령어를 통해 버전 체크하여 설치가 정상으로 되었는지 확인 가능하다.

$ node -v
v12.16.1

$ npm -v
6.13.4

VScode에서 터미널 명령어 정상적으로 실행이 되지 않은 경우 bash가 아닌지 확인 필요.

---

NPM 명령어

초기설정

$ npm init 실행하면 터미널 화면을 통하여 아래 항목를 설정하는 단계를 거처 최종적으로 package.json 파일로 생성한다.

순서	항목
1	package name
2	version
3	description
4	entri point
5	test command
6	git repository
7	keywords
8	author
9	license

그러나 일반적으로 터미널 상태에서 설정하기 보다 package.json 파일에서 직접 변경하는 것이 직관적이므로 $ npm init -y 명령어를 통하여 터미널 설정화면을 생략하고 package.json 생성한다.

패키지 설치

$ npm install 패키지명

• 설치 예시로 jQuery 라이브러리 설치한다면 $ npm install jquery이다.
• 설치 가능한 패키지는 npmjs.com 찾아볼 수 있다.
• 패키지 최초 설치 node_modules 생성이 된다.
• 패키지 파일은 node_modules 하위 폴더(예 : jquery)에서 찾을 수 있다.
• 설치된 패키지 버전 관리는 package.json의 Dependencies항목에서 가능하다.

패키지 제거

$ npm uninstall 패키지명 실행하면 설치된 패키지 관련된 파일이 모두 삭제가 된다.

패키지 전역설치

• 전역설치는 키워드 --global 사용한다.
• 예시로 $ npm install jquery --global 이다.
• 전역설치 관련 상세내용(클릭)
• 전역설치시 패키지 다운로드 경로는 아래와 같다.

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

# mac
/usr/local/lib/node_modules

devDependencies란?

NPM 지역 설치시 라이브러리가 배포용(dependencies) 또는 개발용(devDependencies) 구분해야된다. 예를 들어, jquery와 같이 화면 로직과 직접적으로 관련된 라이브러리는 배포용으로 설치해야 된다.
이렇게 구분하여 배포시 필요없는 패키지를 build 하지 않으므로 시간 단축과 리소스 관리에 용의하다.
개발용(devDependencies) 구분 되는 패키지는 대표적으로 아래를 참고

패키지명	설명
webpack	빌드 도구
eslint	코드 문법 검사 도구
imagemin	이미지 압축 도구
scss	CSS 전처리기

devDependencies 설치

• 개발용(devDependencies) 설치는 --save-dev 또는 -D 키워드를 사용한다.
• 예시로 $ npm install scss -D 이다.
• 설치된 패키지 버전 관리는 package.json의 devDependencies항목에서 가능하다.