WebView 전용 페이지가 외부 브라우저로 열렸을 때의 안내 flow 처리하기
네이티브 인터페이스가 주입되지 않은 환경으로 진입한 사용자의 경험 저하 문제를, 인터페이스 폴링과 BottomSheet 안내, 플랫폼별 분기로 처리한 과정을 다룹니다.
Lighthouse 접근성 점수가 움직이지 않은 이유
Lighthouse 자동 검사가 잡는 영역과 잡지 않는 영역을 구분하고, 마크업 4건을 정리해 접근성 점수를 84점에서 95점까지 올린 과정을 다룹니다.
Lighthouse cache-insight를 결정하는 must-revalidate 한 단어
next/image 적용 후 줄어든 Lighthouse cache-insight 항목의 진짜 원인을 추적해, max-age도 응답 크기도 아닌 must-revalidate 한 단어가 제외 조건으로 작동한다는 사실을 확인한 과정을 정리합니다.
Next.js GitHub Pages 배포 트러블슈팅: export, basePath, configure-pages
GitHub Pages에 Next.js를 정적 export로 배포하면서 겪은 문제점과 디버그/해결 과정을 정리했습니다.
대용량 엑셀 다운로드: 클라이언트에서 서버로
클라이언트 기반 엑셀 생성의 한계를 극복하고 SSE를 활용한 서버 사이드 아키텍처로 성능과 사용자 경험을 개선한 과정을 다룹니다.
외부 PG사 연동 시 리다이렉트 패턴 비교 - GET vs Form POST
결제 시스템에서 다양한 외부 결제 서비스를 연동하면서 경험한 리다이렉트 패턴들의 차이점과 구현 방법을 정리합니다.
Next.js 15 App Router 마이그레이션 여정
Express 서버와 Page Router로 구성된 레거시 프로젝트를 Next.js 15 App Router 기반으로 전환한 대규모 마이그레이션 과정을 다룹니다.
HOC와 미들웨어로 구축하는 중앙집중식 오류 처리
Next.js SSR 환경에서 HOC 패턴과 미들웨어 헤더 전파를 활용하여 분산된 오류 처리를 중앙집중화하고 일관된 사용자 경험을 구현한 과정을 다룹니다.
구형 Safari에서 모달 사용 시 스크롤 문제 해결하기
구형 Safari 브라우저에서 모달/오버레이 UI 사용 시 발생하는 배경 스크롤 문제를 document.body와 position: fixed를 활용하여 해결한 방법을 정리합니다.
결제 비밀번호 입력을 위한 숫자패드 컴포넌트 개발 과정
React와 Zustand를 사용하여 결제, 등록, 변경 등 다양한 시나리오에 대응하고, 보안까지 강화한 범용 Numpad 컴포넌트의 설계와 구현 과정을 자세히 살펴봅니다.
Next.js 프로젝트에 SEO 적용하기
Next.js에서 메타 태그 설정, 리소스 최적화, URL 구성, 링크 처리 등 검색 엔진 최적화(SEO)를 위해 점검했던 항목들을 정리합니다.
Next.js 프로젝트에 Docker 적용기
Next.js 프로젝트를 Docker로 멀티 스테이지 빌드하고, standalone output 기반으로 이미지 크기를 줄이며 환경별 `.env`를 주입하는 과정을 정리합니다.
setInterval 함수와 타이머 이슈
브라우저가 유휴 상태일 때 `setInterval`이 지연되어 타이머가 어긋나는 문제를 재현하고, focus 이벤트 기반으로 만료 시간을 재계산하는 방식으로 대응한 과정을 정리합니다.
env-cmd를 활용한 환경변수 설정
React 프로젝트에서 `env-cmd`로 환경별 `.env` 파일을 선택해 빌드 시점 환경 변수를 주입하고, API 주소를 안전하게 분리 관리하는 방법을 정리합니다.
React Query의 Hydrate란?
Next.js SSR 환경에서 React Query(TanStack Query)의 `Hydrate`/`dehydrate`를 활용해 서버에서 미리 받아온 데이터를 클라이언트 캐시에 주입하고, 중복 API 호출을 줄이는 방법을 정리합니다.