Capstone#9. babel 의 기본 개념에 대해 알아보자.

 

 

 

 

프로젝트를 매번 진행하면서

babel이나 config 파일을 건드려야 할 일이 생기면 

이해하지 못한채 무지성으로 따라만 했던 경험이 있어요.

그래서인지 이런 파일들을 건드려야 할 일이 생기면 에러도 많이 뜨고 뭔가 순탄하게 잘 실행이 되지는 않았던 거 같아요.

 

이번 기회에 각 파일들의 역할 쓰임 동작 등등을 공부해보려 합니다!

 

babel이란 뭐지?

 

 

우선 Babel의 주요 역할은 최신 js(es6, es7 및 그 이상)를 사용하는 코드가 브라우저 버전과 상관없이 

다양한 js 엔진에서 작동할 수 있게 하는 것입니다.

이는 특히 최신 기능을 지원하지 않는 오래된 브라우저에서도 코드가 작동할 수 있게 해 줍니다!

 

바벨이 등장함으로 브라우저 간 호환성을 지켜야 하는 크로스 브라우징 이슈를 어느 정도 해결했다고 보는데요

 

시간이 지나며 단순이 es6 to es5 변환뿐만 아니라 리액트의 jsx문법, 타입스크립트와 같은 정적 타입 언어, 최신 문법 등에 대한 변환을 제공하며 프론트 개발에 있어 필수적인 요소로 자리 잡았습니다!!

 

이때! 바벨에서 변환하는 행위를 트랜스파일링 한다고 칭하고,

고수준 언어 -> 저수준 언어의 컴파일링과 차이를 두기 위해 트랜스파일링이라고 하는 것 같습니다. 

 

 

바벨 시도해 보기

 

바벨 공식사이트에서 이렇게 변환을 한눈에 보여주는 기능도 제공하고 있습니다.

 

 

왼쪽에 View, Text, Button태그를 사용한 방식은 일반적으로 작성하는 코드 스타일입니다.

 

이 코드는 Babel이나 유사한 js 컴파일러를 통해 처리될 때,

jsx 구문이 React 함수 호출 형태로 변환되며, 두 번째 예제처럼 바뀌게 됩니다.

 

Babel은 _jsx와 _jsxs 같은 함수를 사용하여 요소를 생성하는데

이는 React 가 컴포넌트를 실행 시점에 최적화된 방식으로 처리하기 위한 것입니다.

 

이러한 변환은 코드의 성능을 높여주며, 브라우저가 요소와 속성을 처리하기에 더 효율적인 구조로 만들어줍니다.

 

 

사용 방법

 

 

1. 패키지 설치

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

 

 

2. 프로젝트 루트에 babel.config.json이라는 이름의 구성파일을 만든다.

 

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}

 

 

공식문서에 나와있는 예시!!

지원하려는 브라우저에 맞게 해당 부분을 조정해주어야 합니다.

 

더욱 자세한 내용은 바벨 공식 문서를 참고해 보시고!

 

바벨을 사용하면 최신 문법을 모두 사용할 수 있다고 착각하시 쉬운데요,

 

바벨을 사용하더라도 플리필과 플러그인에 대한 적절한 설정이 필요합니다!

 

플러그인이란?

 

바벨이 어떻게 코드를 변환할 지에 대한 룰을 정의해 주는 요소

필요/목적에 의해 모아놓은 플러그인의 집합을 프리셋(preset)이라고 합니다.

 

@babel/preset-react : 리액트 개발환경에서 필요한 플러그인들을 모아놓은 프리셋
@babel/preset-env : 대상 환경에 필요한 구문 변환을 세세하게 관리할 필요 없이 최신 js를 사용할 수 있게
@babel/preset-typescript
@babel/preset-flow
@babel/preset-jest

 

등 다양한 프리셋이 존재합니다!

 

나의 프로젝트 내의 babel.config.js

 

module.exports = {
  presets: ['module:@react-native/babel-preset'],
};

 

 

나의 babel.config.js 파일을 살펴보면

내가 선언해두진 않았지만 react native 프로젝트를 생성했을 때 자동으로 생성되었어요

 

이는 React native 프로젝트에 필요한 대부분의 일반적인 Babel설정에 필요한 구성이 이미 포함되어 있어요.

이는 @babel/preset-react@babel/preset-env와 같은 추가 사전 설정을 수동으로 포함할 필요가 없음을 의미합니다!

 

이렇게 하면 React Native 프로젝트에 대한 Babel 구성이 더 간단하고 효율적이겠죠~?

 

특정 사용자 정의나 추가 Banel플러그인이 필요한 경우 Babel구성을 확장할 수 있지만 

대부분의 React Native 프로젝트에서는 '@react-native/babel-preset'만으로도 충분합니다!

 

 

폴리필이란?

 

이전 환경에 누락된 js기능을 추가하는 코드입니다.

최신 js를 이전 버전으로 변환하는 방법을 babel에 알려주는 프리셋과는 다른 개념입니다!

 

폴리필은 런타임에 등록되지 않은 메서드나 기능을 주입해 주는 역할!!

 

폴리필은 'Promise', 'fetch', 'Array.prototype.includes' 및 이전 버전의 브라우저에서 지원되지 않을 수 있는 기타 기능과 같은 특정 js api 또는 기능을 추가하는 데 자주 사용이 됩니다!

 

 

폴리필 사용 방법!

 

 

그럼 해당 기능을 어떻게 사용하느냐?

폴리필을 사용하는 방법은 크게 3가지가 있어요.

 

1. @babel/polyfill를 import 해서 사용한다.

 

import '@babel/polyfill';

 

모든 폴리필이 불러와져 편리하다는 장점이 있겠지만

내가 사용하지 않는 폴리필까지 불러와져 번들의 크기가 커질 수 있다는 단점이 있겠죠?

 

2. core-js에서 필요한 폴리필만 import 해서 사용한다.

 

선택적으로 필요한 폴리필만 import 하는 방식이에요!

이렇게 하면 번들의 크기를 줄일 수 있겠죠?

하지만 이는 매번 import 하기가 번거롭고, 누락하는 실수도 발생할 수 있다는 단점이 있어요

 

3. @babel/preset-env 프리셋을 사용한다.

 

자동으로 폴리필이 포함됩니다!

하지만 복잡한 설정이나 번들 크기가 증가된다는 단점이 존재해요!

 

 

 

 

 

 

여기까지 babel에 대한 아주 기본적인 개념만 넣었어요!

 

https://babeljs.io/

 

더 자세한 내용은 해당 공식 문서를 참고해 주시면 좋을 거 같습니다!!💝