유튜브블로그Top 10
내 프로필

데브허브 안내
소개업데이트 소식

데브허브 커뮤니티

카카오엔터테인먼트FE

February 17, 20221

초보 웹 개발자를 위한 자바스크립트 빌드 툴과 SWC

초보 웹 개발자를 위한 자바스크립트 빌드 툴과 SWC
간단 소개

초보 웹 개발자를 위한 자바스크립트 빌드 툴(바벨, Terser)과 SWC에 대한 소개 및 Next.js 환경에서의 SWC 활용법을 설명합니다.

AI Summary
  • 바벨(Babel)
    • 최신 자바스크립트 문법을 구버전에서도 실행 가능하도록 변환하는 트랜스파일러
    • ES6 이후의 문법과 제안된 기능까지 지원하며, @babel/preset-env를 통해 최신 문법을 쉽게 사용 가능
  • Terser
    • 자바스크립트 코드의 크기를 줄이는 minifier로, mangler와 compressor 기능을 제공
    • mangler는 변수/함수 이름을 짧게 변경하여 코드 크기를 줄임
    • compressor는 코드 분석 후 동일 기능의 더 짧은 코드로 변환하여 압축
  • SWC (Speedy Web Compiler)
    • Rust로 개발된 빌드 툴로, 컴파일과 번들링에 사용되며 바벨과 Terser를 대체 가능
    • 병렬 처리 가능한 Rust 언어의 특성 덕분에 바벨, Terser 대비 빠른 빌드 속도 제공
    • Next.js에서 SWC를 사용하면 빌드 속도가 향상되지만, 프로젝트 규모와 환경에 따라 효과는 달라질 수 있음
원문 보기

Next Feeds

컬리에서 데이터 분석가로 일한다는 것

컬리에서 데이터 분석가로 일한다는 것

컬리 데이터 분석가가 데이터를 수집, 분석, 활용하여 서비스 개선에 기여하는 과정을 설명합니다.

데이터 분석요구사항 정의데이터 품질데이터 활용컬리
2022. 2. 15.
컬리
카카오웹툰은 CSS를 어떻게 작성하고 있을까?

카카오웹툰은 CSS를 어떻게 작성하고 있을까?

카카오웹툰의 CSS 작성 방식 변화와 CSS-in-JS, CSS Module, Tailwind CSS의 특징 및 성능 비교 분석.

CSSCSS-in-JSCSS ModuleTailwind CSS성능
2022. 2. 10.
카카오엔터테인먼트FE
카카오웹툰은 CSS를 어떻게 작성하고 있을까?

카카오웹툰은 CSS를 어떻게 작성하고 있을까?

카카오웹툰의 CSS 작성 방법론과 CSS-in-JS, CSS Module, tailwind 적용 사례 및 성능 비교 분석.

CSSCSS-in-JSCSS Moduletailwind카카오웹툰
2022. 2. 10.
카카오엔터테인먼트FE
마이데이터 프로젝트에서 배운 것들

마이데이터 프로젝트에서 배운 것들

뱅크샐러드 마이데이터 프로젝트 회고: 인증 시스템 개발 과정의 고민, 협업, 아쉬운 점과 자기 성찰을 담았습니다.

마이데이터뱅크샐러드인증협업회고
2022. 2. 7.
뱅크샐러드
ConsoleMe: 스타트업에서 AWS IAM 권한 관리 잘 하는 법 - AB180 엔지니어링 베이스 | 기술블로그

ConsoleMe: 스타트업에서 AWS IAM 권한 관리 잘 하는 법 - AB180 엔지니어링 베이스 | 기술블로그

AB180은 ConsoleMe를 도입하여 AWS IAM 권한 관리 효율성을 높이고 보안을 강화했습니다. 최소 권한 정책 시행과 임시 권한 발급을 통해 개발 생산성을 향상시켰습니다.

ConsoleMeAWS IAM최소 권한 정책권한 관리Terraform
2022. 1. 31.
AB180
분기마다 돌아오는 뱅크샐러드 Pit Stop을 소개합니다.

분기마다 돌아오는 뱅크샐러드 Pit Stop을 소개합니다.

뱅크샐러드의 분기별 행사 Pit Stop은 성과 점검, 목표 공유, 조직 문화 강화를 통해 지속적인 성장을 도모합니다.

Pit Stop뱅크샐러드마이데이터조직문화성과 지표
2022. 1. 28.
뱅크샐러드