간단하게 정리하는 프론트엔드 빌드 시스템.

javascript 는 es6이후로 많은 변화가 이루어졌는데, 현재 개발되는 대부분의 웹은 es6 이후의 코드로 작성이 되어있습니다. 그런데, 모든 브라우저가 es6 이후의 문법을 지원하는  것은 아닙니다. 대표적으로 internet explore는 es6이후의 핵심 기능인 promise를 이해하지 못합니다.

 

Babel

이러한 문제를 해결 해 주는 것이 babel인데, 

babel은 es6이후의 js 코드 및 typescript, jsx를 활용한 코드를 모든 브라우저에서 동작 가능한 코드로 컴파일해주는 역할을 합니다. 즉, js -> js로 컴파일 해주는 역할입니다.

 

 

polyfill

poly-fill은 babel이 미처 해결하지 못한 문제들을 해결한다. babel은 es6이후의 코드를 es6이전의 코드로 문법 변환을 해주는 것인데, es6에만 있는 함수와 같은 것들은 babel만으로는 모든 브라우저에서 사용할 수 없다.

poly-fill은 프로그램이 처음에 시작될 때 현재 브라우저에서 지원하지 않는 함수를 검사해서 각 object의 prototype에 붙여주는 역할을 한다. 

위의 설명은 좁은 의미(js)에서의 poly-fill인데, js뿐만 아니라 css또한 시간이 지날수록 업데이트가 되며 신 기능이 추가되고 있는데, 아래와 같은 css코드 (flex-gap)은 ie에서 동작하지 않는다.

div{
    display: flex;
    gap: 32px;
}

 

이러한 css의 크로스 브라우징 문제를 해결해주는 라이브러리도 있다. 예시)  http://philschatz.com/css-polyfills.js/

 

**웹 테스크 메니저란?

• HTML, CSS, JS 압축
• 이미지 압축
• CSS 전처리기 변환 의 작업을 자동으로 해주는 것ex) gulp, grunt

 

참고. https://velog.io/@kmlee95/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EB%B9%8C%EB%93%9C%EC%8B%9C%EC%8A%A4%ED%85%9C