자바스크립트 복습 (심화버전) - npm / webpack

NPM이 무엇인가

NPM(Node Package Manager)은 명령어로 자바스크립트 라이브러리를 설치하고 관리할 수 있는 패키지 매니저이라고 정의할 수 있다. 이 패키지 매니저를 이용해서 자주 쓰는 기능을 모듈화 해서 사용하게 된다. 재사용성도 높아지고 관리도 쉬워지기에 정말 많은 개발자들이 사용한다.

---

왜 npm을 사용해야 하는가?

• 프로젝트에서 필요한 라이브러리를 쉽게 다운받을 수 있다. (npm install로 프로젝트에서 필요한 라이브러리를 한꺼번에 다운로드한다.)
• 프로젝트에서 사용하는 많은 라이브러리의 버전과 의존성 관리가 편하다.
• 필요한 라이브러리를 CDN 보다 편하게, npm 명령어를 통해 프로젝트 로컬 환경 및 전역 환경에 쉽게 설치하고 관리할 수 있다.
• 빌드하는 명령어를 자동화해 프로젝트를 관리할 수 있다.

---

https://nodejs.org/en/

Node.js — Run JavaScript Everywhere

공식 링크이다. 안정화 버전으로 깔아주는 것이 좋다.

이후 터미널창을 이용해서 npm 특정 명령어를 써 내려가야 한다.

package.json

package.json 파일은 프로젝트에 대한 정보를 갖고 있는 파일이다. 특징은 뒤에 확장자가 json이라는 것이다.

이 파일은 프로젝트에 의존된 라이브러리를 관리한다.

package.json 파일은 직접 작성할 수도 있고, npm init 명령어를 통하여 자동으로 생성할 수 있다.

node_modules

node_modules 디렉토리에는 package.json 에 설치된 모듈뿐만 아니라, package.json에 있는 모듈이 의존하고 있는(package-lock.json) 모듈 전부가 설치된 디렉토리이다.

---

이 밖에 엄청 많은 명령어가 있다.

---

전역설치 vs 지역설치

• 시스템 상에서 해당 라이브러리의 명령어를 인식하게끔 설정하기 위해서 전역 설치를 한다. (ex. vue-cli)
• 프로젝트에서 사용할 라이브러리는 지역설치
• 시스템 레벨에서 사용할 자바스크립트 라이브러리(해당 라이브러리명을 명령어로 인식)는 전역설치

위의 상황에 따라서 스코프를 다르게 해 주면 된다. 코드는 다음과 같다.

npm install -g nodemon

 

이 밖에 더 많은 패키지를 알고 싶다면 다음 사이트를 참고하자.

https://www.npmjs.com/

npm | Home

---

Webpack은 무엇인가

Webpack은 여러 개의 파일을 하나의 파일로 묶어주는 모듈 번들러(Module bundler)를 말한다.

이때 모듈과 웹팩에서의 모듈의 정의는 다음과 같다.

• 모듈(Module)
• 웹 애플리케이션의 규모가 커지면 커질수록 파일을 여러 개로 분리해야 하는 시점이 온다. 이때 분리된 하나의 파일을 모듈(module)이라고 부른다.

 

• 웹팩에서의 모듈(Module)
• 자바스크립트(JS) 뿐만 아니라 HTML, CSS, 이미지 등 웹을 구성하는 모든 자산(Assets)을 뜻한다.

Webpack을 사용하는 이유?

간단하다. 매출에 "로딩 속도"와 엄청난 연관성이 존재하기 때문이다.

글로벌 온라인 쇼핑몰 아마존의 경우 로딩 시간이 0.1초 증가할 때마다 매출이 1%씩 하락했으며, 구글은 페이지 로딩시간 0.5초 증가로 인해 매출 및 트래픽이 20% 감소하였다. 이는 곧 로딩시간이 매출과 트래픽으로 직결됨을 증명한 것이다.

특히, 우리 대한민국에서도 로딩 속도는 매우 중요하다. 조금이라도 로딩이 길어지면 바로 그 서비스를 버리는 것을 생각할 정도이다.

(아무튼, 로딩 속도를 줄이는 것은 매우 중요하다는 것이 결론)

Webpack은 그 로딩 속도를 획기적으로 줄여줄 수 있는 기술인 것이다.

 

---

즉, 웹팩으로 여러 개의 자원인 모듈을 하나로 묶음으로써, 클라이언트(브라우저)에서 서버로 자원을 요청할 때 개수를 줄일 수 있는 것이다. 이렇게 모듈을 하나로 묶는 과정을 번들링이라고 한다. 번들링을 할 수 있는 도구를 모듈 번들러라고 한다. 모듈 번들러에는 다양한 종류가 있다.

현재 가장 많이 사용하는 모듈 번들러는 웹팩이다. 

Webpack 시작하기

 

npm 초기화하고 웹팩을 설치하면 된다. (그러려면 일단 노드 js를 먼저 깔아서 npm이 깔려있어야 함.)

다시 말하지만, 이런 명령어는 터미널창에서 실행하게 된다.

실제로 운영 환경에서 웹팩을 이용해서 서버에서 불러오는 파일의 개수가 많이 줄어든다. 로딩 속도도 엄청나게 줄어들게 된다.