ywc.life개인홍보 첫날 사이드프로젝트가 죽었다: Cloudflare 1102, 10ms의 벽
사이드 프로젝트 홍보 글을 올린 날 만난 Cloudflare 에러 1102. 무료 플랜 CPU 10ms 한도에 정확히 걸려 죽은 요청들을 분석 데이터로 추적한 기록이에요.
ywc.life
개인최근 글
스프링 @Transactional, 어떻게 동작하는지 알아보자
백엔드 코드마다 붙어 있는 @Transactional, 소속부터 동작 원리까지 프론트엔드 개발자의 눈으로 차근차근 알아봐요.
Next.js 16 Cache Components - Vercel이 공개한 PPR·use cache 가이드 (전문 번역)
Vercel Labs가 공개한 Next.js 16 Cache Components 스킬 전문 번역입니다. Partial Prerendering(PPR), use cache 지시어, cacheLife, cacheTag, updateTag까지 캐시 컴포넌트의 전체 그림을 한글로 옮겼어요.
React Composition Patterns - Vercel이 공개한 React 합성 패턴 (전문 번역)
Vercel Labs가 공개한 React Composition Patterns 전문 번역입니다. 불리언 prop 남발을 피하는 컴파운드 컴포넌트, 상태 끌어올리기, 의존성 주입 컨텍스트 등 4개 카테고리 8개 규칙을 한글로 옮겼어요.
React Native Skills - Vercel이 공개한 React Native·Expo 베스트 프랙티스 (전문 번역)
Vercel Labs가 공개한 React Native Skills 전문 번역입니다. 리스트 가상화, Reanimated 애니메이션, 네이티브 내비게이션, 상태 관리 등 14개 카테고리 36개 규칙을 한글로 옮겼어요.
Next.js Best Practices - Vercel이 공개한 Next.js 개발 가이드 (전문 번역)
Vercel이 공개한 Next.js 베스트 프랙티스 스킬 전문 번역입니다. 파일 컨벤션, RSC 경계, 데이터 패턴, 에러 처리, 이미지·폰트 최적화 등 19개 문서를 한글로 번역했어요.
모노레포 Dockerfile에서 yarn install 캐시가 매번 깨지는 이유
모노레포 Dockerfile에서 package.json만 나눠 복사해야 하는 이유를 캐시 판정 원리와 재현 실험으로 정리했어요.
Next.js Proxy 패턴으로 JWT 인증 설계하기
JWT 액세스 토큰을 Zustand에서 서버 세션으로 전환하고, NextAuth + SSR Prefetch 아키텍처로 발전시킨 Next.js Proxy 패턴 설계 경험을 공유합니다.
TanStack Query의 Query Key Factory 패턴
TanStack Query의 Query Key를 문자열로 직접 쓰면 오타와 중복, 관리 실패가 발생합니다. 이 문제를 해결하는 Query Key Factory 패턴을 단순한 형태부터 queryOptions()와 결합한 형태까지 단계별로 알아봅니다.
React Best Practices - Vercel 엔지니어링 팀의 성능 최적화 가이드 (전문 번역)
Vercel 엔지니어링 팀이 공개한 React/Next.js 성능 최적화 가이드 전문 번역입니다. 8개 카테고리, 45개 이상의 규칙을 영향도 기준으로 정리했습니다.
Next.js 15에 MSW(Mock Service Worker) 설치하기
제가 공식문서와 구글링을 통해 여러 뻘짓과 시행착오를 겪고 MSW를 Next.js 15에 설치하는 간단한 방법을 소개하려고 합니다.
React v19, forwardRef를 대체할 방법에 대해서 알아보자
React v19부터 forwardRef 없이 ref를 일반 prop처럼 전달할 수 있게 되어 코드와 타입 정의가 간결해졌습니다. 기존 forwardRef의 문제점과 새로운 ref 전달 방식을 알아봅니다.
Luxon으로 손쉽게 자바스크립트 날짜와 시간을 처리해보기
자바스크립트 Date API로 날짜와 시간을 다루면 번거롭고 실수하기 쉽습니다. Luxon은 이런 어려움을 해결해주는 라이브러리입니다. 이 글에서는 Luxon의 주요 특징과 사용법을 살펴봅니다.