📌npm (Node Package Manager)

다양한 기능(패키지, 모듈)들을 관리

npm 설치사이트

---

🔌 terminal에서 npm 설치

node 버전 확인하기
terminal → node --version
npm 버전 확인하기
terminal → npm --version

1) npm istall

npm 파일들 설치
약어로 npm i 만 쳐도 가능

2) npm install lodash

일반 의존성 설치, 브라우저와 직접적인 연관이 되어있음
사용자들이 직접적으로 볼 수 있는 화면(환경)

3) npm init -y

처음 vscode 프로젝트를 시작해서 빈화면 일때 터미널에 입력해주는 값
입력하면 package.json 이라는 파일이 생성된다.

• "devDependencies": {"parcel-bundler": "^1.12.4"}
  개발 의존성 패키지
• "dependenceies" : {"lodash": "^4.17.21"}

4) npm install parcel-bundler -D

개발용 의존성 패키지 (개발용으로만 사용하고 브라우저와 직접적인 연관은 없음)

• node_modules 파일
  한 번 설치하면 파일을 삭제하고 다시 install i 하면 다시 깔림
• package-lock.json
  package-lock.json 과 package.json 은 절대 절대 지우면 안되는 파일

---

🔥 라이브서버 이용하지 않고 parcel 사용하기

• 기본적인 html 파일과 js 파일을 생성
• html 파일에 js 파일을 연결시켜줌
• package.json 파일
  • script 부분에 "dev": "parcel index.html" 입력 (dev는 development 개발 의 약어)
• terminal
  • npm run dev (여기서 dev는 변수임, 내가 script 부분해 지정해준 명을 적어주면 됨)
  • 입력하면 Server running at 사이트 주소가 뜸
    

🔥 lodash 사용하기

• js 파일에 import _ from 'lodash'; 입력
• js 파일에 console.log(_.camelCase('hello world')); 입력
• package.json 파일에 "bulid": "parcel build index.html" 추가
• terminal 에 npm run build 입력
• parcel 과 다르게 사이트를 별도로 알려주지 않음
• 대신 dist 라는 폴더가 생성되고 그 파일 내의 html 파일을 열어보면 기존에 작성했던 html 과 다르게 코드들이 다 붙어서 나오는 것을 볼 수 있음.
  이것을 코드 난독화 라고 함. 코드난독화는 작성된 코드를 읽기 어렵게 만드는 작업을 함(웹브라우저가 읽는용이라서 = 압축버전 html).

---

유의적 버전 (Semantic Versioning, SemVer)

버전에 의미를 부여해서 그것을 구분하고 해석할 수 있는 것

최신 버전 확인 방법

• terminal → npm info lodash
  

원하는 버전 설치 방법

• terminal → npm install lodash@ 원하는 버전

예시

Major.Minor.Patch
E.g, ^12.14.1

• ^
  Major 버전 안에서 가장 최신 버전으로 업데이트 가능
• Major
  기존 버전과 호환되지 않는 새로운 버전 (12)
• Minor
  기존 버전과 호환되는 새로운 기능이 추가된 버전 (14)
• Patch
  기존 버전과 호환되는 버그 및 오타 등이 수정된 버전 (1)