Jest 테스트코드에서 ES6 문법과 typescript를 사용하고 싶어서 babel 설정을 하고 빌드를 돌렸더니 해당 에러가 발생했다.
친절하게 에러 메시지에서 next/font 가 SWC를 필요로 하고, 바벨 설정이 있어서 충돌이 났다 이런 의미인 것 같다.
next/font를 사용하는 곳이 현재 layout 에서 기본 폰트인 Inter를 로드하는 곳에밖에 쓰이고 있지 않아서 이걸 제거해 빌드는 성공했다.
바벨과 SWC 가 뭐가 다르고 왜 둘이 다른 걸 써서 골치 아프게 하는 건지 알아보자 ...
Babel
먼저 바벨은 자바스크립트 컴파일러다.
Babel transpiles modern, newer versions of JavaScript such as ES6 or TypeScript into old fashioned JavaScript understandable by older browsers.
ES6이나 타스같은 ~새로운~ 자바스크립트를 옛날 브라우저도 알아들을 수 있게 변환해준다.
const stuff = {title: 'stuff', quality: 'frustrating'};
const {quality} = stuff?.quality옵셔널 체이닝같은 새로운 문법으로 적힌 위 코드를
const stuff = {
title: 'stuff',
quality: 'frustrating'
};
const {
quality
} = stuff === null || stuff === void 0 ? void 0 : stuff.quality;이런 식으로 옛날 브라우저도 알아먹을 수 있게 바꿔준다.
바벨은 세 단계로 변환을 진행한다.
1. 파싱
2. 변환
3. 결과생성
바벨에 관해 더 알아보고 싶다면 ...
https://www.sitepoint.com/understanding-asts-building-babel-plugin/
Understanding ASTs by Building Your Own Babel Plugin — SitePoint
Dan Prince demonstrates how you can bend JavaScript to your will by writing your own Babel plugin (in this case adding immutable data by defaut).
www.sitepoint.com
SWC?
바벨은 지금도 많이 쓰이고 있지만.. 2006년에 Rust가 나왔다.
효율적이고 퍼포먼스가 좋고 메모리가 안전한 언어인데 러닝커브가 높다는 단점이 있다고 들었던 것 같다
그래서 이 재빠른 언어로 SWC, Speedy Web Compiler 를 만들었다.
이름만 들어도 빨라 보인다. Next.js 가 이걸 빠르게 차용했고, Babel을 대체하게 됐다.
SWC is 20x faster than Babel on a single thread and 70x faster on four cores. - SWC.js
그렇다고 한다.
이외에도 확장성, 웹어셈블리, 러스트 커뮤니티와 생태계 (그 당시에 이건 바벨이 더 낫지 않았을까?) 때문에 갈아탔다고 한다.
그래서 넥제는 기본적으로 SWC를 쓰기로 했다. 그런데 어플리케이션에서 바벨 설정을 쓰고 있거나 지원되지 않는 이상한 걸 쓰고 있다면, Babel 사용으로 fall back 한다.
info - Disabled SWC as replacement for Babel because of custom Babel configuration "babel.config.js" https://nextjs.org/docs/messages/swc-disabled
그러면 이런 안내와 함께 바벨을 폴백으로 사용한다.
내 프로젝트도 바벨 설정을 해서
이런 안내문구가 뜨게 되었다.
그리고 SWC 컴파일러가 스타일드 컴포넌트, jest, emotion 같은 것들도 지원한다고 하는데...
그러면 나도 SWC is 20x faster than Babel on a single thread and 70x faster on four cores. 이 효과를 누릴 수 있는 것일까?
Next 프로젝트인 김에 SWC로 바꿔보자
Babel -> SWC
babel -> SWC 로 컴파일러를 바꾼 블로그를 참고해 간단하게 바꿀 수 있었다.
바벨을 사용한 기존 테스트 결과다. 테스트 예제밖에 없어서 성능 평가나 비교는 무의미해 보인다.
대략 0.36s 정도 걸린다.
devDep에 있는 babel을 다 없애주고 babel config 파일, tsconfig에 연결해 둔 바벨 config 파일 위치도 다 제거한다.
그리고 swc/core, swc/jest를 새롭게 설치했다.
SWC를 적용한 모습이다.
빌드도 babel 사용한다는 안내 없이 문제없게 잘 되어서 기존에 있던 Inter 기본 폰트도 다시 살려놨다.
0.175, 0.166으로 기존의 반 정도로 시간이 감소했다!
테스트가 .. 없다시피 해서 큰 개선이 있었는지는 알 수 없지만 수치상으로 감소하기는 했다.
하지만 따로 번거로운 babel 설정을 (했다가 없앴지만) 안 해도 된다는 점, 그리고 SWC에서 내건
SWC is 20x faster than Babel on a single thread and 70x faster on four cores.
이것, 그리고 기존 사용하던 Next 와 더 잘 어우러지는 점을 고려하면 괜찮은 것 같다.