[JS] Babel 이란?

 

이전 포스팅에서 번들러 이야기를 했었는데, 그렇다면 당연히 Babel의 이야기를 안할 수 없습니다.

리액트 쓰다보면 Babel 다들 한번쯤.. 보셨죠? 그럼 가 봅시다

---

그래서 바벨이 뭔데?

??? : Who the xxxx is this?

당연히.. Babel이란걸 처음 들어보시는 분들도 있을거라고 다시금 생각하여 간단하게 설명드리자면,

우리가 지금 사용하는 JS를 구형 브라우저에서도 사용할 수 있도록 번역해주는 도구입니다.

 

 

Babel은 컴파일러다

엥..? JS는 인터프리터 언어인데요..? 라고 하시면, JS에서 JS로 컴파일 해주는 도구입니다.

 

그럼 이거 왜쓰나요?

Legacy 대응

우리가 ES6, ESNext ... 로 부르는 최신 버전들이 있으니 당연히 과거 버전도 있습니다.

과거 버전에서는 최신 버전에서 나온 JS 기능들을 사용할 수 없을거구요,

 

그냥 레거시 브라우저를 안쓰면 되지 않나요? 라고 하실 수 있지만, JS가 변하는 속도가 엄청나게 빠르기때문에

때때로 최신 브라우저들도 지원하지 못하는 기능이 있을 때가 있습니다.

 

하여 레거시 브라우저들부터 최신 브라우저까지, 심지어 모바일 웹 환경에서까지 최신 문법들을 사용할 수 있도록 하기위해서 Babel을 쓰는 것 입니다!

 

 

TypeScript 대응

TypeScript에서 JavaScript로 변환시켜주는 도구 또한 이 Babel을 사용하게 됩니다.

뭐, 대표적으로 TypeScript를 말한 것 뿐이지 웹단에서 최종적으로 JavaScript로 동작하는 언어들은 모두 Babel을 쓴다고 생각하면 될 것 같습니다.

 

---

이정도면 Babel을 왜 쓰는지에 대해서는 어느정도 설명을 한 것 같습니다.

근데 리액트 쓰시면서 Babel을 따로 설치하셨던 기억이 없다구요?

 

그건 바로, create-react-app과 같은 도구를 설치하면 알아서 세팅해주기 때문입니다.

자동으로 세팅해줘서 그냥 지나칠 수 있지만, 매우 중요한 도구인 Babel에 대해서 여러분들도 더 공부해보시는걸 추천드립니다!