#TIL_CommonJS문법과 ES6문법을 이어주는 마법 도구가 있다??? Babel에 대해 알아보자!.!(핵심 마지막 Node.js 서버 실행 부분)

 

# Babel이란? 

 

Babel은 ECMAScript 2015+ (ES6+) 코드를 이전 버전의 JavaScript로 변환해주는 도구입니다. ECMAScript 2015 이후에는 새로운 JavaScript 기능과 구문이 계속 추가되고 있지만, 모든 브라우저와 환경에 이러한 새로운 기능을 지원하지 않을 수 있습니다. Babel은 이러한 새로운 기능을 사용하여 작성된 코드를 이전 버전의 JavaScript로 변환하여 다양한 환경에서 실행할 수 있도록 도와줍니다. 

 

---

# Babel의 필요성 

 Node.js에서 Babel은 최신 JavaScript 기능을 사용하여 코드를 작성할 수 있게 해주고, 이를 이전 버전으로 변환하여 다양한 환경에서 실행할 수 있도록 도와주는 도구입니다. 프론트엔드 및 백앤드 개발에서 널리 사용되며, 특히 크로스 브라우징 및 환경 호환성에 대한 요구사항을 충족시키는데 크게 기여하고 있습니다. 

---

# Babel의 작동방식

Babel은 크게 두 단계로 나누어서 작동합니다.  파싱(Paesing)및 변환(Transformation)

 

1. 파싱(Parsing)

Babel은 먼저 소스 코드를 읽고 이를 추상 구문 트리(Abstract Syntax Tree, ATS)로 파싱합니다. AST는 코드의 구조를 나타내는 트리 형태의 자료구조입니다. 코드를 AST로 변환하면 Babel은 이를 쉽게 조작하고 이해할 수 있습니다. 

2. 변환(Transformation)

AST가 생성되면, Babel은 플러그인(plugins)을 사용하여 AST를 변환합니다. 각 플러그인은 특정한 종류의 변환을 수행하며, 예를 들어 새로운 JavaScript 문법을 이전 버전으로 변환하거나, 실험적인 기능을 안정화된 기능으로 변환하는 등의 작업을 수행할 수 있습니다. 변환된 AST는 다시 소스 코드로 변환합니다. 

 

여러 플러그인을 조합하여 Babel을 구성할 수 있습니다. 사용자는 자신의 프로젝트에 필요한 플러드인을 선택하거나, 프리셋(preset)이라 불리는 미리 구성된 플러그인 그룹을 사용하여 설정할 수 있습니다. 

 

Babel은 다음과 같은 주요 단계를 거쳐 작동합니다. 

 

1. 소스 코드 입력: Babel은 변환해야 할 소스 코드를 입력으로 받습니다. 

2. 파싱(Parsing) 입력된 코드를 AST로 파싱합니다. 

3. 변환(Transformation) AST를 변환하여 원하는 기능 또는 구문을 적용합니다. 

4. 생성된 코드 출력: 변환된 AST를 다시 소스 코드로 출력합니다. 

 

이렇게 Babel은 소스 코드를 AST로 변환하고, 플러그인을 사용하여 AST를 조작하여 원하는 변환을 수행한 후, 다시 소스 코드로 변환하여 사용자가 지정한 환경에서 실행 가능한 코드를 생성합니다. 이러한 기능을 통해 Babel은 최신 JavaScript 기능을 사용하고, 여러 브라우저 및 환경에서 호환성을 유지하면서 코드를 작성할 수 있게 도와줍니다. 

---

# Babel 설치 방법 

Babel은 일반적으로 프로젝트의 개발 의존성으로 설치하는 것이 좋습니다. Node.js와 npm이 이미 설치되어 있다고 가정한 설치 방법입니다. 

 

1. 프로젝트 초기화 및 패키지 생성

프로젝트 폴더에서 터미널 또는 명령 프롬프트를 열어 다음 명령을 통해 `package.json` 파일을 생성합니다. 

npm init -y

 

2. Babel 패키지 설치 

