(번역) 타입스크립트, 바벨 및 웹팩을 이용한 현대 웹 개발

강엽이·2022년 3월 4일

현대 웹 개발에서 타입스크립트, 바벨 및 웹팩의 역할

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

타입스크립트(Typescript), 바벨(Babel) 및 웹팩(Webpack)은 프론트엔드 개발 방식을 간소화 시켜주었습니다. 하지만, 많은 개발자들은 현대 웹 개발에서 그것들의 역할을 이해하지 못하고 있는 것 같습니다.
이 글에서는 이러한 기술들의 기본 사항을 살펴보고 이러한 기술들이 자바스크립트의 생태계에 어떻게 기여하는지에 대해서 전체적으로 살펴보겠습니다.

자바스크립트 생태계

개발을 할 때, 코드를 파일과 모듈로 분리하는 것은 중요합니다. 이것은 개발자들의 생산성과 유지보수성을 향상시켜줍니다. 하지만 웹브라우저의 경우, 자바스크립트 코드를 실행되기 하기 위해 먼저 코드를 로드해야 합니다.
따라서, 개발을 위해 분리 해둔 자바스크립트 파일을 실행을 위해 모으고 브라우저에 로드할 수 있는 방법이 필요합니다.
프로젝트 개발을 완료하고, 다른 파일로 분리하고, 써드 파티 모듈을 의존성으로 추가했다고 가정해봅시다. 모든 것을 하나의 자바스크립트 파일로 번들링하면 로드 성능에 영향을 미칠 수 있습니다. 하지만, 관련 각각의 코드들을 요청 시 브라우저에 로드하는 것은 다소 복잡합니다.
다행히도, 최신 자바스크립트 빌드 프로세스는 이러한 복잡성을 처리합니다.

간소화된 자바스크립트 빌드 프로세스

여기서는 쉽게 두 가지 주요 부분으로 나눕니다.

번들링 단계는 모든 자바스크립트 컴포넌트들의 사용하지 않는 코드를 제거하고, 최적화된 파일 집합으로 압축합니다. 이 단계에서는 브라우저로 보내는 파일 수를 줄임으로써 웹 어플리케이션의 성능을 크게 향상시킵니다.
트랜스파일링과 폴리필화 단계에서는 오래된 브라우저에서도 오류 없이 코드를 읽을 수 있도록 새로운 자바스크립트 구문과 기능을 이전 버전 호환성에 맞춰 ES5 구문으로 변환합니다.
웹팩과 Parcel은 번들링에서 사용되는 가장 인기 있는 도구들 입니다. 이름에서 알 수 있듯이 원시 코드를 자바스크립트 번들로 변환합니다.
타입스크립트와 바벨은 트랜스파일링과 폴리필화 프로세스 자동화를 위해 웹팩과 함께 사용됩니다. 이것들을 자세히 살펴봅시다.

타입스크립트 추가 설명

타입스크립트는 구성과 용도에 따라 두 가지 역할이 있습니다.

1. 자바스크립트의 린팅 레이어로서의 타입스크립트

타입 시스템이 별개의 코드와, 분리된 파일, 다른 모듈간의 보증을 제공할 때 큰 코드를 관리하는 것은 매우 쉬워집니다. 이러한 역할로 타입스크립트는 유용하게 사용됩니다.
타입스크립트는 타입 검사와 코드 완성을 지원하여 자바스크립트에 추가적인 구문을 추가함으로써 에디터와 강력한 상호작용을 지원합니다. 또한, 개발 초기 단계에서 오류를 더 쉽게 잡을 수 있도록 도와줍니다.

2. 트랜스파일러로서의 타입스크립트

트랜스파일러는 한 프로그래밍 언어로 작성된 코드를 비슷한 추상화 수준의 다른 언어로 변환하는 도구입니다.
타입스크립트는 .ts 파일을 .js로 변환할 수 있는 자체 트랜스파일러를 가지고 있어 브라우저에서 당신이 작성한 타입스크립트 코드를 실행할 수 있습니다.

트랜스파일링 과정(타입스크립트 컴파일러)

바벨: 자바스크립트용 트랜스파일러

바벨은 ES6 구문을 ES5로 번역할 수 있는 또 다른 유형의 트랜스파일러입니다.

바벨 컴파일러

바벨을 사용한 폴리필화 코드

폴리필화는 브라우저에서 기본적으로 사용할 수 없는 기능을 추가하는 기술입니다.
예를 들어, 한 브러우저에서는 사용할 수 있지만 다른 브라우저에서는 사용할 수 없는 기본 기능을 사용한다고 가정해봅시다. 그런 경우에는 폴리필을 추가해야 범용적으로 호환이 됩니다.
하지만, 이렇게 바벨을 이용하여 코드를 폴리필 하면 더 복잡해집니다. 그러므로 꼭 필요한 경우에만 사용해야 합니다.

