Inroduce

본 문서는 2022년 1월 20일 에 재작성되었습니다.

Node 의 등장, Modern JavaScript 의 개발 등으로 JavaScript 는 큰 변화를 맞이 하였습니다.
그리고 그 변화의 초창기, 대부분의 브라우저 및 프레임 워크는 이를 수용할 수 없었습니다.

그렇기 떄문에,
ES6 등의 Modern JavaScript 를 Old JavaScript 로 바꿔주는 모듈이 필요했습니다.

이러한 기능을 제공하는 모듈 중에서 Babel 을 사용해보았었습니다.

유투브 클론코딩 웹 서비스, Wetube (Git)
내 손안의 작은 명함, LifeFolio (Git)

정확한 내용은 1차 문서인 Babel 공식문서 를 참고해주시길 바랍니다.

대안

Babel 을 사용한 두 프로젝트의 경험은 재밌었습니다.
하지만, 모든 Modren JavaScript 에서 webpack.config.js 및 babel 셋팅은 너무나 소모적이었습니다.
또한, Chrom 60 버전 이후 Modern JavaScript 를 지원해주고 있고 앞으로도 계속 지원하는 브라우저는 늘어날 것임은 분명했습니다.

따라서, 다음의 대안을 제시하고 Babel 의 사용을 중단하기로 결정하였습니다.

🧡 JSON 에 추가해주세요.

사실 이 구문은 Node 에서 import 와 같은 ES6 를 사용하기 위한 것입니다.

"type":"module"

How to Use?

✅ NPM

npm install --save-dev @babel/cli
npm install --save-dev @babel/core
npm install --save-dev @babel/node
npm install --save-dev @babel/preset-env

✅ PACKAGE

아래를 수정
"start": "nodemon --exec babel-node"

{
  "name": "name",
  "version": "1.0.0",
  "description": "description",
  "main": "index.js",
  "scripts": {
    "start": "nodemon --exec babel-node",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/unchaptered/21-11-theory-grapql-backend.git"
  },
  "author": "Unchaptered",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/unchaptered/21-11-theory-grapql-backend/issues"
  },
  "homepage": "https://github.com/unchaptered/21-11-theory-grapql-backend#readme",
  "dependencies": {
    "graphql-yoga": "^1.18.3"
  },
  "devDependencies": {
    "@babel/cli": "^7.16.0",
    "@babel/node": "^7.16.0"
  }
}