오늘의 오전 학습 - Bundling &Transpiling

좋은 문서가 있어서 간단하게 요약해보았습니다.


참고문헌


https://blog.bitsrc.io/modern-web-development-with-typescript-babel-and-webpack-36c5c58b36e


요약


이전부터 자바스크립트 내 전역변수 문제 등으로 코드를 파일단위로 분할하여 작업하는 방식이 선호되었습니다.

다만, 결국 이 코드를 해석해야 하는것은 브라우저이며, 그렇기에 분할된 파일들을 하나의 파일로 변환하여 브라우저에게 전달해주어야 했습니다. 거기다 각각의 브라우저마다 호환성을 고려해야 합니다. 이에 최신 자바스크립트 빌드 프로세스는 이를 더 효율적으로 해결하기위해 발전하고 있습니다.


번들링


  • 번들링이란 자바스크립트의 여러 분할된 파일들을 하나의 js 파일로 병합해주는 작업입니다.

  • 사용하지 않는 코드들을 제거해주어 최적화된 파일로 병합합니다.

  • 여러 js 파일을 서버에 요청하지 않아도 되기에 웹 성능을 크게 향상시킬 수 있습니다.

  • 대표적인 모듈 번들러로는 webpack, parcel 이 존재하는데, 역할은 위 언급처럼 단일 js 파일로의 변환 뿐 아니라, 웹 패키지에 필요한 모든 분할된 파일(HTML, CSS, Javascript, image,...)들을 최적화하여 단일 파일로 병합해줍니다.


폴리필화


  • 폴리필화 시킨다는것은 우리가 작성한 js 코드가, 모든 브라우저에서 적합하게 작동되도록 전환해주는 역할을 담당합니다. (폴리필화란 브라우저에서 기본적으로 사용할 수 없는 기능을 추가하는 기술입니다)

  • 새로 추가된 js 구문이나 기능을 사용하였다면, 호환성을 위해 이러한 구문을 ES5 문법으로 전환시킨 뒤 브라우저에서 이를 해석할 수 있도록 해줍니다. 대표적으로 babel(바벨)이 이러한 작업을 수행합니다. (바벨은 폴리필화에 기여하는 트랜스파일러라 할 수 있습니다)


트랜스파일러


  • 말 그대로 특정한 언어로 작업된 코드를 비슷한 추상화 레벨의 다른 언어로 변환해주는 번역기 역할을 하게 됩니다.

  • 대표적인 예시로 타입스크립트의 트랜스파일러를 살펴보면, 타입스크립트로 작성된 코드(.ts)는 브라우저에서 해석할 수 없고, 이에 트랜스파일러는 ts 파일을 js 파일로 변환시켜 브라우저에게 전달해줍니다. 이로서 브라우저는 문제없이 js파일을 실행할 수 있습니다.


번들러와 트랜스파일러로 대표적인 웹팩, 타입스크립트, 바벨은 모두 다른 대안들이 존재한다고 합니다. 다음에는 이러한 대안들 중 일부를 학습해보고자 합니다.

Modern Web Development with TypeScript, Babel and WebPack

Medium

Modern Web Development with TypeScript, Babel and WebPack

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2023년 11월 22일 오전 12:59

댓글 0