웹팩(Webpack), 바벨(Babel), 폴리필(Polyfill) 알아보기

 

프론트 개발에 관해서 프로그래밍을 하다 보면 어디선가는 반드시 마주치게 되는 단어가 있습니다. 

바로 웹팩, 바벨, 폴리필입니다. 

각 단어의 의미와 역할을 정확히 알고 있다면 상관없지만 어렴풋이 기능이 다르다고만 생각했거나 각 기능에 대해 명확히 설명할 수 없다면 이 글을 읽으면 많은 도움이 될 거 같습니다. 참고로  웹팩, 바벨, 폴리필은 프론트  면접에서도 자주 물어보는 용어입니다. 

 

📖 폴리필(Polyfill) 

 폴리필을 사전에서 찾아보면  충전솜이라는 의미를 가지고 있습니다. 베개나 이불의 솜이 부족하면 우리는 충전 솜을 이용하여 부족한 부분을 채우는 역할을 합니다. 폴리필의 역할은 사전 의미처럼 부족한 부분을 채워주는 역할을 합니다. 그러면 부족한 것은 무엇이며 무엇을 채워주는가?라는 의문이 들 수 있습니다. 

폴리필이 무엇인지 이해하기 위해선 폴리필(pollyfill.io) 공식 레퍼런스 사이트를 접속하면 가장 자세히 설명되어 있습니다. 아래의 설명의 공식 사이트에서 폴리필이 무엇인지 설명한 내용입니다.

세계적으로 다양한 브라우저와 브라우저 버전을 사용하고 있으며, 각 브라우저에는 나머지 기능 집합이 약간씩 다릅니다. 이것은 브라우저용 개발을 어려운 작업으로 만들 수 있습니다. 인기 있는 브라우저의 최신 버전은 이전 브라우저에서 할 수 없는 많은 작업을 수행할 수 있지만 여전히 이전 브라우저를 지원해야 할 수도 있습니다. Polyfill.io를 사용하면 누락된 기능을 polyfill로 다시 생성하여 다양한 브라우저를 더 쉽게 지원할 수 있습니다. 지원하는 브라우저와 지원하지 않는 브라우저에서 최신 기능을 사용할 수 있습니다.

 

위의 말을 정리해보면 브라우저에서 지원하지 않는 최신 자바스크립트 코드를 브라우저가 이해할 수 있게(랜더링이 가능하게) 지원하는 코드입니다. 이처럼 폴리필(polyfill)은 말 그대로 구현이 누락된 새로운 기능을 메꿔주는(fill in) 역할을 합니다.(쉽게 정의하면 크로스 브라우징을 뜻합니다.)

 

유명한 폴리필 두 가지는 아래와 같습니다.

• core js – 다양한 폴리필을 제공합니다. 특정 기능의 폴리필만 사용하는 것도 가능합니다.
• polyfill.io – 기능이나 사용자의 브라우저에 따라 폴리필 스크립트를 제공해주는 서비스입니다.

 

👉 폴리필(Polyfill)이 필요한 이유는 무엇인가요?

브라우저마다 지원할 수 있는(랜더링 하는) 스펙이 다른 이유가 가장 큽니다.

브라우저에서 지원하는 CSS를 확인하는 사이트로 유명한 can i use 사이트를 확인해보면 속성값에 따라서 브라우저가 지원 하는 범위가 다르다는 것을 알 수 있습니다.  ES6에서 새롭게 등장한 Promise와 같이 ES5에서 변환할 수 있는 대상이 없는 경우엔 에러가 발생하기 때문에 이 경우엔 Pollyfill이 사용됩니다.  (대부분의 모던 브라우저에는 무리없이 지원하지만 IE에서 지원하지 않는 경우가 왕왕 있습니다.  하지만 이제 IE도 역사 속으로 사라졌으니... 😱😱😱😱)

 

📖 Babel

바벨 사이트 이미지

바벨(Babel) 사이트에 들어가면 보이는 화면으로 왼쪽에 코드가 작성되면 오른쪽에 코드가 변환되는것을 보여줍니다. 

바벨은 코드를 재작성해주는 트랜스파일러(transpiler) 프로그램으로, ES6 이상에서 사용되는 최신 문법을 브라우저가 인식할 수 없기 때문에 구 표준을 준수하는 코드로 변경됩니다. 변경된 코드는 웹사이트 형태로 사용자에게 전달됩니다.(이 부분이 폴리필과 가장 큰 차이점 입니다.)

 

 

- 바벨이 트랜스 파일러 한 예제 

// ES6
const test = () => {  
  target.classList.add('is-active');
};

// ES5
var test = function () {  
  target.classList.add('is-active');
};

 

 

📖 Webpack

웹팩(Webpack)은 '빌드'라는 과정을 통해서 프로젝트에서 코드가 수정될 때마다 자동으로 트랜스 파일러를 동작시켜줍니다.

자바스크립트 코드 뿐 아니라 이미지, CSS등도 같이 빌드합니다.

빌드란 소스코드 파일을 실행 가능한 소프트웨어 산출물로 만드는 과정으로 컴파일, 배포 등의 과정이 뜻하며 이러한 과정이 있기 때문에 개발과정이 끝난 코드를 한 곳으로 통합할 수 있습니다.