[Webpack] babel

💡 webpack과 babel이 서로 특별한 관계가 있는 것은 아니지만 webpack을 설정할 때 주로 babel을 추가하므로 설명하고 넘어가겠습니다.

Babel은 JavaScript 컴파일러입니다.

compiler?

📖 In computing, a compiler is a computer program that translates computer code written in one programming language into another language

• 풀어서 설명하자면, 사람이 읽기 편한 프로그래밍 언어에서 컴퓨터가 읽기 편한 코드로 바꿔주는 것을 컴파일러라고 합니다.

예를 들어,

---

• 아래와 같이 변수에 값을 할당하는 코드는 사람이 읽기 편하지만, 컴퓨터는 알아듣기 어려워 합니다. 최종적으로는 01010011와 같은 이진법으로나 변환 되어야 컴퓨터가 알아듣습니다.

  a = 1

• 이렇게 사람이 읽기 편한 고급언어에서 컴퓨터가 익숙해 하는 low level 언어로 변환하는 것을 컴파일러라고 주로 말합니다.
  • 컴파일 언어는 따로 있습니다. c, c++, java 등입니다.
• JavaScript나 Python은 컴파일 언어가 아니며, 사람이 쓴 대로 컴퓨터가 해석하는 "인터프리터 언어"라고 부릅니다.

바벨이 필요한 이유?

Babel은 JavaScript 컴파일러이다.

• JavaScript는 컴파일 언어가 아닌데?
• Babel은 방금 나온 따끈따끈한 신상 자바스크립트 버전을 어느 브라우저에나 사용할 수 있도록 ES5 버전으로 변환해줍니다. 즉, 브라우저는 아직 새로운 자바스크립트 버전을 맞이할 준비가 안 됐는데, 개발자는 새로운 버전으로 효율적인 문법을 미리 쓰면 좋으니까 이런 Babel이 나온 것입니다.
• 자바스크립트에서 자바스크립트로 변환하는 것이지만, 높은 버전에서 낮은 버전으로 바꿔주고, 그 낮은 버전은 브라우저가 해석할 수 있는 버전이므로 컴파일이라는 단어를 쓰는 것 같습니다. 하지만, c, c++, java에만 사용하는 컴파일이라는 단어에 익숙한 사람은 컴파일러 대신 "트랜스파일러"라고 하는 사람도 있습니다.
• 우리가 create react app으로 개발을 할 때 아직 브라우저가 받아드리지 못하는 각종 최신 메서드 들을 사용하는 경우가 많습니다. create react app에서는 이미 Babel 설정이 되어있기 때문에 우리는 버전을 고려하지 않고 마음대로 개발할 수 있었던 것이죠!

바벨과 관련된 필수 module

---

• babel-loader: 바벨과 웹펙이 어떻게 동작하는지
• @babel/core: babel로 컴파일해서 결과물 파일이 나오도록 babel관련한 핵심 모듈
• @babel/preset-env: ES2015?6?7 등 어떤 버전을 쓸지에 관한 모듈
• @babel/preset-react: jsx 를 js로!