​

Babel이란?

Babel은 최신 명세(또는 ES2015 이상)의 문법을 구형 브라우저에서도 동작하는 코드로 *트랜스파일해주는 개발 도구입니다.

만약 Babel이 없다면? 구형 브라우저에서 동작할 수 있는 방식으로 웹 개발을 하고, 최신 브라우저에서 동작할 수 있는 방식으로 다시 개발해야 하는 상황이 발생합니다. 즉 구형 브라우저의 지원이 필요한 프런트엔드 프로젝트라면 현재 Babel의 사용은 필수입니다.

​

*트랜스파일러?

ES2015 등장 이후로 javascript는 class문법, 화살표 함수, 모듈 도입 등 많은 변화가 있었습니다. 이후에도 동기, 비동기처리를 위한 async & await, optional 등 다양한 문법과 편의성 높은 기술들이 추가되고 있습니다. 크롬, 사파리, 파이어폭스 등 현대 브라우저들은 이러한 최신 명제를 잘 따라가고 있지만, 브라우저별로 구현율은 다릅니다.

웹 개발의 입장에서 어떤 브라우저에서는 동작하고 어떤 브라우저에서는 동작하지않는 다는 것은 큰 손실이고, 개발에 많은 제약이 됩니다.

즉, 어떤 브라우저에서든 동일한 실행 및 개발 환경을 구축하는 것이 필요합니다. 그리고

이러한 환경을 만들 때 사용되는 것이 트랜스파일러(Transpiler)입니다.

트랜스파일러는 어떠한 언어로 작성된 코드를 비슷한 수준(기능)의 추상화를 가진 언어로 변환하는 역할을 수행합니다.

​

​

​

​

​

*해당 포스팅은 기초부터 완성까지, 프런트엔드의 내용을 공부하며 기록해 놓은 것입니다.

​

​

👀요약

웹 개발을 하면서 Babel을 어떻게 사용하지? 하는 고민은 한 번도 해본 경험이 없습니다. 왜냐하면 어떤 프로젝트를 생성하면 웬만한건 다 알아서 세팅되기 때문입니다. 다만 Babel 이라는 파일이 생겼는데 이건 뭐지? 하는 고민에서 자유로워지고 싶어서 어떤 것이고 어떤 일을 하는 지 알아봤습니다.

​

​

​

​