현재 내 프로젝트의 node의 버전이 16.x 이하일때
ES6 이상의 버전에서 사용되어야하는 문법들이 사용되어야 하는 때가 있다.
나로 예를 들면 프론트 보내는 리스폰스값을 필터링하는 과정에서 사용된 문법이 현재의 내 노드 버전인
16.x 에서는 잘 돌아가지만,
배포를 시작하고 난 후 사용하는 pm2 는 14.x 버전에서만 가능하기 때문에 아이러니한 상황이 되었다.
-
노드버전을 높여서 (현상태 유지) 데이터를 지금의 방식으로 주면됨
-> pm2 못씀 -
노드버전 유지하면 pm2 사용가능
-> 데이터를 못줌
그래서 찾아본게 바벨이다.
출처: https://codiving.kr/39 [코드에 빠지다:티스토리]
바벨은 자바스크립트의 ES6 이상에서 사용되어야 하는 문법들이 있는데
현재 내 버전은 ES6 이하 버전에서 사용중일때 알아서 트랜스파일러 해주는 기능이 있는 모듈이다.
Babel, 바벨
- Babel이 무엇일까? Babel은 JavaScript compiler이다. 그럼 Babel을 왜 사용하는 것일까? 우리는 node에서 Javascript를 작성하여 동작을 시킬 것이다. 그러나 node가 Javascript의 모든 최신 문법을 이해하는 것은 아니다. 이때 우리가 작성하는 최신 문법은 구 문법으로 변경하여 node가 이해할 수 있도록 도와주는 것이다. 즉, 우리가 작성한 최신 문법을 이전 문법으로 변경해준다고 생각하면 된다.
Babel 설치 및 설정하기
- babel을 설치하고 설정하는 방법은 매우 간단하다. 아래 명령어를 입력해주자.
명령어 : npm install --save-dev @babel/core @babel/node @babel/preset-env
위 명령어를 실행하면 모든 설치가 완료된다. 그 다음 작성해 주어야 파일이 있다. babel.config.json 파일을 package.json과 동일 선상 위치에 생성한 뒤 아래 코드를 작성해주자.
{
"presets": ["@babel/preset-env"]
}
출처: https://codiving.kr/39 [코드에 빠지다:티스토리]그리고 마지막으로 package.json의 script 부분을 변경해주어야 한다. 필자의 경우 비교를 하기 위해, babel-node를 사용하여 실행한 것과 그냥 node를 실행한 것 2개를 생성해주었다. package.json에 아래 코드를 추가해주자. 이해를 돕기 위해 전체 이미지도 첨부한다.
"scripts": {
"start": "node index.js",
"start:dev": "babel-node index.js"
}
위 script 코드를 간단하게 설명하자면, npm run start를 하게 되면 node로 index.js 파일을 실행시키는 것이고, npm run start:dev를 하게 되면 babel-node로 index.js 파일을 실행시키는 것이다. 이제 babel을 사용하면 어떤 일이 일어나는 지 확인해보기 위해 node에서는 이해하지 못 하는 최신 문법 import를 사용하여 node와 babel-node로 실행을 해보자.
-
npm run start
에러 발생, 즉 import라는 문법을 이해하지 못 해 실행이 되지 않는다. 그럼 babel-node를 사용하면 어떻게 될까?
-
npm run start:dev
에러가 발생하지 않고 정상적으로 실행이 된다. 즉 babel이 import 구문을 require로 변경해주었기 때문이다.
정리하자면 babel을 사용하는 이유는 최신 문법을 node가 이해할 수 있는 이전(옛날) 문법으로 변경해주기 때문이다.
출처: https://codiving.kr/39 [코드에 빠지다:티스토리]
