[프엔 개발자를 위한 Webpack] 1.NodeJS & NPM

01.Node.js와 NPM

Node.js

→ 브라우저 밖에서도 자바스크립트를 실행할 수 있는 환경입니다.

NPM

→ 자바스크립트의 전 세계 라이브러리를 관리중인 ‘도구’입니다.
= 패키지 매니저

default 값으로 npm을 init하고싶으면 npm init -y를 사용합니다.

npm을 사용했을 때 좋은 점

• 웹 구현 시 dependencies, devDependencies를 사용해서 라이브러리 관리 가능
  • 웹 구현 시 어떤 라이브러리를 사용하는지 중구난방인 상태일때!
  • package-json의 dependencies를 사용해서 해당 라이브러리들을 깔끔하게 정리할 수 있습니다.
• 원하는 라이브러리를 바로 사용할 수 있습니다. - 일반적인 html의 script 요소를 사용한 라이브러리는, url을 따로 검색, 복사해서 넣어야 하는 불편함이 있습니다. - npm을 사용하면 npm install ‘라이브러리 이름’ (npm i ‘라이브러리 이름’)으로 설치 후, package-json의 dependencies에 바로 추가되게 할 수 있습니다. - 로컬 환경에서 해당 라이브러리를 바로 사용할 수 있습니다.
  
  

02.NPM

NPM : Node Package Manager

npm 명령어

• npm install ‘라이브러리’ (= npm i ‘라이브러리’)
  • 원하는 라이브러리 설치
• npm uninstall ‘라이브러리’
  • 원하는 라이브러리 삭제
• npm install ‘라이브러리’ —global (= npm i ‘라이브러리’ -g)
  • 라이브러리 전역 설치 명령어
  • 로컬 환경의 node_modules에 설치되지 않습니다.
  • window의 경우 appdata/ 내 node_modules 즉 시스템 레벨의 전역에서 설치
• npm install ‘라이브러리’ —save-dev (= npm i ‘라이브러리’ -D)
  • devDependencies로 따로 나뉘어 관리.

dependencies & devDependenices

1. dependencies
   1. 어플리케이션의 로직을 구현하는 데 도움이 되는 라이브러리들
   2. 화면의 로직과 직접적인 관련이 있는 라이브러리들
   3. 최종 배포 시 포함
   4. jquery, jquery-ui, vue, react 등
2. devDependencies
   1. 개발을 할 때, 도움을 주는 개발 보조 라이브러리들
   2. 최종 배포 시 자동으로 포함되지 않음
   3. sass, webpack 등

→ 개발용과 배포용 라이브러리들을 나누어 관리해야, 웹 배포 시 빌드 시간이 길어지는 이슈가 없습니다.

→ dependencies에 모든 라이브러리들을 관리했을 때, 빌드 시간이 매우 길어져 웹의 사용성이 좋지 않습니다.

본 게시물은 Inflearn ‘캡틴판교’님의 강의를 듣고 작성되었습니다.