Next.js 커스텀 훅 설계: 프론트엔드 상태 관리 구조 잡기
프로젝트 개요 이 프로젝트는 실제 서비스 운영을 전제로 설계된 개인 포트폴리오이며, 인증, 사용자 데이터, 장바구니, 포인트, 대시보드, 공통 유틸, 입력 처리 등 반복적으로 사용되는 로직을 모두 Custom Hook으로…
더 읽기Next.js
Next.js App Router, Metadata API, Route Handler, Image 설정, Vercel 배포 오류처럼 실무에서 자주 만나는 Next.js 개발 주제를 정리한 카테고리입니다.
Firebase 초기화 구조: Next.js firebase.ts 설계 기준
주요 포인트 한눈에 보기 이 글은 완성된 포트폴리오 코드를 기준으로 Next.js + TypeScript + Firebase를 사용할 때 어떤 방식으로 제작되었는지 프로젝트를 분석합니다. 그 중 이번 챕터에서는 firebase.ts 초기화 …
더 읽기
Next.js 보안 패치 기준: v16.2.5 릴리스로 영향 범위 점검하기
Next.js 보안 패치는 버전만 올리고 끝내면 부족합니다 Next.js 보안 패치를 확인할 때는 “최신 버전으로 올리면 된다”에서 멈추지 않고, 내 프로젝트가 어떤 기능을 쓰는지와 릴리스 노트의 advisory가 어디에 해당하는지 함께 봐야 합니다. 이 글은 Next…
더 읽기
Next.js package.json: scripts dependencies 이해
이 글에서 정리하는 내용 Next.js 프로젝트를 처음 열었을 때 많이 보게 되는 scripts, dependencies, devDependencies, next dev/build/start를 초심자 기준으로 한 흐름으로 정리합니다. 용어를 따로 외우기보다 프로젝트가 …
더 읽기
Next.js 성능 최적화: 배포 플랫폼별 개선 기준
주요 포인트 한눈에 보기 Next.js는 서버 사이드 렌더링, 코드 분할 등 강력한 기능으로 웹 성능 최적화를 지원합니다. 이 글에서는 코드 및 배포 최적화 실제 사례를 분석하고, Vercel, AWS, Netlify 등 주요 배포 플랫폼을 비교하여 프로젝트에 맞는 최…
더 읽기
Next.js 렌더링 성능 최적화: React 화면이 느릴 때 기준
주요 포인트 한눈에 보기 React의 렌더링 성능은 사용자 경험(UX)과 검색 엔진 최적화(SEO)에 결정적인 영향을 미칩니다. Next.js는 서버 사이드 렌더링(), 정적 사이트 생성() 등 강력한 기능을 통해 React의 성능을 극대화하는 프레임워크입니다. 이 글…
더 읽기
Axios 사용법: React Next.js에서 API 요청 구조 잡는 법
주요 포인트 한눈에 보기 Axios는 단순히 HTTP 요청을 보내는 도구가 아니라, 프론트엔드 개발자가 복잡한 비동기 통신을 체계적으로 관리할 수 있게 돕는 강력한 라이브러리입니다. 자동 JSON 변환, 요청/응답 인터셉터, 공통 설정 관리에러 처리, 요청 취소 기능…
더 읽기
Next.js redirects 설정: next.config.js에서 URL 이동 처리
이 글에서 정리하는 내용 이 글에서는 제가 Next.js 프로젝트에서 next.config.js로 리다이렉트를 설정하는 방법을 정리합니다. 단순 주소 변경을 왜 설정 파일에서 처리하는지, redirects()를 기존 설정과 어떻게 합치는지, permanent 값이 30…
더 읽기
Next.js SEO SSR 적용법: 검색 노출과 렌더링 구조 잡기
핵심 요약 Next.js는 React 기반 프레임워크로, 서버 사이드 렌더링()을 통해 SEO에 유리한 구조를 제공합니다. 이 글에서는 SEO 최적화 방법, Tailwind CSS를 활용한 UI 구축, API 연동 및 상태 관리 기법을 다루며 실전에 도움이 되는 내용을…
더 읽기
프론트엔드 SEO 최적화: 검색 노출과 성능 개선 기준
주요 포인트 한눈에 보기 프론트엔드 성능 최적화는 사용자 경험(UX)과 SEO에 영향을 줍니다. 다만 “점수만 올리기”보다 측정 → 원인 파악 → 우선순위 → 개선 → 재측정 루프를 굴리는 것이 핵심입니다. Core Web Vitals는 LCP(로딩 체감…
더 읽기