[Node.js 이론]Node.js Module install by npm (3) babel

 

• Link [ [Node.js 이론] Node.js 란 무엇일까? :: Unchaptered의 초보코딩 (tistory.com) ]
• Link [ [npm 이론] npm 이란? :: Unchaptered의 초보코딩 (tistory.com) ]
• Link [ [Git 이론] 새 Git Repository 생성 :: Unchaptered의 초보코딩 (tistory.com) ]
• Link [ [Node.js 이론] Node.js Module install by npm :: Unchaptered의 초보코딩 (tistory.com) ]
• Link [ [Node.js 이론]Node.js Module install by npm (2) Express :: Unchaptered의 초보코딩 (tistory.com) ]

Express 는 만들어진지 시간이 지났고 현재 바닐라 JS는 항상 최신 상태로 업데이트 되어 왔습니다.

그렇다고해서 우리가 Express 를 위해서 오래된 코드를 작성하는 것은 비효율적이기 그지 없습니다.

그래서 우리는 Modern JS 를 Old JS 로 일종의 Trnaslate 해줄 module 이 필요합니다.

 

SCSS 를 CSS 로 바꾸는 것과 같은 그런 module 말입니다.

그렇듯, Modern JS 를 Old JS 로 바꿔주는 module 이 바로 babel 입니다.

Babel [ https://babeljs.io/ ]

babel 설치 메세지는 아래와 같습니다.

npm i --save-dev @babel/core

i 대신 install을 써도 무방합니다.

--save-dev 는 개발자를 위한 dependencies 라는 의미만을 담고 있을 뿐, 실제 기능 구현에는 아무런 영향을 주지 않습니다. 그저 package.json 에서 포함되는 위치가 달라질 뿐입니다. 그렇기에 Install 이후 package.json 에서 해당 요소를 평범한 dependencies 로 옮겨도 아무런 에러가 발생하지 않습니다.

그리고 아래 이름을 가진 파일을 repository 에 생성해줍니다.

수동으로 생성해도되고 sheell 을 이용해도 됩니다.

babel.config.json

touch babel.config.json

그리고 해당 json 파일 안에 이 내용을 복사해 넣어주세요.

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

그리고 sheell 에 다시 아래 메세지를 입력해주세요.

npm i @babel/preset-env --save-dev
npm i @babel/core @babel/node --save-dev

이제 설정이 종료되었습니다.