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