Babel은 여러 모듈로 구성되어 있습니다. 기본적으로는 `@babel/core` 패키지가 필요하며, 필요한 기능에 따라 다른 패키지도 추가로 설치해야합니다. 

npm install --save-dev @babel/core

 

3. Babel 프리셋 설치 

Babel은 프리셋(preset)이라는 미리 구성된 플러그인 그룹을 제공합니다. 시용하려는 ECMAScript 버전에 따라 적절한 프리셋을 설치해야 합니다. 예를 들어, ES2015(ES6)를 사용하려면 `@babel/preset-env`를 설치합니다. 

npm install --save-dev @babel/preset-env

 

4. Babel 구성 파일 생성

Babel의 동작을 구성하려면 프로젝트 루트에 `.babelrc`파일을 생성하고 사용할 프리셋을 설정합니다. 기본 설정 파일을 다음과 같습니다. 

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

 

위 설정에서 `@babel/preset-env`은 자동으로 사용 중인 환경에 필요한 Babel 플러그인을 결정합니다. 

 

5. 코드 변환 테스트 

Babel이 올바르게 설치되었는지 확인하기 위해 변환 테스트를 수행합니다. 예를 들어, `src` 폴더에 `index.js` 파일을 만들고 다음과 같이 코드를 작성합니다. 

const message = () => console.log("Hello, Babel!");

message();

 

그런 다음 터미널에서 다음 명령을 실행하여 코드를 변환합니다. 

npx babel src --out-dir dist

 

위 명령은 `src` 폴더의 코드를 `dist` 폴더에 변환된 코드를 생성합니다. 

 

Babel을 통해 코드를 변환하고 나면 `dist` 폴더에 변환된 코드가 생성되어있고, 이 코드를 통해 프로젝트를 빌드하거나 실행할 수 있습니다. 

---

# Babel 설정 파일 만들기 

Babel 설정 파일을 만들려면 프로젝트 루트 디렉토리에 `.babelrc`파일을 생성합니다. 이 파일은 Babel이 코드를 변환할 때 적용할 설정을 지정합니다. 

 

1.  `.babelrc`파일 생성

프로젝트 루트 디렉토리에  `.babelrc`파일을 만들고 다음과 같이 설정합니다. 

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

 

이 예제에서는 `@babel/preset-env` 프리셋을 사용하고, 추가적인 플러그인을 사용하지 않았습니다. `presets` 배열에는 사용할 프리셋을 설정하고, `plugins` 배열에는 필요한 플러그인을 추가할 수 있습니다. 

 

2. `@babel/preset-env` 프리셋 옵션 설정

`@babel/preset-env`를 사용하는 경우에는 몇 가지 옵셥을 추가하여 브라우저나 Node.js 버전에 맞게 설정할 수 있습니다. 

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["last 2 versions", "ie >= 11"]
        }
      }
    ]
  ],
  "plugins": []
}

 

위 설정은 마지막 두 버전의 브라우저와 Internnet Explorer 11을 지원합니다. 

 

3. 기타 설정 

필요에 따라 다양한 Babel 플러그인을 사용하거나 설정할 수 있습니다. 이는 프로젝트의 요구사항에 따라 다를 수 있습니다. 예를 들면, 클래스 프로퍼티(Class Properties) 문법을 사용하려면 ` @babel/plugin-proposal-class-properties` 플러드인을 추가합니다. 

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

 

4. 환경별로 다른 설정 적용 

필요에 따라 환경애 따라 다른 Babel 설정을 사용하고 싶다면, ` .babelrc`파일 대신 `babel.config.js` 파일을 사용할 수도 있습니다. 이 파일은 JavaScript로 작성되며, 더 복잡한 설정을 적용할 수 있습니다. ` babel.config.js` 파일을 사용하려면 ` .babelrc` 파일을 삭제하고 다음과 같이 파일을 만들어줍니다. 

module.exports = function(api) {
  api.cache(true);

  const presets = ["@babel/preset-env"];
  const plugins = [];

  return {
    presets,
    plugins
  };
};

 

`babel.config.js` 파일에서는 ` module.exports`를 사용하여 Babel 설정을 내보내고, 필요한 설정을 함수 내에서 수행할 수 있습니다. 

