NodeJS
Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 Javascript *런타임이다.
- 런타임 : 프로그래밍 언어가 동작하는 환경
왜 필요한가?
- 웹브라우저에서는 HTML, CSS, JS만 동작한다.
저걸로만 개발해서 완성할 수 있는데 조금 비효율적이기 때문에 개발을 도와주는 여러 모듈을 설치해서 개발하기 때문에 필요하다! - 모듈은 실제 브라우저에서 직접적으로 동작할수가 없어 Node.js 환경에서 변환해서 사용하기 때문에 필요하다!
설치하기
Node.js 홈페이지에서 설치
👉 node --version(--v)
: 설치된 버전을 알 수 있음
NPM
NPM(Node Package Manager)는 전 세계의 개발자들이 만든 다양한 기능(패키지, 모듈)들을 관리하는 도구이다.
이 도구를 이용해 필요한 패키지를 설치한다.
프로젝트 만들기
npm init / npm init -y
-y를 붙이면 기본 질문을 생략하고 만들 수 있다!
프로젝트에 패키지 설치하기
npm install 패키지명
🤫설치하면 여러가지 폴더와 파일이 생기는데??
✔️ 패키지에 대한 폴더가 생기는것
- node-modules : 설치한 패키지(그 패키지가 의존하는 패키지들)가 들어간다.
- package-lock.json : 패키지들의 관계를 명시해 놓은 파일
설치한 패키지 불러오기
설치하면 cdn 방식이 아닌 import 방식으로 불러와서 사용할 수 있다!
만약 lodash를 설치했다고 하면...
<script type="module" src="./main.js" ></script>import _ from "lodash";🤫js 파일에서 오류가 떠요 그리고 html type는 뭔가요?
✔️ import 키워드를 javascript 에서 사용하면 그 파일은 module이라는 개념으로 불리게 된다.
module 파일은 html에서 연결할때 'type=module' 이라는 속성이 필요하다!
bundler(번들러)
설치한 여러 패키지들을 실제 뤱사이트에 올라갈 수 있는 하나의 구조로 묶어주는 역활을 한다.
parcel 등 여러가지가 있다!
✔️묶어주는 역활만 하지 웹페이지에서 실제 동작하는것이 아니기 때문에...
--save-dev(-D) 를 붙여 설치
예시) npm install parcel -D
🤫 -D를 붙이면 어떤 일이 일어나는데...?
✔️ devDependencies에 설치된다.
- dependencies(일반 의존성): 브라우저에서 직접적으로 동작할 패키지들이 들어감
- devDependencies(개발용 의존성): 개발할때만 사용하는 패키지
<- -D를 붙이면 여기로 들어간다.
번들러 parcel로 개발서버 오픈하기
✨Live server는 고도화된 개발을 할 때는 쓰기 조금 어렵기 때문
명령어와 링크연결하면 개발사버를 열 수 있다.
1. package.json 파일에 [디버그]-["scripts"]-["test"] 가 있는데 "test"를 dev라는 이름으로 바꾸기(안바꿔도, 다른 이름으로 해도 괜찮음)
2. 값은 "parcel 열어야 할 파일 링크" 적기
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
// -> 아래처럼 바꿔준다!
"scripts": {
"dev": "parcel ./index.html"
},npm run 명령어 : 서버 오픈 명령
예시) npm run dev
🤫dist 파일이 생겼다
✔️번들러를 이용해서 JavaScript 파일로 변환한 내용이 저장된다.
배포 파일로 변환하기
- [디버그]-["scripts"] 아래에 명령어 추가
"scripts": {
"dev": "parcel ./index.html",
// 명령어 추가
"build": "parcel build ./index.html"
},npm run build : 배포 파일 만들기 명령
NVM(Node Version Manager)
설치하기
MAC OS
- 설치 스크립트 둘 중 하나를 터미널에 붙여넣기
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash1-1. macOS 10.15부터 설치 스크립트 오류가 발생할 수 있는데 nvm: command not found이면 zshrc 파일을 직접 생성 후 다시 설치 스크립트로 재설치
touch ~/.zshrcwindow OS
- Overview > Download Now!를 클릭해 이동한다.
- 이동한 페이지에서
nvm-setup.exe를 실행
NVM 명령어
nvm --version // 버전을 알 수 있음
nvm --help // 명령어들을 보여줌
nvm ls-remote // 설치 가능한 node.js 버전을 보여줌
nvm ls-remote --lts // lts으로 설치 가능한 node.js 버전을 보여줌
nvm install node // node.js 최신버전으로 설치
nvm install *.*.* // *에 버전 입력하면 특정 버전 설치 ex)nvm install 20.10.0
// 만약 Major만 입력하면 그 버전에서 마지막 버전으로 업데이트됨
// node.js가 20.11.0이 제일 최신이라면 nvm install 20 -> 20.11.0으로 설치된다.
nvm ls // 설치된 node 모든 버전 확인
nvm current // 현재 사용중인 node.js 확인
nvm uninstall *.*.* // *에 버전 입력하면 특정 버전 삭제
//(현재 사용중인 버전은 삭제할 수 없음-> 현재 사용중인 버전을 바꾸고 삭제하자)
nvm use *.*.* // *에 버전 입력하면 특정 node.js 버전 사용
// nvm use 를 사용해 버전을 바꾸고 터미널을 껐다 키면 다시 최신으로 node.js가 사용중인걸 알 수 있다
// 이때는 버전을 유지하고 싶으면 default값을 설정해야한다
nvm alias dsfault *.*.*
알아두면 도움되는 유의적 버전(Semantic Versioning, SemVer)
🤫 package.json을 보면 버전 뒤에 막 ^"숫자.숫자.숫자" 있는데?
✔️ 패키지 등을 설치할때 해당 패키지가 설치되고 마침표(.)로 구분된 3가지 숫자로 버전이 명시된다.
ex) node : v18.17.1 <- 의미는 Major.Minor.Patch(메이저.마이너.패치)
Major.Minor.Patch 란
- Major : 기존 버전과 호환되지 않는 새로운 버전
- Minor : 기존 버전과 호환되는 기능이 추가된 버전
- Patch : 기존 버전과 호환되는 버그 및 오타 등이 수정된 버전
명령어
-
최신버전 확인하기
npm info 패키지명 -> latest에서 확인 -
다른 버전으로 설치
npm install 패키지명@버전
예시) npm install lodash@4.17.20
^(캐럿)과 ~(틸드)
^
Major 버전 안에서 가장 최신 버전으로 업데이트가 가능한 경우(Minor, Patch 업데이트 가능)
npm update 패키지명
: 업데이트 하기
~
Minor 버전 안에서 가장 최신 버전으로 업데이트 가능한 경우(Patch 업데이트 가능)
