● SWC가 뭘까? (vite, next.js)

vite나 next.js로 프로젝트를 생성했을 시, vite는 SWC를 적용할건지 선택해 프로젝트를 생성할 수 있고 next.js같은 경우는 next.js 12버전부터 swc가 도입되었다. 늘, vite로 프로젝트를 생성할때마다 궁금했던 swc.. 도대체 뭘까? 우리는 swc를 접하기 이전에, babel과 terser에 대해서 가볍게 알아보고자 한다.

● Babel

babel은 트랜스파일러로, 우리가 최신자바스크립트로 코드를 작성했다면 IE호환성을 위해서 옛자바스크립트 문법으로 변환해준다. 기본적으로 babel은 여러 플러그인을 통해서 어떤 문법들을 어떻게 변환할 건지 하나씩 조합할수도 있고 기본적으로 플러그인을 조합해서 만들어놓은 프리셋이 있기때문에 (기본설정) 대체적으로는 프리셋을 활용하여 옛문법으로 변환시킨다. + 제너레이터나 프로미스같이 옛문법에는 존재하지 않았던 문법들은 폴리필을 통해서 변환해줄 수 있다.

이전에 바벨에 관련해서 글을 포스팅한 적이 있어서, 바벨에 대한 궁금증은 아래를 통해 풀면 좋을 것 같다.

[바벨 Babel]

 

● Terser

나는 Terser라는 빌드 툴에 대해서는 사실 아는바가 좀 적은편이고, 처음들어본 것 같다. 사실, 우리가 Terser라는 툴을 직접 다룰 일은 많지 않다고 한다. 대부분의 프레임워크에서는 이미 Terser에 대한 세팅이 기본적으로 되어있으며, 더욱이 Webpack의 경우 v4 이후 버전부터 별도의 설정 없이도 프로덕션 모드에서 자동으로 Terser 툴을 사용하도록 세팅되어 있기 때문이라고 한다.

Terser 공식 웹사이트에서는 Terser라는 툴을 다음과 같이 소개하고 있다.

ES6+를 위한 자바스크립트 parser, mangler 그리고 compressor

 

파서(parser)가 무엇인지 설명하려면 글이 너무 길어질 것 같아서 생략하고, 이 글에서는 mangler와 compressor가 무엇인지에 대해서만 초점을 맞춰보겠다.

내가 참고하고 있는 블로그 글은 위와 같이 이야기하고 있는데, 파서 같은경우 아마 AST(abstract syntax tree) 추상구문트리를 말하는 것 같다. 아까 위에서 참고한 바벨 블로그에 AST에 대해 적긴햇는데, 어려운 개념이긴하다. 대충 설명하자면 코드들을 트리구조로 데이터화 하는 걸 말한다.

❍ mangler

이전에 아는 개발자분께서 옛문법으로 변환되면서 변수나 함수명들이 짧은 변수로 다 바뀌게 된다고 했었는데, 그게 이 mangler의 역할이다. 우리가 어떤 언어로 프로그래밍을 하는지와 무관하게, 변수나 함수의 이름을 정할 때에는 항상 의미 있는 네이밍을 사용하라는 이야기가 있다. 좋은 네이밍은 그 변수나 함수가 어떤 역할을 하는지 코드 전체를 보지 않더라도 대략적으로 이해할 수 있게 해주기 때문에, 코드의 가독성을 매우 향상시킬 수 있다.

하지만, 컴퓨터 입장에서 이 네이밍은 전혀 중요하지 않다. 우리가 특정 메뉴가 보여져야 하는지의 여부를 관리하는 Boolean 타입 변수의 이름을 isMenuVisible이라고 짓든지 아니면 단순히 b라고 짓든지 와 상관 없이, 컴퓨터는 그저 하나의 똑같은 불리언 변수로 취급한다. 우리가 코드의 가독성을 위해 붙여준 이름들은 결과적으로 코드의 길이를 길게 만들기 때문에, 소스 파일의 크기가 커질 수밖에 없다.

mangler는 우리의 소스코드에 존재하는 네이밍들을 의미 없는 문자로 바꿔버린다. isMenuVisible 이라는 변수명을 단순히 a로 바꿔버리면, 13글자를 한 글자로 줄일 수 있다. 이러한 최적화 과정을 통해 실제 프로덕션 환경에서 사용될 우리의 코드 사이즈를 획기적으로 줄일 수 있다.

❍ compressor

compress는 압축하다라는 뜻을 가지고 있다. 따라서, Terser가 compressor라는 뜻은 우리가 작성한 자바스크립트 코드를 압축해 주는 툴임을 유추해 볼 수 있다. Terser가 compressor로써 하는 역할은 우리의 자바스크립트 코드를 분석한 후, 더 짧은 코드를 통해 동일한 기능을 구현할 방법이 있는지 확인하고 그 방향으로 코드를 변환해 주는 것이다.

