[Javascript] 웹팩과 바벨 (Webpack & Babel)

💻웹팩?

웹팩은 모듈 번들러이다


❔여기서 모듈이란?

• 기능이 구현된 자바스크립트 개별 파일이라고 생각하면 된다.

❔번들러란?

• 번들이란 여러 파일, 여러 구성을 합치는 것을 말하므로 번들러란 합치게해주는 것을 말한다.
• 모듈화된 파일들을 하나로 묶어 관리해야하므로 번들러의 역할이 중요하다.
• 모듈간의 의존성을 파악하여 하나의 파일로 만들어준다.

🤷‍♀️왜 사용하지?

CRA환경에 익숙해지면 웹팩을 왜사용하는지 이해하기 힘들다.

CRA가 나타나기 전, 필요한 기능을 하나의 js파일에 전부 작성했다.

하지만 점점 코드량이 많아지면서 하나의 페이지에 필요한 자바스크립트 파일이 많아지면서

HTTP통신을 통해 서버에 요청을 하면 js파일이 올 떄까지의 로딩시간이 너무 오래 걸렸다.

이것을 해결하기위해 개발은 파일별로 하되 실제 브라우저에서는 하나의 파일로 병합, 압축 해준다

💻바벨?

바벨은 Javascript 컴파일러이다.

❔컴파일러란?

사람이 읽기 편한 프로그래밍 언어 ➡ 컴퓨터가 읽기 편한 코드로 바꿔준다

❔예를들어?

a = 1

위의 변수 경우에 값을 할당하는 코드는 사람이 읽기 편하지만, 컴퓨터는 알아듣기 어려워 한다.

이것을 최종적으로는 01010011와 같은 이진법으로나 변환 되어야 컴퓨터가 인식한다.

이렇게 사람이 읽기 편한 고급언어에서 컴퓨터가 익숙해 하는 low level언어로 변환하는 것을 ✔컴파일러라고 주로 말한다.

(컴파일러 언어는 따로 존재..C, C+ JAVA등.. js와 python은 인터프리터 언어라고 부른다.)

🤷‍♀️ 그럼 바벨이 왜 필요해?

Babel은 js의 컴파일러이고 js은 인프리터 언어인데 어떻게 변환해주지?

Babel은 새로나온 자바스크립트 버전을 어느 브라우저에서나 사용할 수 있도록 ES5버전으로 변환해준다.

이 과정에서 높은 버전에서 낮은 버전으로 바꿔주고, 그 낮은 버전은 브라우저가 해석할 수 있는 버전이다.

우리가 CRA로 개발할 때 아직 브라우저가 받아드리지 못하는 각종 최신 메서드들을 사용하는 경우가 많다.

하지만 CRA에서는 이미 Babel이 설정되어 있기 때문에 버전을 고려하지 않고 편리하게 사용할 수 있다.