Frontend

Vitest가 빠르다는데, Next.js에서도 써도 될까? Jest랑 뭐가 다르고 언제 뭘 써야 하는지 정리했다.

Figma의 WebGL 렌더링, Konva의 Canvas 2D 방식, PixiJS의 중간 지점을 비교한다. 좌표 시스템, 이벤트 처리, 에디터 인터랙션 구현의 현실적인 난이도까지 다룬다.

Figma처럼 드래그앤드롭으로 HTML 요소를 편집할 수 있는 오픈소스 비주얼 에디터들을 소개한다.

Atomic Design을 알아보다가 발견한 Feature-Sliced Design. 비즈니스 도메인과 영향 범위를 기준으로 프론트엔드를 구조화하는 방법론을 소개한다.

MUI의 SxProps 타입으로 인해 TypeScript 빌드가 무한히 돌거나 느려지는 문제의 원인과 해결 방법을 정리한다.

Next.js의 기본 개념과 시작하는 방법을 알아봅니다.

babel preset-env가 어떻게 동작하고, 어떤 옵션들이 있는지 알아본다.

사용하지 않는 코드를 번들에서 제거하는 Tree Shaking의 원리와 적용 방법을 알아본다.

Webpack의 핵심 개념인 Entry, Output, Loader, Plugin을 이해하고 기본적인 설정 방법을 알아봅니다.

웹 개발 프로젝트를 진행하면서 반복적으로 사용하게 되는 CSS 패턴들을 정리했다. 배경 이미지 설정, 그라디언트, 커서 스타일 등 실무에서 바로 복사해서 쓸 수 있는 코드 스니펫 모음이다.