FASTCAMPUS ST-TE 3기
PART3. JavaScript Essentials - Ch1.Node.js

Node.js

chrome V8 Javascript 엔진으로 빌드된 javascript 런타임.
한마디로, 자바스크립트가 브라우저 외의 환경에서도
동작할 수 있게 만들어주는 환경을 의미한다.
Node.js로 인해 자바스크립트는 브라우저에서도, 컴퓨터환경에서도
프로그래밍 언어로서 제어가 가능하다.

💡 하지만 난 프론트앤드 개발자인데..?
브라우저에서 웹앱을 개발한다고해도, 결국 컴퓨터 안에서 사용되기에
다양한 역할들을 수행하기 위해선 어느정도 컴퓨터 제어 방식을 알아두면 도움이 된다.
결국 브라우저 창에서 출력하는데 쓰이는 언어는 html,css,js이지만
scss, node.js, less, babel, ejs, stylus 등등의 모듈등의 도움을 받아
프론트앤드 개발에 부스터를 다는 것이다.

01. Node.js 설치

https://nodejs.org/ko/

• LTS(Long Term Supported)
  짝수버전. 최신버전은 아니지만, 안정성이 보장되는 버전.
  유지보수와 보안등에 초점을 맞춰 서비스된다.

• 현재버전
  홀수버전. 최신버전. 가장 최신의 문법이나, 안정성은 덜하다.

---

02. NVM (Node Verstion Manager)

NVM은 또 뭔가 싶겠지만 단순하다. node.js 버전을 넘나들 수 있는 매니저 역할을 해주는 시스템이다. node.js 공식 사이트에서 하나의 버전을 다운 받을 수도 있지만, 여러 프로젝트 개발시 각 프로젝트 당 필요한 nvm의 버전이 다를 수 있다.
그 때 마다 새로 버전을 다운 받아야할까?
이 때 필요한 것이 바로 매니저, nvm이다. 명령어로 버전을 install하고 use할 버전을 선택해서 사용하자.

2.1 NVM 설치

• 1. git주소에서 setup 파일 다운받아 설치
  https://github.com/coreybutler/nvm-windows
  

• 2. vscode terminal에서 버전 정보확인

nvm --version

2.2 NVM으로 버전설치, 선택하기

//버전설치
nvm install [node.js 버전]
>
//설치버전 확인
nvm ls
>
//사용할 버전 선택
nvm use [node.js 버전]
>
//버전삭제
nvm uninstall [node.js 버전]

//nvm에서 사용할 수 있는 다양한 명령어들 출력
nvm --help

일반적으로는 주로 12v을 사용하나,
필요에 따라 버전을 선정하고
node.js 공식사이트에서 현재 배포되는 버전을 확인하고 사용한다.

---

03. NPM (Node Package Manager)

전세계 개발자들이 만든 다양한 기능(패키지, 모듈)들을 관리해주는 manager.

다양한 기능들을 모듈화 해 모아둔 생태계안에서
npm을 통해 필요한 모듈을 참조할 수 있다.

학습난도나 구성이 복잡할 순 있으나
효율적 관리, 기능의 고도화를 가능케 하기에 규모있는 프로젝트에서 사용된다.
html 구조에서 link, script 태그로 불러와 사용하기도했으나
최신의 웹개발 흐름에서는 필요한 모듈을 설치하고 가공하는 식으로 모듈을 참조한다.

3.1 npm에서 필요한 모듈 설치하기

• 1. npm시작

  프로젝트 구조안에 package.json파일이 생성되며 모듈 관리를 시작할 수 있다.

npm init -y

• 2. npm 모듈 설치

npm install [필요한 모듈] -D   //package.json - devDependencies. 개발의존성 패키지
npm install [필요한 모듈]      //package.json - dependencies. 일반 의존성 패키지

설치를 하고나면

1. package.json 파일이 생성되며,
파일 속 'devDependencies','dependencies' 둘 중 하나의
key값에 설치한 모듈이 value값으로 추가된다.
이 파일에서 우리가 설치한 모듈을 직접적으로 제어할 수 있다.

devDependencies
개발의존성 패키지.
-D를 붙여 install한 경우
웹에서 구동되지않고 개발시에만 사용되는 모듈을 설치할 때 명령.

dependencies
그냥 install한 경우
실제로 웹에서 구동이 되는 모듈을 설치할 때 명령.

2. package-lock.json 파일 또한 생성되는데,
이는 우리가 직접 받은 모듈또한 개발시 다른 모듈을 참조해 사용했을 수 있고
그러한 내부 패키지까지 모두 직접 관리할 수 없기에 자동으로 관리해주는 파일이다.
이 파일안에서 우리가 설치하는 모듈 내부의 패키지들까지 자동으로 관리된다.

3.2 터미널에서 개발 서버로 열기

package.json 파일의 scripts안에 따로 이름을 명시해 일종의 key-vlaue로 실행시킬 모듈, 파일을 명시해준다.
위는 parcel이라는 모듈로 index.html을 열겠다는 뜻.
아래 터미널에서 npm run [명시한 이름] npm으로 [명시한 이름]의 키 값을 실행시킨다.

3.3 모듈(lodash)사용해보기

import _ from "lodash";

js파일 상단에 사용하려는 모듈(지금예시는 lodash)를 import한다.
_안에 lodash에서 가져온 여러 메서드를 변수로 받아 사용하겠다는 의미이다.

import _ from "lodash";
console.log('hello javascript');
console.log(_.camelcase('hello javascript'));  //helloJavascript

lodash 메서드 중 camelcase로 바꿔주는 메서드를 전달받아 사용했다.

3.3 build, 난독화

scripts에서 "dev" : "parcel index.html"로 서버를 연건 우리가 개발시 사용하는 개념으로 확인하는 코드이고, "build":"parcel build index.html"은 실제로 사용자에게 배포되는 서버 화면이다. 터미널에서 build로 run 시키면 dist라는 파일 목록들이 생성된다. 이를 열어보면, index.html의 내용이 모두 붙어 한줄처리 되어있다. 이는 브라우저가 읽기 쉽고 경량화를 시키기 위해 일종의 압축 최적화 활동을 진행하는 것이다.

---

04. 유의적 버전 (SemVer)

Semantic Versioning, SemVer

Major.Minor.Patch
Major 기존 버전과 호환되지않는 새로운 버전.
Minor 기존 버전과 호환되는 새로운 기능이 추가된 버전.
Patch 기존 버전과 호환되는 버그 및 오타 등이 수정된 버전.

^Major.Minor.Patch
Major 버전안에서 가장 최신 버전으로 업데이트 가능.
버전에 ^를 붙여둔 모듈은 터미널에서 명령어로 업데이트시킬 수 있다.

npm update [업데이트하려는 모듈]

05. npm의 버전관리 (.gitignore)

npm을 사용할 때 .cash / dist / node_modules의 파일은 따로 버전관리를 할 필요가 없다. package.json에 이미 scripts로 dev 던 build던 이미 우리가 사용할 내용을 지정해두었고 이를 다시 npm i만 명령해줘도 그대로 npm을 install해주면서 해당 폴더들이 자동 생성되기 때문!

따라서 npm을 사용해 만든 파일을 버전관리할 때 우리는 .cash / dist / node_modules와 같은 폴더, 파일을 버전관리에서 무시시킨다.

우선 git에 파일을 올리기 전 .gitignore파일을 생성하고

//.gitignore 파일

.cash/
dist/
node_modules

라고 무시할 폴더, 파일을 지정해준다.

무시하라고 지정한 파일들만 회색처리 , u라는 키워드가 없는 모습