웹팩의 역할

폴리필화에서 바벨의 기여

자바스크립트 ES6+에서 평범한 ES5로의 컴파일러는 새로운 기능을 이전 버전으로 폴리필 할 수 있으며, 기능을 사용할 수 없는 브라우저를 지원합니다.
작성된 자바스크립트 코드를 브라우저가 이해할 수 있는 버전으로 번역합니다.

또한, 바벨은 코드의 타입을 확인하지 않지만, 바벨의 타입스크립트 지원을 활용하여 현재 빌드 워크플로우를 통합하고 JS 생성 시간을 단축 할 수 있습니다.

웹팩이란 무엇인가?

웹 + 팩, 이름에서도 알 수 있듯이 단일 웹 패키지를 만드는 것을 의미합니다. 모든 코드를 적절한 형식으로 변환합니다. 이렇게 변환하면 브라우저에서 실행할 수 있는 단일 파일 또는 적은 수의 파일로 모든 파일을 번들링하는 방법을 완벽하고 유연하게 수행할 수 있습니다. 자바스크립트 어플리케이션의 경우 웹팩은 정적 모듈 번들러 역할을 합니다.

웹팩을 이용하여 자바스크립트 파일을 결합 할 수 있으며, 개발 단계에 맞게 최적으로 구성하고 실행을 목표로 하는 "번들"로 전환할 수 있습니다.

자바스크립트 개발에 있어 웹팩의 기여도

웹팩을 사용하면 다양한 애셋(Asset)을 완벽하게 제어할 수 있습니다.
웹팩은 webpack dev server, web pack-cli 두 가지 유용한 패키지를 제공합니다. webpack dev server는 hot-loading 개발 서버이고, webpack-cli는 웹팩 커맨드를 사용할 수 있는 커맨드라인 인터페이스를 제공합니다. 이 두가지는 개발자의 생산성을 향상시킵니다.

현대 웹 개발을 위한 대안 도구

타입스크립트, 바벨, 웹팩들은 대안이 있습니다. 그러나 대안들 중 일부는 제한 사항이 있고, 사용하기전에 조사가 필요합니다.

CoffeeScript
- CoffeeScript는 동적 타입의 프로그래밍 언어입니다.
- CoffeeScript는 인터페이스 사용에 대해서 지원이 적습니다.
- CoffeeScript는 서버 사이드 개발에 사용할 수 있습니다.
- CoffeeScript는 클라이언트 사이드 개발에도 사용할 수 있으나, 프로덕션 보다는 개발에서 사용하기에 적합합니다.
LiveScript
- LiveScript는 높은 수준의 함수형 코드로 설계되어있습니다.
- LiveScript와 CoffeeScript는 툴의 지원이 제한적입니다.
- 타입스크립트의 도입으로 두가지 모두 인기가 떨어졌습니다.
SWC
- 자바스크립트의 트랜스파일러로 Rust로 작성되었으며 Babel보다 빠릅니다.
ESBuild
- 자바스크립트와 CSS의 빠른 번들러입니다.
- 파싱, 프린팅 그리고 소스 맵 생성을 완전히 병렬화합니다.
Parcel
- Parcel은 즉시 사용할 수 있는 환경 설정이 필요없는 번들러입니다.
- Parcel은 ES6를 특정 ES5로 변환하는 Babel 트랜스파일러를 내장하고 있습니다.
Rollup
- Rollup은 ES 모듈에 집중했습니다.
- Rollup은 패키지를 배포하기 더욱 쉽게 합니다.
- Rollup을 사용할 때 모든 것이 플러그인이 되어야 합니다.

보너스: 모든 프로젝트에서 컴포넌트 사용

지금까지는 큰 프로젝트 안의 기능을 빌드하기 위해 사용했습니다.
그러나 만약 독립적인 기능을 먼저 개발하고, 다른 어플리케이션에서 쉽게 구성하고 관리한다면 어떨까요? 개발은 매일 더 빠르고, 일관되고 확장될 것입니다. 컴포넌트를 한번 생성하면 어느 곳에서나 사용하여 무엇이든 만들 수 있습니다.
Bit와 같은 OSS 도구는 독립적인 컴포넌트를 빌드하고 응용프로그램에 구성할 수 있는 강력한 개발자 경험을 제공합니다. 일부 컴포넌트 또는 마이크로 프론트엔드를 사용하여 작은규모의 멋진 프로젝트를 시작할 수 있습니다. 시도 해보세요