Webpack과 Babel - JavaScript

JavaScript

Webpack & Babel JavaScript

---

Webpack 

webpack

webpack이란?

> webpack은 js를 모듈화 해주는 모듈 번들러입니다. 여러 개의 자바스크립트 파일을 하나로 모아주는 기능을 합니다.

왜 webpack이 필요할까?

웹 애플리케이션의 발전에 따라 규모는 점점 더 커졌습니다. 이로인해 발생한 문제점들을 살펴보면

• 웹을 구동하기 위해서는 수 많은 파일을 서버에서 가져와 데이터들을 표시하게 됩니다. 즉 규모가 커질수록 응답 시간이 길어져 느려지게 됩니다.
• 여러 명의 개발자가 함께 프로젝트를 진행하다 보면 변수명이나 함수명이 겹치는 일이 벌어지면 이는 에러를 야기할 수 있습니다.

이를 해결하기 위해 번들러(Bundler)가 나오게 되었습니다. 대표적으로 webpack, parcel, browserify 번들러들이 있습니다. 이 중 주로 쓰이는 것은 webpack입니다.

웹 개발을 하다보면 다양한 js 파일들을 만들게 되고 이러한 다양한 파일들을 모듈화 하여 하나로 합쳐주는 것이 webpack의 기능입니다.

 

webpack 설치

//CLI - 터미널에 입력
npm install -D webpack webpack-cli

webpack을 설치하고 js파일들을 하나의 엔트리 파일에 모아 아웃풋으로 번들러를 만들면 여러 js파일을 다운로드하지 않고 하나의 번들러를 서버에서 가져오는 것으로 웹 애플리케이션 구동이 가능하게 됩니다. 또한 중복되는 변수, 함수 이름들을 정리하여 최신 문법이 아닌 호환성 높은 코드로 변환해주니 협업을 하고 있다면 번들러를 사용해야 할 이유는 충분하다고 생각됩니다.

 

더 자세한 내용은 글을 작성하며 참고한 블로그 (https://ingg.dev/webpack/)를 참고해주세요.

---

Babel

Babel

Babel이란?

> Babel은 자바스크립트 컴파일러로 최신의 자바스크립트 코드를 무난한 이전 단계의 자바스크립트 코드로 변환 가능하게 해주는 개발 도구, 즉 트랜스파일러(Transpiler)이다.

왜 Babel이 필요한가?

이와 같은 트랜스 파일러(Transpiler)가 필요한 이유는, ES6+를 사용한 프로젝트를 배포하려고 할 때 구형 브라우저(예: IE)에서도 작동하도록 하기 위함이다. 개발자들은 더 많은 사람이 문제없이 완성된 프로젝트를 볼 수 있도록하는 것과 최신 문법을 자유롭게 이용하는 것 두 가지를  Babel 패키지를 통해 목표를 만족시킬 수 있다.

 

즉 주 기능은 구 브라우저에서도 새로운 자바스크립트 문법을 사용할 수있도록 해석하여 브라우저에 전달해주는 역할을 한다고 보면 된다.

 

이 두 가지 개념을 이해하면 리액트의 작동 방식에 대해 조금 수월하게 이해할 수 있다.

 

바벨 사용에 대한 자세한 내용은 (https://brunch.co.kr/@topherlee/29) 이곳을 참고해주세요.