[패스트캠퍼스] 프론트엔드 강의 6주차 - NPM 개요

[내일배움카드], [국비지원교육]

03. NPM 개요(1)

 

NPM이란? 

 

그림을 통해 이해하는 NPM

패키지(모듈)들을 NPM에서 관리해서 사용자가 $ npm install 패키지명 을 입력하여 사용할 수 있게 해준다.

현재 약 100만개(WOW~)의 NPM 패키지 있다고 합니다.

 

04. NPM 개요(2)

 

터미널에 다음 코드 실행 

npm init -y

※ 이때 터미널은 powershell로 해주세요.

 

 

해당 프로젝트에 package.json파일이 생성됩니다.

{

  "name": "part2_ch1",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [],

  "author": "",

  "license": "ISC"

}

 

여기서 “main”은 직접 package를 배포할때 사용되므로 해당 경우가 아니면 필요없습니다.

 

그 다음으로 터미널에 아래 코드 입력해서 parcel-bundler 패키지를 설치해봅시다. 약 1분정도 걸리네요.

npm install parcel-bundler -D 

 

설치가 완료되면 node_modules 폴더와 package-lock.json이 설치된것을 확인 할 수 있습니다.

 

node_modules 폴더안에 수많은 패키지 중  parcel-bundler 폴더를 찾아 클릭해봅시다.

※ 이때 프로젝트 폴더에서 p 를 입력하면 쉽게 찾을 수 있습니다.

 

 

그렇다면 왜 설치하지도 않은 패키지들이 같이 설치 될까요?

 

그 이유는 설치한 parcel-bundler 패키지 또한 수많은 패키지들을 사용해서 만들어진 모듈이기 때문입니다.

parcel-bundler 폴더 내에 package.json에서 그 내용을 확인 할 수 있습니다.

pachage.json에서 설치한 패키지의 버전을 확인 할 수 있습니다.

다음 단계로 아래의 코드를 터미널에 입력해봅시다.

npm install lodash

 

node_modules 폴더를 지워봅시다.

지워도 package.json에서는 버전 정보가 남아 있습니다.

이때 다시 모듈 폴더를 설치하고 있으면 터미널에 

npm install (npm i 까지만 쳐도 됩니다.) 을 입력하면 다시 폴더를 설치할 수 있어요.

 

즉, 한번 설치한 패키지는 내역이 남게되고, npm i 명령어를 통해서 언제든 설치 할 수 있습니다.

 

package-lock.json은 사용자가 설치한 패키지안에 있는 패키지를 관리하는 파일입니다. 자동으로 관리된다고 보시면 되고 그래서 lock이라는 이름이 들어있네요.

 

요약
package.json : 직접관리
package-lock.json : 자동관리

 

 

node_modules 폴더는 삭제해도 다시 설치할 수 있어요. 

중요한건 package.json, package-lock.json 은 절대 지우면 안된다는 겁니다.

 

npm 패키지 설치시 -D를 붙이는 이유와 의미

-D : 개발의존성 패키지

 

개발의존성 패키지 설치 : 개발할때만 사용하고 웹브라우저에서 직접 동작x

일반 의존성 설치 : 실제 웹브라우저에서도 동작할 수 있다는 뜻.

 

05. 개발 서버 실행과 빌드

로컬환경에서 개발서버 사용하기 

package.json에서 test 지우고 다음 코드 입력.

"dev": "parcel index.html" 

 

이제 터미널에 다음 명령어를 입력합니다.

npm run dev

 

다음과같은 터미널창이 나옵니다. 이제 로컬호스트 주소를 누르면 (Ctrl + 클릭) 로컬환경에서 개발서버를 열 수 있습니다. 

main.js에서 import _ from ‘패키지명’ 을 통해 패키지를 import할 수 있습니다.

package.json 에서 dev 아래 “build” : ~ 추가.

이렇게 하면 실제로 사용자가 보는 결과물이 추가됩니다.

 

이제 터미널에서 ctrl + C 를 - y 를 눌러 작업 초기화 후

npm run build를 실행해보자.

 

 

disk 폴더가 생성됨을 확인.

 

dist 내부의 index.html 을 열어보면 난독화되어있습니다. 

들여쓰기도 용량을 차지하니까 없애준겁니다. 어차피 브라우저만 해석하면 되기때문에 이렇게 용량을 줄이는 과정을 거칩니다.

결론 : 이제 npm run dev로 개발로컬서버를 실행합니다. 그것을 가능케해주는 패키지가 parcel-bundler 입니다. 

06. 유의적 버전(SemVer)

유의적 : 의미가 있다는 뜻.

 

Major version의 의미

 

Minor version의 의미

 

 

Patch version의 의미

 

 

^가 버전앞에 붙으면, 

npm update 패키지명 : 명령어로 업데이트가 가능합니다.