[ React ] 웹팩과 바벨 ( Webpack & babel )

웹팩이란?

웹팩은 자바스크립트 애플리케이션을 위한 정적 모듈 번들러이다.

우리에겐 너무 익숙한(?) 웹팩

우리는 리액트를 통해 개발을 하게 되면 create-react-app 이라는 commmand 를 통해 파일을 생성합니다.

 

이 안에는 웹팩이 내장이 되어 있어서, 유지보수의 편리함을 위해 js 파일을 모듈화(파트별로 나누어 개발) 를 통해 개발을 해도 높은 성능을 가진 웹 어플리케이션을 만들 수 있습니다.

 

즉, 내장이 되어 당연하게 사용하다보니 왜? 이것을 사용해야하는지에 대해 알지 못하기에 이를 정리하고자 글을 올리게 되었습니다.

 

웹팩은 왜 세상에 나오게 되었을까?

웹팩이 생기기 아주 먼 옛날로 돌아 가보겠습니다.

 

1) 유지보수가 어려워!

 

과거 웹 어플리케이션을 제작 할 때는 지금과는 매우 다르게 1개의 js 파일에 모든 내용을 다 담아놓던 시절이 있었습니다.

이러한 개발 양식을 따를 때의 장/단점은 무엇일까요?

 

장점이라면, 한 개의 파일 내부에서 모든 요청이 처리 되기 떄문에 빠른 응답을 얻을 수 있지만

치명적인 단점으로는 문제가 발생 했을 때는 모든 코드를 살펴보고 수정을 해야하는 문제가 발생합니다.

 

이러한 문제점을 해결 하기 위해서 개발자분들은 1개의 파일을 여러 개로 나누는 모듈화를 진행합니다.

 

2) 유지보수 ok, 근데 통신은..?

 

모듈화가 진행 됨에 따라, 에러가 발생하거나 코드를 개선 해야 할 때 엄청난 편리함을 얻을 수 있었습니다.

 

하지만, 모듈화를 진행 함에 따라 기존에 사용했던 방식의 장점인 통신의 속도를 포기 해야 했는데, 이를 극복하기 위해 웹팩이 등장 하였씁니다!

 

 

웹팩은 무슨 역할을 하는거야?

웹팩이란 모듈화 해놓은 파일들을 위의 그림과 같이 정리하여 묶어주는 역할을 수행합니다.

 

build가 되는 과정 속에서 우리의 편의대로 나누어 놓은 js 파일을 묶어 주기 때문에 HTTP 통신 및 처리를 효과적으로 할 수 있다는 장점이 있습니다 :)

 

하지만, 나누어 놓은 파일을 묶어 주기에 dependency(의존성) 과 관련된 문제가 발생 할 수 있는데 이를 해결 하기 위해서는! 의존을 필요로하는 객체를 아래에 두고, 주체를 상단에 둠으로써 이러한 문제를 해결 할 수 있습니다.

 

 

웹팩의 주요 속성

Entry:
웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점 이자 자바스크립트 파일 경로 입니다.

웹팩은 entry 를 통해서 모듈을 로딩하고 하나의 파일로 묶습니다.

 

Output:
웹팩에서 entry 로 찾은 모듈을 하나로 묶은 결과물을 반환할 위치입니다.

 

Loader:
웹팩은 기본적으로 자바스크립트와 JSON 만 빌드할 수 있습니다.

자바스크립트가 아닌 다른 자원 (HTML, CSS, Image)를 빌드할 수 있도록 도와주는 속성입니다

 

Plugin:
plugin 은 웹팩의 기본적인 동작 외 추가적인 기능을 제공하는 속성입니다. 

loader 는 파일을 해석하고 변환하는 과정에 관여하고, plugin 은 결과물의 형태를 바꾸는 역할을 합니다.

 

 

 

바벨이란?

 

바벨은 모던 자바스크립트인 ES6를 구 버전인 ES5로 전환 해주는 역할을 수행한다.

 

 

바벨은 왜 필요한건가?

대부분의 브라우저는 ES6를 지원하지만, 그렇지 않은 경우가 존재하여 바벨을 사용함으로써  es5에 맞는 문법으로 파일을 변경 해줌으로써 발생할 수 있는 문제를 방지할 수 있다 :)