230227 - Babel ( 바벨 )

오늘 내가 배운 것

1. babel (바벨)

2. step 1. babel을 통해 ES6 -> ES5 문법 변경

3. step 2. babel을 통해 express를 require가 아닌 import를 이용하기

4. step 3. babel을 통해 React-JSX문법 컴파일 하기

 

1. babel (바벨)

 

리액트를 처음 배우면서 JSX문법을 사용하기 위해서 babel을 CDN으로 사용해 봤다. 그러면 babel은 무엇일까?

기본적으로 babel은 Javascript 코드를 변환해 주는 도구 ( javascript를 컴파일해 주는 도구)라고 생각하면 된다.
크게 2가지의 상황이 있는데,

 

1. javascript 문법은 꾸준히 진화

    - 문법이 진화하면 작성한 코드를 읽어줄 수 있는 런타임이 진화해야 한다.
    - 꼭 신 문법이 좋은 것이 아니다.. 사용자의 브라우저 환경도 신경 써야 한다.
    - ex) ES6 -> ES5으로 변환... (let, const , arrowfunction 등.. 못쓴다.)

babel을 통해서 문법을 쉽게 고칠 수 있다.

2. javascript 를 실행하는 방법이 여러 가지이다.

    - 브라우저에서 실행되는 경우
        - 전역 window
    - NodeJS 환경에서 실행되는 경우
        - global
        - require
        - module

다른 파일끼리 불러와서 하는 경우
commonJS 방식은 require, ES6 문법을 사용하면 import를 하는 방법이 있다.
하나로 통일해서 사용하고 싶을 때, babel을 사용한다.

개발자가 개발하면서 익숙한 방법을 이용해서 작업을 하고, 실행시킬 때 변환을 해서 사용한다. 

예를 들어 es6문법을 사용하는 개발자가 코드작성은 import로 작성을 한 뒤에 babel을 이용해서 require로 변환하여 실행할 수 있다.

 

 

아래는 3가지 상황을 간단한 코드로 변환 결과를 적었다.
실제 코드가 이렇게 작성한다기 보단 어떤 방식으로 작동하고 어떤 결과가 나오는지를 확인할 수 있다.

 

 

2. step 1. babel을 통해 ES6 -> ES5 문법 변경

 

1. 관련 패키지 설치

$ npm init
$ npm install @babel/core @babel/cli
$ npm install @babel/preset-env

 

2. `.babelrc`설정하기

// .babelrc 로 파일명을 정하면 바벨 모양의 아이콘이 보인다.
{
    "presets": ["@babel/preset-env"]
}

.babelrc

• ~rc : `rc`패턴 파일은 Node.js 프로젝트의 설정 및 환경 변수 관리를 할 때 사용되는 패턴이다.
  예를 들어 `.babelrc` 은 babel의 환경 구성, 환경 설정을 위해서 만드는 파일이다.
  `~/.zshrc`도 zsh 셸에서 사용되는 환경 설정 파일이다.
  
  
• rc : run commands, run control, runtime configuration의 약어이다.

 

3. ES6 문법으로 작성된 파일

// exam.js
// const, let , arrow function 은 대표적인 es6 문법이다.
const fn = (message) => {
    const arr = [1, 2, 3, 4, 5]
    const arr2 = [6, 7, 8, 9, 0]

    const arr3 = [...arr, ...arr2]
    console.log(...arr3, message)
}
fn("hello world")

 

4. babel 실행시키기

# 기본 문법
$ npx babel [바꿀파일] --out-file [보낼파일]

• npx : npx는 npm의 일부분이며, 로컬에 설치되어 있는 패키지를 쉽게 실행할 수 있게 도와준다. 만약 해당 패키지가 설치되어 있지 않다면 자동으로 해당 패키지를 설치한 뒤 실행한다. 실행이 완료된 후 자동으로 해당 패키지를 삭제한다.

# 내보낼 파일명을 정할 때 경로까지 지정할 수 있다.
$ npx babel exam.js --out-file dist/example.js

 

ES6 문법으로 작성했던 코드가 dist 안에 ES5 문법으로 변환되어 저장되어 있다.

 

 

 

 

3. step 2. babel을 통해 express를 require가 아닌 import를 이용하기

 

1. 관련 패키지 설치

$ npm init -y
$ npm install @babel/core @babel/cli
$ npm install @babelplugin-transform-modules-commonjs

 

2. `.babelrc` 설정하기

{
    "plugins": ["@babel/plugins-transform-modules-commonjs"]
}

 

3. import를 사용한 JS파일

// server.js
import express from "express"
const app = express()
app.listen(3000, () => {
    console.log("server start")
})

 

 

4. babel 실행시키기

$ npx babel server.js --out-file dist/server.js

 

import로 썼던 server.js 파일이 dist 안에 변환되어 들어가 있다.

 

 

4. step 3. babel을 통해 React-JSX문법 컴파일 하기

 

 

1. 관련 패키지 설치

$ npm init -y
$ npm install @babel/core @babel/cli
$ npm install @babel/preset-react

 

 

2. `.babelrc` 설정하기

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

 

 

3. JSX문법으로 작성된 파일

const React = require("react")
const ReactDOM = require("react-dom")

class App extends React.Component {
    render() {
        return (
            <ul>
                <li>
                    <a href="#">menu1</a>
                </li>
            </ul>
        )
    }
}
const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(<App />)

 

 

4. babel 실행시키기

$ npx babel app.js --out-file dist/app.js

 

JSX 문법으로 작성된 코드가 변환되어 저장되어 있다.

 

 

이렇게 3가지의 상황을 가지고 babel의 변환 결과를 확인했다.

위와 같이 바벨만 따로 사용할 수 있지만 웹팩을 통해서 사용하는 경우가 많다. 

 

Webpack이 무엇인지, Babel과 Webpack을 같이 쓰는 방법은 다음 글에서 작성할 예정이다. 

 

 

 

---