[cs] 웹팩, 바벨, 컴파일링, 트랜스파일링, 폴리필

hana jeong·2022년 12월 8일
0

모던자바스크립트 스터디를 중 전역객체 파트를 읽다가 폴리필이 뭔지 몰라서 찾아보았다 그러다가 관련된 다른 개념들도 검색을 하게 되었다 혹시 모르니까 아주 간단하게 정리를 해보았다

1. 웹팩 (WebPack)

의존성을 분석해 모듈을 모으는(번들링) 역할을 한다 간단하게 말하면 모듈 번들러라고 생각하면 된다
빌드라는 과정을 통해서 하나의 파일로 만들어 준다
그러면 기껏 모듈화해놓은 것들을 다시 합칠까?
바로 ES6에서 나온 모듈을 모든 브라우저에서 지원하는 것은 아니기 때문이다
그래서 모든 파일을 모아줄 소프트웨어가 필요했고 그게 바로 웹팩이다

2. 바벨(Babel)

바벨은 쉽게 말하면 자바스크립트 트랜스 파일러이다
최신 자바스크립트 문서를 지원하지 않거나 업데이트가 되지 않은 브라우저에서도 동작할 수 있도록 구형 문법으로 코드를 변환해주는 트랜스파일러이다

3. 폴리필

웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드를 말한다
예를 들면 forEach를 지원하지 않는 브라우저에서 다른 방법으로 이를 구현하는 것을 말한다
모던 자바스크립트에서는 아래와 같이 폴리필을 정의하고 있다

변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트를 "폴리필(polyfill)"이라 부릅니다

정리해보자면 바벨은 브라우저의 호환성을 위해 구형 자바스크립트 문법으로 변환해주는 것이라면 폴리필은 브라우저에서 지원하지 않는 기능이나 함수를 수정하여 브라우저에서 구현할 수 있게 해주는 역할이라고 보면 된다

근데 또 검색하다보니 컴파일이랑 트랜스파일은 또 뭔지 몰라서 또 검색을 했다


4. 컴파일(compile)

한 언어로 작성된 소스 코드를 다른 언어로 변환하는 것을 의미함

  • java -> bytecode
  • c -> assembly

5. 트랜스파일(Transpile)

트랜스파일의 경우 한 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것을 말함

예시)
ES6 코드 -> ES5코드로 변환
javascript -> typescript
c++ -> c

컴파일이라는 큰 개념 안에 트랜스 파일이 하위범주로 들어가 있다고 생각하면 편하다

profile
https://developer-hh.tistory.com 로 옮깁니다

0개의 댓글