11.12 · react · 13m

대용량 엑셀 다운로드: 클라이언트에서 서버로

클라이언트 기반 엑셀 생성의 한계를 극복하고 SSE를 활용한 서버 사이드 아키텍처로 성능과 사용자 경험을 개선한 과정을 다룹니다.

04.14 · vue · 7m

SCSS Mixin으로 SSR 플리커링 줄이기

JavaScript 반응형 로직을 SCSS Mixin으로 전환하여 SSR 환경의 플리커링(FOUC)을 근본적으로 해결한 과정을 다룹니다.

01.12 · vue · 13m

서비스 프론트엔드 성능 최적화 탐구: Nuxt.js 3와 캐싱 전략의 현실

Nuxt.js 3 기반 서비스에서 SWR, Redis, In-Memory 캐싱 등 다양한 성능 최적화 전략을 탐구하고, 실제 인프라 지표를 분석하며 '지금 당장'보다 '적절한 시점'의 중요성을 도출한 결론을 정리합니다.

05.16 · vue · 4m

Infinite Scroll 최적화: DOM 재사용으로 대용량 리스트 처리하기

Intersection Observer와 DOM 재사용(버퍼링) 전략으로 무한 스크롤에서 발생하는 DOM 누적 문제를 줄이고, 대용량 리스트를 안정적으로 처리한 구현 과정을 정리합니다.

08.28 · performance · 7m

Next.js 프로젝트에 Docker 적용기

Next.js 프로젝트를 Docker로 멀티 스테이지 빌드하고, standalone output 기반으로 이미지 크기를 줄이며 환경별 `.env`를 주입하는 과정을 정리합니다.

08.09 · javascript · 4m

requestAnimationFrame과 cancelAnimationFrame의 관계

`requestAnimationFrame`이 반복 호출될 때의 특성과, 종료 시점에 `cancelAnimationFrame`으로 정리하지 않으면 발생할 수 있는 성능/메모리 이슈를 정리합니다.

08.03 · react · 5m

React Query의 Hydrate란?

Next.js SSR 환경에서 React Query(TanStack Query)의 `Hydrate`/`dehydrate`를 활용해 서버에서 미리 받아온 데이터를 클라이언트 캐시에 주입하고, 중복 API 호출을 줄이는 방법을 정리합니다.