---

# Babel을 사용해 ES5 코드로 바꾸기

ES5코드로 변환하기 위해 Babel CLI(Commokand Line Interface)를 사용하여 코드를 변환합니다. 

 

1. Babel 및 필수 패키지 설치

프로젝트 폴더에서 다음 명령을 사용하여 Babel과 필수 패키지를 설치합니다. 

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

 

2. ` .babelrc` 파일 생성

프로젝트 루트 디렉토리에 ` .babelrc` 파일을 만들고 다음과 같이 설정합니다. 

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

 

이 설정은 `@babel/preset-env` 프리셋을 사용하여 코드를 변환합니다. 

 

3. ES6+ 코드 작성

프로젝트 폴더에 src` 디렉토리를 만들고 그 안에 ES6+ 코드로 작성한 파일을 추가합니다. 예를 들어 , ` src/index.js ` 파일에 다음과 같은 코드를 작성합니다. 

// src/index.js
const greet = (name) => {
  console.log(`Hello, ${name}!`);
};

greet("World");

 

4. Babel을 사용하여 코드를 변환

터미널에서 다음 명령을 실행하여 Babel을 사용하여 코드를 ES5로 변환합니다. 

npx babel src --out-dir dist

 

위 명령은 `src` 폴더의 코드를 `dist` 폴더에 변환된 코드를 생성합니다. 

 

5. ES5코드 확인

변환된 코드는 `dist` 폴더에 생성됩니다. `dist/index.js` 파일을 열어보면 변환된 ES5 코드를 확인할 수 있습니다. 

// dist/index.js
"use strict";

var greet = function greet(name) {
  console.log("Hello, " + name + "!");
};

greet("World");

 

이제 `dist` 폴더에 있는 코드를 사용하여 ES5 환경에서 실행할 수 있습니다. 이 과정을 통해 Babel을 사용하여 ES6+ 코드를 ES5로 변환하는 기본적인 작업을 수행할 수 있습니다. 

---

# Babel을 사용하여 Node.js서버를 실행하는 방법

Express 프레임 워크를 사용하여 간단한 웹 서버를 만들고, Babel을 사용하여 ES6+ 코드를 ES5로 변환하여 실행합니다. 

 

1. 프로젝트 초기화 및 패키지 설치

프로젝트 폴더에서 터미널을 열고 다음 명령을 사용하여 프로젝트를 초기화하고 필요한 패키지를 설치합니다.

npm init -y
npm install express @babel/core @babel/node @babel/preset-env

 

2. Babel 설정 파일 생성

프로젝트 루트 디렉토리에 .babelrc 파일을 만들고 다음과 같이 설정합니다.

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

 

3. 서버 코드 작성

프로젝트 폴더에 src 디렉토리를 만들고 그 안에 서버 코드를 작성한 파일을 추가합니다. 예를 들어, src/server.js 파일에 다음과 같은 코드를 작성합니다.

// src/server.js
import express from 'express';

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello, Babel!');
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

 

4.서버 실행 스크립트 작성

프로젝트 루트 디렉토리에 package.json 파일을 열고, scripts 섹션에 다음과 같이 "start" 스크립트를 추가합니다.

{
  "scripts": {
    "start": "babel-node src/server.js"
  }
}

이렇게 하면 npm start 명령을 사용하여 서버를 실행할 수 있습니다.

 

5. 서버 실행

터미널에서 다음 명령을 실행하여 Babel을 사용하여 서버 코드를 실행합니다.

npm start

 

서버가 실행되면 브라우저나 API 테스트 도구 등을 사용하여 http://localhost:3000 에 접속하여 확인할 수 있습니다.

 

위 예제에서는 Babel과 babel-node를 사용하여 코드를 변환하고 실행했습니다. babel-node는 개발 환경에서 편리하게 사용할 수 있지만, 프로덕션 환경에서는 보안 및 성능 이슈가 있을 수 있습니다. 프로덕션 환경에서는 변환된 코드를 일반적인 Node.js 명령(node)으로 실행하는 것이 좋습니다.