# swc
.jpg)
Nest JS
웹사이트를 한참 공부하고 싶은 시기에 처음으로 접한게 그누보드를 통해 웹사이트를 만들어서 PHP를 수정해서 사이트를 만든 기억이 있다. 그때는 너무 야매로 작업을 하다보니 공부를 더하고 다시 만들어 보자는 생각으로 잠시 접어 두었다가 이번에 NestJS를 공부하면서 다
Next JS에서 babel -> SWC
현재 Next.js로 개인프로젝트를 진행하고 있다. Next.js도 공부할겸, 이전부터 만들어 보고 싶은 웹앱이 있었기 때문이다.현재 페이지 기본 세팅을 하고 있는데 Next.js에서 스타일드 컴포넌트를 사용하려고 했고 스타일드 컴포넌트의 서버사이드 렌더링이 가능하도록
리액트 SWC 프로젝트를 js에서 ts로 마이그레이션
마이그레이션을 하며 거치는 과정을 배우는 것이 목표 (새로운 CRA로 ts 구성하지 않음)목표하는 프로젝트는 create-react-app으로 구성되지 않고 직접 package.json으로 의존성 구현.react-dom, react-router-dom, swc, web
[Next] Babel, SWC
기존에 사용하던 react.js의 경우 Babel을 이용하여 컴파일을 하였습니다. 하지만 Next.js의 경우 SWC 가 기본으로 탑재되어있는데요. Next.js를 공부를 시작하면서 Babel과 SWC 의 차이점을 정리합니다.Babel 은 자바스크립트의 컴파일러입니다.
[TIL] next.js에서 swc사용하기
swc란 자바스크립트 프로젝트의 컴파일과 번들링 모두 사용될 수 있는,rust언어로 제작된 빌드 툴 이다.매우 빠른 웹 컴파일러 기능을 제공한다위는 세팅 방법이다.이후 빌드 후 소감도 작성하겠다
[ TypeScript ] TypeScript와 TypeScript + SWC의 차이
TypeScript와 TypeScript + SWC의 차이를 알아봅시다.
Front-end 도구 및 라이브러리 정리
스타일링 라이브러리 Emotion Emotion은 JavaScript를 사용하여 CSS 스타일을 관리하는 라이브러리로, React와 다른 프레임워크에서 사용할 수 있습니다. Emotion은 CSS-in-JS 스타일링 방식을 채택하여, 컴포넌트와 함께 스타일을 선언하고
Nextjs Emotion Cmponent Selector ( + SWC, MUI )
현재 Nextjs v13 + Next compiler(SWC)을 사용Emotion을 사용하며, MUI에 추가적인 Style을 Wrapping하여 사용@emotion/babel-plugin의 components as selectors 기능을 사용하기 위해 MUI문서에선
NextJS - SWC 적용하기
Nextjs가 12버전이 나오면서 babel이 아닌 SWC 컴파일러를 도입했다.Babel을 사용하면 개발자는 최신 버전의 JavaScript로 작성하여도 이전 웹 브라우저와 여전히 호환이 됬지만 Babel에는 고유한 문제점이 있다.Babel은 코드를 변환할 때 코드 구
[next.js | styled-components] Warning: Prop `className` did not match.
Warning: Prop className did not match. next.js로 개인 프로젝트를 진행하면서 pagination을 구현하던 중 특정 버튼을 컴포넌트로 만들어 넣어주면서 위와 같은 경고 메세지가 발생했다.경고 메세지를 해석해보면 'className'이
Typia with swc, powerful validation and fast compile
강력한 벨리데이션과 컴파일러의 만남. typia + swc, 한국의 조합!
NextJS Babel 에서 SWC 전환 하는 과정에서 겪은 에러
NextJS 12 버전부터 SWC를 Next.js Compiler 로 소개한다.SWC는 Rust 기반의 컴파일러로 싱글 코어에서 babel 보다 20배, 4 코어에서 babel 보다 70배 빠르다고 소개하고 있다.회사에서 작업하는 프로젝트를 9버전에서 12버전으로 직접
Css-in-JS 문제 SWC로 해결하기 + 바벨과 SWC 비교해보기
이전 게시글에서 Css-in-JS를 서버 사이드 렌더링 시 헤더에 주입하여 미리 HTML을 마크업할 때 스타일까지 HTML 요소에 녹여내기 위해 \_document.tsx를 작성했다.Next.js로 마이그레이션하기Customizing renderPage(https&#x
Next.js에서 Lodash 번들 사이즈 최적화하기
Bundle Analyzer를 돌려보고 Lodash가 이상한 모양새로 꽤 큰 사이즈로 자리 잡고 있다는 것을 알게 되었습니다.Gzipped size: 33.81KBlodash가 번들을 크게 만드는 이유는 lodash가 CommonJS로 작성되어 있기 때문입니다. (Co
AUTOSAR SoftWare Component
Definition of ComponentIndependently excutable objectDistinguishable 'part' in a larger program or structureApplication of AUTOSARA set of interconnec
[Next.js][공식문서] create-next-app과 SWC
왜 Next.js 프로젝트를 직접 세팅하지 않고, Create Next App을 사용하는 것이 더 권장되는지 과정과 함께 정리했습니다. 그나저나 SWC는 빌드 생태계를 어떻게 바꿀까요?
Next.js 에서 빌드타임 줄이는 이야기(Babel ⇢ SWC)
|번들러|Babel|SWC| |------|---|---| |빌드 소요 시간|56.71s|39.34s|
