프론트엔드 개발

프론트엔드 프로덕션 환경 로그 관리: Next.js에서 console.log 비활성화 모범 사례

이 글에서는 Next.js 프로젝트에서 프로덕션 환경의 console.* 로그를 비활성화하는 세 가지 방법(compiler.removeConsole, TerserPlugin pure_funcs, Worker 수동 처리)과 세 가지 프론트엔드 프로젝트(frontend-blog / admin-blog / admin-next)의 실제 적용 사례를 체계적으로 정리합니다.

Next.js 뒤로 가기 네비게이션 완벽 가이드: 스크롤 위치 복원, URL 파라미터 유지 및 iOS Safe Area

이 글에서는 Next.js App Router에서 뒤로 가기 네비게이션 시 스크롤 복원이 실패하는 세 가지 근본 원인——sessionStorage 조건 오판, URL 파라미터 손실, React Strict Mode 이중 마운트——과 함께 iOS Safari Safe Area 깜빡임 및 CategoryFilter 탭 깜빡임 문제를 심층 분석합니다.

Quill 리치 텍스트 비디오를 HLS 적응형 스트리밍으로 임베딩: 프론트엔드 교체 완전 구현

이 글에서는 블로그 시스템에서 Quill 리치 텍스트 편집기에 임베딩된 MP4 비디오 태그를 기사 상세 페이지에서 자동으로 HLS m3u8 적응형 스트리밍으로 교체하는 방법을 자세히 설명합니다. 백엔드 변환 파이프라인, meta.contentVideo 다중 비디오 저장, 프론트엔드 Markdown/HTML 이중 경로 교체, IndexedDB 캐시 계층 수정, 그리고 실제 개발 중 발생한 6가지 주요 버그와 수정 방안을 다룹니다.

BlurhashImage — SSR 안전한 BlurHash 플레이스홀더 컴포넌트와 "텍스트처럼 부드러운" 렌더링 전략

Zustand + Cookie Storage — SSR 인증 지속화 전략

**소스 코드**: [`auth.store.ts`](apps/frontend-blog/src/lib/stores/auth.store.ts) (357L) · [`cookie-storage.ts`](apps/frontend-blog/src/lib/stores/cookie-storage.ts) (171L) · [`cookie-manager.ts`](apps/frontend-blog/src/lib/utils/cookie-manager.ts)

React Query 플랫폼 어댑터: 세 가지 환경 통합 데이터 요청 및 자동 폴백 전략

React 컴포넌트 간 HLS 비디오 조정: 클릭 재생 + 단일 비디오 상호 배제

Ein realer Fall von Frontend-Performance-Optimierung. Durch eine `CustomEvent`-Event-Bus-Architektur kombiniert mit Lazy-Loading wird das Problem der Bandbreitenkonkurrenz durch zahlreiche Videostreams beim Laden der Startseite vollständig gelöst.

관리 백엔드 대용량 파일 업로드 최적화: Multer OOM에서 사전 서명 URL 직접 전송까지의 삽질 기록

Next.js 제로 스켈레톤 스크린 최적화 실전: ISR + 4계층 아키텍처 + 플랫폼 인식 캐싱

Next.js 3가지 모드 통합 Fetcher 어댑터 레이어: CSR/SSG/SSR 원클릭 전환 데이터 요청 아키텍처

Next.js App Router를 위해 설계된 범용 데이터 요청 레이어로, 하나의 코드가 브라우저, 빌드 시점, 서버 세 가지 환경에서 자동으로 적응하며, 쓰기 작업은 서버에서 자동으로 건너뛰고, 캐시 전략은 환경에 따라 지능적으로 선택됩니다.