Babel

김기영·2024년 1월 19일
0

개념완성

목록 보기
2/4

0.


웹 개발을 하다 보면, 특히 초기 환경 설정을 하다 보면 바벨 이라는 단어를 들어 본 적이 있을 것이다.

오늘은 간단하게, 바벨 이 어떤 의미로 쓰이고, 어떤 역할을 하는 지에 대해 알아본다.

개념


Babel is a JavaScript compiler
Babel 공식페이지

공식적으로는 "바벨 은 자바스크립트 컴파일러" 이다.
항상 개념의 정식 소스는 중요하기 때문에, 짚고 넘어간다.

...

이제, 쉬운 관점에서 보면

"바벨은 JS언어의 최신 문법이 적용된 코드를, 예전 브라우저에서 돌아갈 수 있게 바꿔준다"

조금 더 상세하게 말하자면,
Javascript 에는 ECMAScript 라는 표준이 존재한다. 이 표준에 맞게 개발이 진행되고 버전이 올라가는데, 그게 바로 JS의 ES숫자(버전) 이다. (ES5, ES6...)

이 버전에 따라 특정 브라우저 ( 크롬, 사파리, 파이어 폭스 , IE 등등)에 따라 작동을 않할 수 가 있다.

그래서 최신 버전의 ES 를 옛날 ES 버전의 코드로 변환 시켜줘서, 많은 브라우저에서 돌아갈 수 있게 하는 것이다.

그래서


어떻게 보면 개념이라기 보단 역할,의미에 가까운 설명이지만, 저 뜻을 이해함으로 문맥에서 바벨이 나왔을 때 이해하는데 도움이 될 거라고 생각한다.

당연하겠지만, 내가 작성한 JS코드로 만든 사이트가 다양한 브라우저에서 돌아가야 좋은 것이기에 사용해야 무조건 좋다.

그리고 아마 본인이 설치 한 적이 없더라도, 이미 사용하고 있을 확률이 높다.

+(추가 내용)
React를 접해본 사람이라면, create-react-app 에 대해서 알고 있을 텐데, 해당 프로젝트를 만들고 라이브러리를 관리해주는 package.json을 보면 babel 이 없을 것이다.

그렇다면 제 프로젝트에 바벨을 설치해야 하나요?

그렇지 않다. 보통 라이브러리를 설치함에 있어서, 해당 라이브러리 또한 다른 라이브러리를 사용할 확률이 높은데, 라이브러리의 설정에서 같이 사용되는 라이브러리는 같이 설치되게 되어있다.

CRA의 경우는 package.jsonreact-scripts 가 존재할 텐데, pakcage-lock.json 이나 yarn.lock 을 보게 자세히 살펴보면 react-scripts 의 필수 종속 라이브러리로 babel@core가 있어서 같이 설치 되었음을 확인 할 수 있다.

이런 식으로 우리는 알게 모르게, 바벨을 사용 중일 확률이 높다. 지금 까지 해당 문제에 대해 겪은 적이 없다면 100%라고 봐도 무방하다.

결론


바벨 에 대한 의미를 알았다면 생길법한 질문에 대해 조금 더 적었지만,
정리하면 다음과 같다.

바벨 은 JS코드를 더 많은 브라우저에서 작동 할 수 있게 해준다.


본문에 잘못된 내용이 있다면 언제든 댓글로 알려주시면 감사하겠습니다!

profile
당당한 개발자가 되고 싶은.

0개의 댓글

Powered by GraphCDN, the GraphQL CDN