📚 Reference

• 참고 자료 1
• npm: @babel/core

📜 Chapter

‣

Babel

• Babel은 최신 자바스크립트 문법을 브라우저에서 사용하기 위한 도구로 대부분의 브라우저를 지원할 수 있는 코드로 변환한다.

<script src="<https://unpkg.com/@babel/standalone/babel.min.js>"></script>

• ES6 없이 사용하는 React
  • 리액트 공식문서에는 바벨 따위의 트랜스파일러 없이도 개발할 수 있는 방법을 안내한다.
• 하지만 실제 개발 프로젝트를 진행 해보면 이것만으로는 금방 한계를 느낀다.
• 앞으로 다룰 리액트 컴포넌트는 클래스 문법을 사용하는 것이 보다 편하다.
• 클래스 문법을 포함한 최신 자바스크립트를 사용할 때 바벨이 필요하다.
• 뿐만 아니라 앞으로 소개할 JSX 문법을 사용할 때에도 바벨이 필요하다.
• 보통은 터미널 명령어를 실행하거나 웹팩같은 번들러로 통합해서 사용한다.
• 실제로 개발 프로젝트에서는 웹팩에 바벨을 통합하는 방식을 추천한다.
• 글 - 프론트엔드 개발환경의 이해: Babel
• 인프런 - 프론트엔드 개발환경의 이해와 실습

<script type="text/babel">
  const element = React.createElement("h1", null, "Hello world")
  ReactDOM.render(element, document.querySelector("#app"))
</script>

• 바벨 라이브러리를 로딩한 뒤에는 script 태그의 type="text/babel" 속성을 사용해 자바스크립트 코드를 작성한다.
• 바벨은 이 부분의 코드 조각을 변환할 것이다.