NPM

node --version
npm --version
-v 
clear or cls


[NPM 프로젝트 시작]
npm init

package name : 
그냥 엔터 누르면 폴더 이름 그대로 프로젝트명
version: (1.0.0)기본값
description: 기본값 없음, 안넣을 수 있음
entry poing: (index.js) 진입점, 공개용일때
test command: 모름
git repository: 기본값 없음, 안넣을 수 있음
keywords: 기본값 없음, 안넣을 수 있음
author: 기본값 없음, 안넣을 수 있음
license: (ISC) 안넣을 수 있음
Is this OK? (yes)

package.json 파일 생김
처음 생성할 때 만든 내용들이 들어감

{
  "name": "signature",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

npm init -y
입력하면 모든 질문 생략하고 바로 package.json 생김


[패키지 설치]
npm install lodash : lodash 설치
패키지를 처음 설치하면
node_modules 라는 폴더와
package-lock.json 이라는 파일이 생김

cdn 주소를 link나 script 태그로 연결하지 않고 설치할 수 있음
설치 된 파일은 node_modules에 들어감
package.json 파일 내부에
dependencies 안에 설치 내용이 들어감

npm install parcel : parcel 설치
lodash 같은 여러 가지 패키지들을 실제 웹사이트에 올라갈 수 있는 하나의 구조로 묶어주는 역할
이렇게 묶어주는 것을 번들러 라고 함
웹사이트에서 동작하는 건 아님
개발용으로 install
npm install --save-dev percel
개발용과 배포용를 나눠서 설치해야한다.
하다보면 알게 된다고 한다
-D 로 바꿔서 사용할 수 있다.

설치하면
package.json파일에
devDenpendencies에 적힘


dependencies 일반 의존성
devDependencies 개발 의존성

node_modules에는 우리가 설치한 것  +
우리가 설치한 것들이 동작하는데 필요한 것들 같이 있다.

package-lock.json에는 설치한 파일들의 관계가 적혀 있다.

node_modules는 삭제해도 언제든지 복구할 수 있다.
npm install 하면 package.json과 package-lock.json의 내용을 기준으로 만들어진다.

npm project를 할 때에는 .gitignore 파일에 node_modules를 추가해준다.
버전관리할 필요 없다고 한다.

index.html 생성
main.js 생성
main.js 에 
import _ from 'lodash'; 추가
_는 rodash를 뜻함
index.html에 script나 link 추가 없이 
node.js에서 mpm을 통해 설치했기 때문에
따로 처리할 필요 없이 import로 가져올 수 있음

라이브서버는 이제 안씀
고도화된 개발에서는 어려움이 있다고 함

package.json에
"scripts": {
    "dev": "parcel ./index.html"
  },
추가
parcel을 현재 프로젝트에서 사용한다고 설치한거라서
터미널에 parcel ./index.html을 직접 입력하면 동작을 안한다
script 안에 명령어를 만들어서
수행할 동작을 입력해 줘야한다

npm run dev 라고 터미널에 입력하면 동작 됨

parcel은 typesrcipt 지원 ts파일 넣으면 됨
parcel이 ts를 js로 바꿔줌

main.js에 import 명령어를 썼기 떄문에
각각은 js파일은 module이 되고
index.html에 main.js를 불러온 script태그의 type속성에 module을 넣어줘야 한다.
<script type="module" src="./main.ts"></script>


넣어도 실패하는 경우
vscode 껐다켜고
.parcel-cache 삭제
다시 npm run dev


parcel이 잘 동작하면
.parcel-cache랑
dist 폴더가 생긴다
안에 index.html 파일에 script 태그에는 ts가 있는데
js 파일이 src에 들어있음
parcel이 변환해준거고, dist 폴더에 있는게 우리가 브라우저에서 본거임

개발서버가 켜져있는 상태에서 dist 폴더 삭제하면 바로 생김
서버 끄고 지우면 안생김

package.json
scripts에
"build": "parcel build ./index.html" 배포용 추가
npm run build 하면 에러남
npm init -y 해서 만들 때
"main": "index.js", 이거로 들어가서 그럼
parcel의 bulid라는 명령어는 main 옵션에 영향을 받는다는 뜻
우리는 일단 지우면 됨

에러나면 일단 .parcel-cache 지우면 됨

npm run build 개발 모드로 만들면 dist 폴더에 index.html 이 빈칸 없이 개발 모드로 만들어져서 읽기 어려움
브라우저는 문제 없음
dist 폴더 내 js 파일도 난독화 됨
parcel build 포함해서 이렇게 된거임
언제든지 지웠다가 만들수 있으니까 node_modules 와 똑같이 dist도 .gitignore 에 추가한다.

유의적 버전(Semantic Versioning, SemVer)
프로젝트가 개발되는 특정한 시점에 의미를 부여해서 숫자를 붙이는 것
Major.Miner.Patch
^4.17.21
Major 기존 버전과는 호환되지 않는 새로운 버전.
Minor 기존 버전과 호환되는 기능이 추가된 버전.
Patch 기존 버전과 호환되는 버그 및 오타 등이 수정된 버전.

^는 Major 버전 안에서 가장 최신 버전으로 업데이트 가능
npm info lodash 하면 lodash 정보 보는거고 다른 패키지 정보들도 볼 수 있음
latest가 현재버전과 같은 걸 확인 할 수 있음

npm install lodash@4.17.19 이렇게 하면 특정 버전 받을 수 있음
"lodash": "^4.17.19" 
^ 붙어있으니까 Major 버전 안에서 가장 최신 버전으로 업데이트 가능
npm update lodash --save
--save 안붙여주면 package-lock.json 만 수정됨
사용하는데 문제는 안된다고 한다.

"lodash": "4.17.19" ^를 빼고 업데이트를 하면 적용이 되지 않는다
해당 버전만 사용하겠다는 의미를 명시적으로 사용한 사례라고 볼 수 있다.

~ 기호가 붙은 경우
Minor 버전 안에서 가장 최신 버전으로 업데이트 가능