Babel and nodemon

이번엔 최신의 자바스크립트 코드를 노멀한 자바스크립트로 변환 시켜줄 Babel을 설치해보자

Babel이란 무엇인가

공식 사이트 소개에는 babel is a javascript compiler

자바스크립트 컴파일러란다. 인터프리터 언어인 자바스크립트로 babel은 결과물을 만들어주는 컴파일러이다

입력은 자바스크립트 코드이고 출력도 자바스크립트 코드이다.

최신 버전의 자바스크립트 코드는 브라우저가 잘 이해하지 못하는 경우가 있기에

babel은 브라우저가 이해할 수 있도록 문법을 변환 해준다.

es6, es7등등 최신 문법을 사용 가능하도록 해주는 컴파일러다.

-----------------------------------------------------------

es6에는 새로운 문법이 많다.

arrow function

classes(생성자, 상속)

enhanced object literals (object생성이 편리해짐)

template strings

    (여려개의 문자열을  +로 붙이지 않고 const msg = `Hello ${name}, current time is ${time}` 처럼 자연스럽게 표현이 가능해졌다. 

      파이썬의 f-string같은건가?)

destructuring - object에서 필요한 부분만 뽑아 낼때 편리한 기능(매개변수의 일부만 입력으로 받고 싶을 때)

    const {foo} = obj;

   function savePerson({name,age,onSuccess,onFail}) {...}

   savePerson({name: "berry", onSuccess: () => alert("person saved")})

let, const - 수정가능과 불가능한 변수 식별자 block-scope

------------------------------------------------------------

babel은 세단계로 빌드를 진행한다

1. parsing: read a code and transfer to AST

2. transforming: 추상 구문트리를 ㅡ변경

3. printing : 변경된 결과물을 출력

어렵다... 이건 차차 알아보자

이제 바벨을 설치하자. 바벨은 여러방법으로 사용이 가능한데

많은 loader가 있다. 필자는 babel node를 쓰기로 한다.(유튭 클론코딩 강의에서 이걸 쓴다ㅋㅋ node.js환경에서 쓰니까~)

babel node를 쓴다.

이제 vsocode 콘솔창에서  npm install @babel/node 로 설치해주자. 이것도 역시 프로젝트할 root에 설치 해야한다

 

babel 은 여러 스테이지가 있는데 필자는 -env를 사용한다.

다시 콘솔창에서 npm install @babel/preset-env 으로 설치해주자.

 

이제 .babelrc파일을 생성해준다. 이 파일에는 우리에게 필요한 모든 설정을 집어 넣어준다

babel을 설정해주는 곳인 것이다.

파일이 생성 되었으면 파일에 작성해주자

이제 설정이 되었고 최신 자바스크립트 코드를 쓸 수 있다.

먼저 require부분을 손보자

const express =  require("express"); 를 import express from "express";로 최신 javascript형태로 써줬다

좋다.. 파이썬에서 많이 보던 모듈 임포트 방식이다 맘이 편해진다.....

이제 babel이 서버에서도 작동하도록 

package.json에 가서 script start부분을 babel-node index.js로 바꿔준다.

 

이제 es6의 arrow function을 쓸 수 있다 기존 썼던걸 바꿔주자~~

 

이제 nodemon을 설치하자.

코드가 수정될 때 마다 서버를 껐다 키는 번거로움을 없애주자~~~

nodemon은 node monitor의 약자로, 노드가 실행하는 파일이 속한 디렉터리를 감시하고 았다가 파일이 수정되면

자동으로 노드 애플리케이션을 재시작하는 확장 모듈이다.

nodemon은 dependency와 관련 없이 설치하도록 한다. 프로젝트를 진행함에 있어 필수는 아니지만 

개발자에게 편함을 제공하는 패키지를 설치하는 방법이다.

프로젝트를 실행함에 꼭 있어야 되는게 아니기 때문에~~

 

npm install nodemon -D로 의존성읠 제외하고 설치 한다.

설치후 package.json에 가보면 devdependencies가 설정되어 있는 것을 확인 할 수 있다.

그리고 script strat부분에 nodemon --exec를 추가 해주자

이제 index.js로 돌아가 저장을 하게 되면 자동으로 서버가 재시작 된다.

아주 편리해졌다