Modern Web Development with TypeScript, Babel and WebPack
Medium
좋은 문서가 있어서 간단하게 요약해보았습니다.
참고문헌
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파일을 실행할 수 있습니다.
번들러와 트랜스파일러로 대표적인 웹팩, 타입스크립트, 바벨은 모두 다른 대안들이 존재한다고 합니다. 다음에는 이러한 대안들 중 일부를 학습해보고자 합니다.
다음 내용이 궁금하다면?
이미 회원이신가요?
2023년 11월 22일 오전 12:59