4주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트3

Node.js 개요 및 설치

Node.js

Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임(프로그래밍 언어가 동작하는 환경)

웹브라우저는 HTML, CSS, JS만 동작을 함 하지만 순수하게 HTML, CSS,JS만 가지고 만들게 되면 완성을 할 수는 있지만 과정이 비효율적. 그래서 컴퓨터에 개발을 도와주는 여러가지 모듈들을 설치해서 도움을 받아가면서 개발을 하는 것 하지만 이러한 모듈들은 실제로 브라우저에서 직접적으로 동작할 수 없기 때문에 대표적으로 Node.js 환경에서 도움을 받은 내용들을 결국에는 HTMl, CSS, JS로 변환을 해야해주어야 함.  컴퓨터에게 변환작업에 대한 명령을 내려줄 수 있어야 하고 그 명령이 돌아가는 환경이 필요 그래서 Node.js 환경에서 JS라는 프로그래밍 언어로 변환을 만들어 주고 변환된 결과 즉

HTML, CSS, JS를 결과로 만들어서 브라우저에서 동작을 시켜줌

 

LTS(Long Term Supported)

장기적으로 안정되고 신뢰도가 높은 지원이 보장되는 버전으로, 유지/보수와 보안(서버 운영 등)에 초점을 맞춰 대부분 사용자에게 추천되는 버전

 

nvm

Node.js 버전을 자유롭게 변경할 수 있음

https://github.com/coreybutler/nvm-windows

GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go.

nvm ls

nvm install 12.14.1

nvm use 12.14.1

nvm unistall 12.14.1

nvm --help

 

NPM(Node Package Manger)

전 세계의 개발자들이 만든 다양한 기능(패키지, 모듈)들을 관리. Node.js를 다운하면 npm도 같이 다운됨

npm init -y

npm install -D parcel-bundler

npm install lodash

npm i

개발용 의존성 패키지는 개발할때만 필요하고 나중에 웹브라우저에서 동작할때는 필요하지 않음

일반 의존성은 실제로 웹브라우저에서 동작할 수 있다는 것을 전제로 함

 

 

실행

//package.json

//"scripts": {
//"dev": "parcel index.html"
//}, 을

"scripts": {
"dev": "parcel index.html"
},
//로 변경

npm run dev

개발용 서버 시작
여기서 dev는 devlop(개발)의 약자

Ctrl+C를 누르면 개발용 서버 종료됨

"dev": "parcel index.html",
//개발자가 개발하는 용도의 결과물 출력
"build": "parcel build index.html"
//실제 사용자들이 보는 용도 결과물 출력

 

실제 사용자들이 보는 용도 결과물을 출력하면 폴더가 만들어지면서 결과물이 생기는데 이때 확인해 보면 압축되어 코드 난독화가 되어있음

코드 난독화는 작성된 코드를 읽기 어렵게 만드는 작업을 말함. 빌드된 결과(제품)는 브라우저에서 해석되는 용도로, 용량을 축소하고 읽기 어렵게 만드는 등의 최적화를 거치는 것이 좋음

 

유의적 버전(Semantic Versioning, SemVer)

어떠한 버전의 의미를 구분하고 해석할 수 있음

Major: 기존 버전과 호환되지 않는 새로운 버전

Minor: 기존 버전과 호환되는 새로운 기능이 추가된 버전

Patch: 기존 버전과 호환되는 버그 및 오타 등이 수정된 버전

^: Major 버전 안에서 가장 최신 버전으로 업데이트 가능

npm install lodash@4.17.20
특정한 버전을 지정해서 다운

npm update lodash
업데이트. package.json에 ^기호를 사용해야함

 

NPM 프로젝트의 버전 관리(.gitignore)

npm i

버전 관리를 하지 않아도 package.json 파일과 package-lock.json을 가지고 있으면 npm i로 동일한 버전에서 프로젝트를 실행할 수 있음

.cache/
dist/
node_modules/

.gitignore 파일을 만들어 git으로 버전관리를 할때 git으로 버전관리가 필요하지 않는 것은 무시하도록 설정함