한국교통안전공단 홈페이지 (wwwkotsaorkr)

한국교통안전공단 홈페이지 (wwwkotsaorkr)

지금까지 을 사용한 자바스크립트 프로젝트를 진행하며 babel을 트랜스파일러로 사용해왔어요. 웹팩의 튜토리얼 문서에서 만날 수 있는 첫 번째 트랜스파일러이자 과거와 현재를 아울러 많은 애정을 받고 있기 때문에, 대부분의 개발자 분들께서 한 번쯤은 사용해 본 기억이 있는 프로그램입니다. 하지만 얼마 전 팀 프로젝트를 진행하며 새로운 로더를 설치해서 사용하게 되었습니다. 결론부터 이야기하면 굉장히 만족스러웠는데, 왜 다른 로더를 사용하게 되었고, 그 결과가 어떠한 방식으로 작용했는지에 관해 적어보도록 하겠습니다.

그 전에 먼저 바벨에 관해 간결하게 알아봅시다. 바벨은 최신 버젼의 자바스크립트 문법을 이전 버전에서도 사용할 수 있는 문법으로 변환하는 역할을 하는 트랜스파일러입니다.

esbuildloader

다른 선택지로는 떠오르는 로더인 가 있습니다. 엄청나게 빠른 빌드 속도를 자랑하는 로더이며, 편리한 기능도 지속해서 업데이트 되고 있습니다. 현재 진행중인 프로젝트의 production 모드에서 빌드 로더로 사용하고 있기도 합니다. 다른 로더와 기능 자체는 다를게 없는데, 속도가 그렇게 빠르다고 하니 한 번 사용해볼만한 원칙은 있어 보였습니다. 진행중인 팀 프로젝트에서 실제로 사용해 본 결과 아래와 같았습니다.

왼쪽은 compileOnly true를 적용한 tsloader이고, 오른쪽은 esbuildloader입니다. 한 번만 실행하면 튀는 값이 나올 것같아 두 로더 모두 세 번씩 실행해보았는데 세 번 모두 비슷하게 나왔어요.

타입스크립트 자연생태계를 위한 Babelloader 구성하기

위에서 바벨은 자바스크립트를 변환해주는 트랜스파일러라고 설명했습니다. 타입스크립트 또한 런타임에는 자바스크립트가 되지만, 그것은 어디까지나 변환된 후의 이야기입니다. 위의 설정으로는 바벨이 ts 파일을 js 파일로 변환할 수 없습니다. Babel-loader가 타입스크립트 파일을 처리하려면 추가적인 플러그인이 필요합니다. 바로 @babel/preset-typescript 입니다.

이제 바벨이 타입스크립트 파일도 읽을 수 있게 되었습니다 다만 이렇게 구성된 babelloader 설정에는 한 가지 문제가 있습니다. 바로 타입스크립트를 읽기만 해야하는 점입니다. 이게 어떤 의미인지 예시를 통해 확인해보겠습니다. 여기 타입이 잘못 지정된 코드가 있습니다.

tsloader

그러나 굳이 babelloader를 사용해야해야하는 제약만 버리면, 이 과정을 한 번에 완료할 수 있습니다. 바로 를 사용하는 방법입니다. tsloader는 babelloader와 달리 별도의 프리셋을 추가할 필요가 없으며, 빌드시 타입 체크도 자동으로 진행해주기 때문에 타입스크립트의 장점들을 십분 활용할 수 있습니다. 위에서 언급했던 타입 체크 플러그인인 forktscheckerwebpackplugin 또한 tsloader와 같은 그룹인 TypeString 팀에서 개발되었습니다.

적용하는 과정도 매우 간단한데, 모듈을 설치하고 rules에 추가해주면 끝입니다. ts-loader의 단점이라고 한다면, 아무래도 타입 체킹 과정이 있다보니 babel-loader보다. 빌드 속도가 느립니다.

빌드 시에 타입을 체크하는 플러그인

을 사용하면 빌드 시에 별도로 타입을 체크해서 런타임에 결과를 확인할 수 있습니다. 컴파일은 컴파일대로 보내고, 타입 체크를 위한 과정은 따로 동작하여 기존의 빌드 속도와 큰 차이가 없습니다.는 특징이 있습니다.

플러그인답게 적용하는 방법도 간단합니다. 모듈을 설치한뒤 웹팩 설정 파일에 불러와서 plugin 프로퍼티에 넣어주면 적용이 끝납니다.

어떤 로더를 선택하던, 모두 훌륭한 로더들이니 각각의 특징이나 장점을 보고 경우에 맞는 로더를 선택해서 사용하시는게 제일 좋아보입니다. 제가 지금 진행중인 프로젝트의 경우 development 모드에는 안정적인 타입 체킹을 활용한 개발을 위해 tsloader에 forktscheckerwebpackplugin을 함께 사용했고, production 모드에서는 빠른 빌드 및 라이브 서버 적용을 위해 esbuildloader를 사용하고 있습니다.

긴 글 읽어주셔서 감사드리고, 제 글이 로더를 선택하시는데 조금이나마 도움이 되었다면 기쁠 것 같습니다.

자주 묻는 질문