(JavaScript)NPM과 NPX에 대해 쉽고 얕게 이해하기

---

NPM (Node Package Manger)

기본적으로 자바 스크립트를 배우기위해서는 다들 Node.js를 설치했을 것이다. 그 때 보는 Node로 이를 이용하여 다양한 자바스크립트 애플리케이션을 실행할 수 있고, 서버에 주로 사용한다. 

 

자바스크립트는 웹상에서 사용하거나 node.js를 설치하여 로컬환경에서 사용할 수 있다. 자바스크립트로 작성된 오픈소스나 라이브러리 등을 가져와서 사용하려면 npm을 사용한다.

 

 

 

재밌는 범쌤의 이야기를 인용해보자. 

 

 

 

자바스크립트로 작성된 오픈소스, 라이브러리가 작성된 도서관이 있다.

 

이곳에서 책을 빌리기전 먼저 해야하는 것은 

npm init

npm init -y

 

 

git init 처럼 제일 처음 기본값을 생성한다고 생각하면 된다.

 

이를 수행하면 package.json 파일이 생성된다. 기본적으로 프로젝트에서 사용하는 모든 라이브러리에 대한 정보를 갖고 있다. 

 

이제 npm을 사용하여 라이브러리등을 설치하면 된다.

npm install 라이브러리명

 

우린 예제로 live-server 라는 라이브러리를 설치해봤다.

 

라이브러리를 설치하면 이제는 node_modules라는 폴더가 생기는데 이것은 NPM이 해당 라이브러리의 소스코드를 가져와 이곳에 저장한다. 

 

package.json = 장부

node_module = 도서관

 

 

내가 가져온 목록이 적혀있는 package.json 파일과 갖고온 라이브러리의 소스코드가 몽땅 들어있는 node_module 파일이라고 생각하면 된다. 

 

 

 

---

NPX (Node Package Module)

이것은 NPM의 관리 모듈, 도구 라고 생각하면 된다. NPM 5.2.0 버전부터 추가된 도구로 버전만 충족된다면 npx 명령어를 사용할 수 있다. 

 

패키지를 임시 설치해서 "실행"하는 용도로 도서관에서 책을 사는게 아닌 빌려서 잠시 읽는 용도이다. 

 

npx 를 실행할떄는 script 에 저장되어있지 않은 라이브러리 실행

npm 은 package . json 에 저장되어있는 script 실행

 

 

 

 

아까 NPM 을 이용하여 live-server를 설치했다면 npx를 이용해서는

npx live-server

처럼 사용 가능하다. 

 

 

---

브라우저 실행 방법

1. html파일에 script 파일 연결 후 go live

2. npx live-server client 실행 가능

3. package.json의 단축어를 이용해 실행 가능

4. node를 이용해 실행 가능

 

 

---

gitignore 단축어

npx add-gitignore node,window,macos,webstorm,vscode