Node.js

JavaScript의 또다른 런타임환경

원래 JavaScript의 런타임은 브라우저 한개였다.
그래서 각 브라우저들마다 JS해석 엔진이 있었다.. 물론 엔진의 성능이 뛰어날수록 브라우저의 속도도 빨라지겠지..

근데! 구글크롬의 V8 엔진이 너무 뛰어난 나머지 Ryan Dahl형님이 v8엔진만 똑 뗀다음 살을붙혀서 나온게 node.js다!

브라우저에만 종속된 JavaScript가 자유가 된거다!(또다른 런타임 환경)

Package.json

node 프로젝트를 만든다면 필수인 파일. 뭐길래?

해당 프로젝트를 설명하는 설명서 같은느낌
실제 JSON으로 작성되어야함

node프로젝트는 이 package.json만 있으면 시작할수있다.. 얼마나 간편한가!

create

npm init //실행시 가이드대로 파일을 만들면된다

content

https://docs.npmjs.com/cli/v7/configuring-npm/package-json

여러 키워드가 있지만 대표적으로 알아야하는건(물론 이외에도 다 중요하다)
"scripts" / "dependencies" / "devDependencies"

• scripts

  실행하고 싶은 cli명령어를 커스텀으로 제작하는 느낌이다. (npm run keyword)

"scripts":{
"start" : "node index.js"
}
// npm run [scripts] => npm run start = node index.js

• dependencies(의존성)

  해당 프로젝트가 실행되기 위해서 필요한 패키지들이 기술되어있다.
  패키지를 받으면 node_modules에 저장될거고. 그 저장된 패키지역시 package.json이 있을텐데. 그안에도 의존성이 있고 패키지들이 있다.
  npm install만 하면 그모든걸 알아서 npm이 다 설치해준다! 와우!
  => node_modules를 깃에 안올려도 되는이유

• devDependencies(개발자용/의존성)

  위와 비슷하지만 말그대로 개발할때 필요한 패키지들이지 어플리케이션의 동작과는 연관이 없는 패키지들이기 때문에 배포할때 포함되지는 않는다.
  설치 방법은 --save-dev 키워드를 붙이면 된다.
  ex)
  차를 운전하는데 필요한 건 연료 (dependencies)
  운전자가 기분좋게 운전할때 필요한건 음악 (devDependencies)

실수로 --save-dev이용해서 설치 안했다고 걱정하지는 말자.
어차피 패키지들은 전부 node_modules에 저장될거고. package.json은 단지 JSON으로 이루어진 텍스트일뿐이다. dependencies에 잘못 기재된 패키지를 devDependencies로 옮겨적기만하면 된다.

이렇게 패키지를 설치하다 보면 package-lock.json이란게 보이게 될텐데.

Package-lock.json

설치된 패키지들을 안전하게 관리해준다. (버전 등)

npm에 의해서 프로젝트의 node_modules나 package.json이 수정되는 경우 생성되거나 업데이트되며 당시 의존성(dependencies)에 대한 정보를 모두 가지고 있습니다.

git에서 package.json 의존성에 있는 패키지를 npm install로 설치해도,
패키지의 새로운 배포내역이 있다면 업데이트된 버전이 설치가될수도 있다.

그래서 꼬일수있기때문에 꼭 package-lock.json도 같이 커밋해야한다.

Babel

https://babeljs.io/

JavaScript Compiler

매우 심플하다. Node.js는 v8엔진이기때문에 당연히 JavaScript를 해석할수 있지만 최신문법 (ex: ES6 ,7)은 알지 못할수도 있다. 낮은 버전의 JS문법으로 컴파일해주는것.

=> 이렇게되면 Node.js가 최신문법을 써도 Babel이 로우버전으로 알아서 컴파일해주니 알아먹을수 있다.

• Install

  https://babeljs.io/setup#installation

npm install --save-dev @babel/core

Babel 공식 사이트를 가보자. 이만큼 자세하게 나올수가 없다.
원하는 환경에서의 세팅도 다~~ 나와있다.
하지만 설치를 해도 실질적으로 바로 동작하는건 아니고 (+preset 설치도해줘야함) package.json이 프로젝트를 기술하듯이 babel.config.json을 만들어서 babel의 동작을 기술해줘야한다.

• preset(사전설정)

npm install @babel/preset-env --save-dev

babel을 위한 거대한 플러그인 세트같은 느낌이다. 말그대로 사전설정이다.
여러종류가 있는데 그중 가장유명한건 @babel/preset-env 이고. 공식문서 설명을 참조하면

우리가 세세하게 관리할필요 없이 최신의 js문법을 Smart하게 컴파일해준다.

• babel.config.json

  preset을 사용하기위해 babel.config.json안에 정의해줘야한다

{
	"presets":["@babel/preset-env"]
}

막 @babel~~ 이런걸 설치한다고해서 이상한걸 설치한다고 오해하지말자. 결국 다 패키지다

• example

//before babel

const express = require('express')

//after babel

import express from 'express';
//babel덕분에 es6 모듈기능인 import를 쓸수있다.

/*
node_modules에 있으니 node_modules/express 아니야? 할수도 있겠지만. npm이 너무 똑똑해서 알아서 node_modules에서 찾아준다 그래서 안써도 된다.
*/

const app = express();

nodemon

https://www.npmjs.com/package/nodemon

파일의 변화를 감지해서 자동으로 node응용프로그램을 재시작해준다.

코드의 변경이있으면 그때마다 node index.js (예를들면) 을 해줘서 결과를 봐야할텐데. 그럴필요없이 자동으로 재시작해준다는거.

• @babel/node

  cli인데 node.js cli와 동일하게 작동한다. 실행전에 babel preset(사전설정) 및 플러그인으로 컴파일하는 이점이 있다.

뜬금없이 babel이 왜나오지? 하겠지만 공식문서에는 Nodemon을 이용한 babel의 설치+세팅방법도 나와있다.

nodemon키워드를 이용해서 npm-scripts도우미를 써서 실행하니까 babel사용시 이점이 있으라고 node 대신 babel-node를 이용해서 호출하는거 아닐까 싶다..(밑에 //부분에 대한 이해)

• package.json -> script

"scripts":{
	"dev" : "nodemon --exec babel-node index.js"
   		//node index.js 가아니라 babel-node index.js인 모오습
    }

scripts는 cli명령어를 커스텀으로 제작하는 느낌이라했고 npm run keyword
=> npm run dev = "nodemon --exec babel-node index.js"

• --exec
  노드가 아닌 스크립트를 모니터링하기위해 붙이는 키워드같다.
  현재 nodemon 을 이용해 babel-node index.js라는 스크립트를 실행하려하니까 --exec를 붙인느낌

기본적으로 (.js .mjs .coffee .litcoffee .json)를 확장자로 가진 파일을 서치하고 --exec를 붙인 다음녀석(여기서는 스크립트가 되겠지?)들을 모니터링 한다고 한다.