[React] babel은 어떻게 내 코드를 이해하고 수행하는걸까?
https://bravenamme.github.io/2020/02/12/what-is-babel/
babel 이란 무엇인가?
들어가며 최근에 react 프로젝트와 typescript 프로젝트를 거치면서 webpack 을 자주 써보고 세팅해보게 되었습니다. 처음에는 동작의 원리보다 요즘 잘나가는 프론트엔드 개발 환경 만들기라는 목표
bravenamme.github.io
해당 내용은 인프런 진유림님의 만들면서 배우는 리액트 : 기초를 참고하여 작성하였습니다!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>고양이 가라사대</title>
</head>
<body>
<div id="app">
</div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
console.log("야옹");
// li태그로 감싼 고양이 리스트 만들기
const catItem = (
<li>
<img src="https://cataas.com/cat/60b73094e04e18001194a309/says/react" />
</li>
);
const app = document.querySelector("#app");
ReactDOM.render(catItem, app);
</script>
</body>
</html>
바벨(Babel)이란?
입력과 출력이 모두 자바스크립트(JavaScript) 코드인 컴파일러로,
최신 버전의 자바스크립트(ECMAScript)를 구 버전의 자바스크립트로 변환시켜주는 역할을 합니다.
이렇게 구 버전의 자바스크립트로 변환해주는 이유는, 구 버전의 브라우저에서도 최신 자바스크립트를 사용할 수 있도록 하기 위해서입니다.
또한, Babel은 다양한 자바스크립트 문법을 지원해줍니다. 예를 들어, 클래스나 화살표 함수 등의 ES6 문법은 Babel을 통해 구 버전의 자바스크립트로 변환될 수 있습니다.
이러한 변환 작업은 자동으로 이루어지며, 설정 파일을 통해 사용자가 커스터마이징할 수도 있습니다. 이를 통해 개발자는 최신 자바스크립트를 사용하면서도 브라우저 호환성을 고려하지 않고 개발할 수 있습니다.
브라우저가 이해할 수 있는 자바스크립트로 컴파일해주는 도구 바벨!
우리가 리액트 문법으로 작성한 코드를 자바스크립트로 잘 바꿔주는 역할~
정말 잘 바꿨는지 확인해볼까?
내가 작성한 하단 스크립트 부분이 아닌
헤더쪽을 보면 내가 작성하지도 않은 스크립트 하나가 추가된 것을 볼 수 있는데
이게 바로 바벨이 통역한(!) 자바스크립트 언어이다~
따라서 브라우저는 상단의 스크립트 언어를 읽고 수행하는 것이다