Babel 쉽게 설명하기

바벨은 '번역기'

바벨은 '번역기'다.

조금 더 자세히 설명하면, jsx를 js로 변환해주는 번역기들 중 하나다.

 

jsx를 js로 왜 변환하냐고?

브라우저가 못 알아들으니까..

브라우저는 순수 자바스크립트는 아는데 jsx 문법은 모른다.

한국어는 아는데 제주도 사투리는 모르는 나.. 그런 느낌으로 보면 된다.

 

이걸 좀 더 어렵게 말했을 때 '트랜스파일링(Transpiling)'이니, '트랜스파일러(Transpiler)'니 하는 것인데

그냥 '번역', '번역가'랑 같은 뜻이다.

 

 

바벨의 jsx → js 변환 테스트 해보기

[바벨 Try It Out]

Babel · Babel

여기서는 바벨이 어떻게 jsx를 js코드로 변환하는지 직접 테스트 해볼 수 있다.

보면 나름 재밌고 신기하다.

변환 전과 후가 뭔가 비슷해보이면서도 많이 다르다.

 

 

+ 요즘엔 바벨 대신 'swc'를 많이 쓴다고 하던데, rust로 만들어서 변환 속도가 엄청 빠르다더라.

큰 프로젝트에서 한번 써보고 그 속도를 체감해보고 싶긴 한데,

기존에 만들어진 바벨 기반 플러그인을 사용하는 경우도 많으니.. 잘 알아보고 써야겠다.