[리액트 React] 바벨 Babel / 트랜스파일링 Transpiling / 번들링 Bundling

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는 바벨, 트랜스파일링, 번들링의 개념에 대해 정리했습니다.

지금부터는 가독성을 위해 문어체로 작성하도록 하겠습니다.

 

 

  바벨 Babel (트랜스파일러)

• JSX는 자바스크립트로 변환되어야 웹에서 정상적으로 작동한다.
• babeljs.io 의 바벨이라는 프로그램을 통해 변환된다.
• JSX를 JS로 변환해주는 프로그램 중에서 가장 대표적인 프로그램.
• 바벨 사이트에서 'Try it out'에서 바벨을 테스트할 수 있다.
• 왼쪽에 JSX코드를 붙여서 넣으면, 오른쪽에 JS에 변환되서 보여진다. (트랜스파일링)
• 바벨은 대표적인 자바스크립트의 '트랜스파일러'이다.

 

 

 

  번들링 Bundling

• build 폴더 > static > js파일들이 보인다. (소스코드의 파일을 압축해놓은 것들)
• 이런 묶음 파일을 '번들'이라고 부른다.
• 번들 파일을 만드는 것을 '번들링'
• 프로젝트에서 빌드를 했을 때 알아서 번들링이 되고 있음을 인지할 것.

 

 

 

  빌드 과정

트랜스 파일링을 통해 JS로 변환 -> 번들링으로 압축하여 -> 웹 브라우저가 소스를 읽을 수 있도록