❍ minifier

위에서 설명한 코드를 mangle 하는 과정이나 compress 하는 과정과 같이, 우리가 작성한 코드를 동일한 기능을 제공하는 경량화된 코드로 변환해 주는 일련의 작업을 minify 혹은 minification(코드 경량화) 이라고 부른다. 그리고 코드 경량화 작업을 해주는 툴을 우리는 minifier라고 부른다. 따라서, Terser는 우리가 작성한 자바스크립트 코드를 프로덕션에서 더욱 경량화된 상태로 제공될 수 있도록 도와주는 minifier 빌드 툴이라고 할 수 있다.

따라서 Terse는 mingler로 코드의 길이를 확 줄여버리고, compressor로 코드 재사용이되고있는지 등 여러 확인을 통해 코드파일도 줄여버리고, minfier로 압축시켜 빌드하는 과정을 하게 된다.

 

● SWC (Speedy Web Compiler)

SWC는 자바스크립트 프로젝트의 컴파일과 번들링 모두에 사용될 수 있는, Rust라는 언어로 제작된 빌드 툴이다. SWC는 Speedy Web Compiler의 약자로, 말 그대로 매우 빠른 웹 컴파일러의 기능을 제공하는 툴이다.

그렇다면, SWC라는 툴이 바벨이나 Terser보다 월등하게 빠른 이유가 대체 뭘까? 가장 큰 이유는 바로 Rust라는 프로그래밍 언어가 이벤트 루프 기반의 싱글 스레드 언어인 자바스크립트와는 다르게 병렬 처리를 고려해서 설계된 언어라는 점이다. 따라서 의존성이 없는 파일들을 동시에 변환할 수 있다.

 

현재 카카오페이지 프로젝트에서 사용하고 있는 CSS-in-JS 라이브러리인 emotion을 지원하기 위한 @emotion/babel-plugin이나 babel-plugin-superjson-next과 같은 바벨 플러그인들은 아직 Next.js의 SWC 컴파일러와 호환되지 않는다고한다. 물론 바벨 플러그인을 필요로 하는 라이브러리들을 전부 교체한다면 SWC 컴파일러를 사용할 수 있겠지만, 빌드 속도를 높이기 위해서 사용하는 라이브러리들을 모두 바꾸는 것은 효율적이지 않다고 생각했다고 한다.

Next.js 팀에서는 깃헙 페이지에서 개발자들이 필요로 하는 바벨 플러그인들의 수요를 조사하고, 주요 바벨 플러그인들에 대한 지원을 위해 꾸준히 작업을 이어나가고 있다고 한다. 이미 styled-components나 jest와 같은 주요 라이브러리들을 위한 바벨 플러그인들은 지원되고 있고, emotion도 가까운 시일 내에 지원이 확정되어 있다고 한다.

 

+ 2023년 8월 9일에 이 블로그를 작성하면서 최근에도 아직 Next.js에 emtion 적용에 있어서 문제가 있는 것을 확인할 수 있었습니다.

● Nextjs, TypeScript 프로젝트에 ESlint, Stylelint, Prettier, Husky 설정하기 + (Next.js emotion 적용이 어려운

styled-components는 완전히 지원해주는지는 잘 모르겠네요. next.js 12버전부터 swc가 도입되고 있기 때문에 babelrc설정을 하더라도 적용이 될수가 있고 적용이 안될 수가 있다는 점••• 지원해주지 않는 플러그인이라면 적용이 되지 않아요.

이전에 바로 위의 블로그 글을 올리면서 emotion은 babel 플러그인이 필요하기때문에 next.js에서 제대로 잘 안돌아가는게 아닐까? 라는 추측을 했었는데, 아마 맞는 것 같아요. + SSR에서 head에 style을 추가하는 css-in-js방식을 구현하기는 쉽지 않기때문이라는 추측도 보아서 그런건가? 생각도 좀 들어요.

+ 추가적인 궁금증은 그럼 배포시에 css 정적 추출해서 배포하면 되는거아닌가..? 그래도 개발시에 문제가 있으니ㅎ..그런가?

좀더 찾아보니, next.js에 emotion에 적용되지 않는 이슈를 해결하신 분이 있어서 참고해봅니다.

nestjs emotion 적용안되는 이슈 해결

해결하신 분에 의하면 emotion관련된 여러 플러그인을 더 추가해야된다고 하네요, tsconfig도 좀 수정봐야하는 것 같아요. 이거 기반으로 다시 해결해봐야겠따...

 

 

자주 참고하는 ^^;; 카카오블로그

초보 웹 개발자를 위한 자바스크립트 빌드 툴과 SWC | 카카오엔터테인먼트 FE 기술블로그