[Node] node 실행시 import 문 에러 해결하기 (babel)

⛔️ 백엔드 부분 코드를 작성하려고 보니 import문, process.env 문 등 esm 문법을 사용할 수 없다는 에러가 계속 발생
찾아보니 바벨설정을 해줘야한다고한다.

# 에러메세지
Uncaught : Error : require() of ES Module
# 혹은
SyntaxError: Cannot use import statement outside a module

1. bable 이란?

• 우선 babel 이 무엇인지 이 설정을 왜 해줘야하는지 의문이 생김

  아주 간단하게 Bablel 은 JSX 코드를 브라우저가 알아보도록 변환시켜 주는 역할을 한다!
  

  • 위의 JSX 코드를 아래의 코드로 변환해주기 위해 Babel을 사용한다!
    • Babel 은 JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔준다.
    • 브라우저는 JSX를 모르기때문에 invalid 하다고 생각한다.

• 바벨 설정을 통해 코드를 common JS로 변환해주고 확장자(.js, .ts, ... )를 작성해주지 않아도 된다. 하지만 생긴것만 import, export 문이지 사실은 common JS를 사용하고 있는셈

2. 바벨 설정해주기

• 아래의 패키지들을 설치해준다.

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime    #종속X
npm install --save-dev babel-plugin-transform-remove-console # build 할 때 console.log 제거

• babel.config.json 파일 생성하기

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ],
  "plugins": ["@babel/plugin-transform-runtime"]
}

• 에러없이 잘 작동하는 것을 확인!

🏁 결론

바벨 설정을 해줘야 import 문 같은 ESM 문법을 사용할 수 있다.
CommonJS 의 문제점이 무엇인지 왜 ESM 모듈 시스템을 써야하는지 아래 동영상에서 자세히 설명해준다!
🚀 근본적인 이야기 : https://www.youtube.com/watch?v=mee1QbvaO10

CRA 로 프론트단 react 프로젝트를 했을때는 CRA가 알아서 바벨설정을 해주기때문에 마주치지 못했던 에러였지만 이 기회에 바벨이 무엇인지 이러한 설정이 왜 필요한지 공부하는 계기가 되었음!