웹 개발에서 살아남기

Next.js App Router에서 layout.tsx와 template.tsx는 둘 다 페이지를 감싸는 역할을 하지만, 상태 유지(State Persistence) 여부에서 결정적인 차이가 있다. 페이지 이동 시 상태가 유지되는 레이아웃과 달리, 매번 컴포넌트를 새로 마운트하여 상태를 초기화하는 템플릿의 동작 원리와 실무 사용 사례(애니메이션, 로깅)를 완벽하게 정리한다. Next.js Layout과 Template 차이: 페이지 이동 시 상태가 초기화되는 이유Next.js 13 이상(App Router)으로 마이그레이션을 하다 보면 layout.tsx 외에 template.tsx라는 낯선 파일을 마주하게 된다. 둘 다 하위 페이지(page.tsx)를 감싸는 래퍼(Wrapper) 역할을 한다는 점에..

Next.js App Router 환경에서 사이트가 검색 엔진에 노출되지 않는다면 robots.ts와 sitemap.ts 설정이 누락되었을 가능성이 높다. 최신 Next.js 공식 문서를 기반으로 검색 봇별(User-Agent)로 접근 권한을 다르게 설정하는 방법과 동적 사이트맵 생성 전략, 그리고 라우트 핸들러의 캐싱 동작 원리를 완벽하게 정리한다. Next.js 사이트 검색 노출 안 될 때: 최신 robots.ts와 sitemap.xml 설정법 (App Router)열심히 만든 Next.js 사이트가 구글이나 네이버에 검색되지 않는다면 가장 먼저 확인해야 할 것은 "검색 봇을 위한 초대장"이다. 아무리 좋은 콘텐츠라도 크롤러가 들어올 문(robots.txt)을 열어주고 지도(sitemap.xml)를..

Next.js 개발자가 가장 흔하게 마주치지만, 디버깅하기 까다로운 Hydration Failed 에러. 서버 사이드 렌더링(SSR) 결과와 클라이언트 사이드 렌더링(CSR) 결과가 불일치할 때 발생하는 이 문제의 대표적인 3가지 원인(잘못된 HTML 중첩, 비결정적 데이터, 브라우저 API 사용)과 근본적인 해결책을 정리한다. Next.js Hydration Error 완벽 가이드: 텍스트 불일치부터 잘못된 HTML 중첩까지Next.js를 사용하다 보면 콘솔창을 빨갛게 물들이는 무시무시한 에러를 마주하게 된다.Error: Text content does not match server-rendered HTML.Warning: Expected server HTML to contain a matching ..

Next.js(App Router)에서 클라이언트 컴포넌트 내부로 서버 컴포넌트를 직접 import 할 수는 없지만, children 패턴을 사용하면 배치가 가능하다. 이 패턴이 작동하는 핵심 원리인 RSC Payload 직렬화와 렌더링 실행 시점의 차이를 기술적으로 분석한다. Next.js: 클라이언트 컴포넌트 안에 서버 컴포넌트 넣기 (Composition 패턴의 원리)Next.js의 App Router를 사용하다 보면 딜레마에 빠질 때가 있다. 애니메이션이나 클릭 이벤트를 위해 최상위 래퍼를 클라이언트 컴포넌트('use client')로 만들었는데, 그 자식으로 DB에 직접 접근하는 서버 컴포넌트를 넣고 싶은 경우다.공식 문서를 보면 "클라이언트 컴포넌트에서 서버 컴포넌트를 import 할 수 없다..

Next.js 프로젝트를 GitHub Pages에 정적으로 배포하기 위한 핵심 설정인 브랜치 전략, next.config.js 설정, 그리고 GitHub Actions 워크플로우(YAML) 작성법을 상세히 정리한다. 실무에서 사용하는 스테이징(Staging) 배포 파이프라인 구축 과정을 담았다. Next.js: GitHub Actions 자동 배포 완벽 가이드 (2)이 글은 Next.js 배포 파이프라인 구축 시리즈의 2번째 글이다. 이전 글 보기이전 글에서 배포 전략과 개념을 잡았으니, 이제 실제로 코드를 작성하고 설정을 만질 차례다. GitHub Actions로 Next.js를 정적 빌드(SSG)해서 GitHub Pages에 띄우는 과정은 크게 3단계로 나뉜다.이 과정만 따라오면 push 한 번으로 ..

Next.js 프로젝트를 Vercel이 아닌 GitHub Pages로 배포해야 하는 상황과 정적 사이트 생성(SSG)의 개념을 정리한다. 특히 GitHub Repository 설정에서 'Deploy from a branch'와 'GitHub Actions' 옵션의 차이를 명확히 구분하고, 커스텀 배포를 위한 올바른 접근 방식을 설명한다. Next.js: GitHub Pages 무료 배포, Vercel 대신 쓰는 이유와 전략 (1)Next.js 프로젝트를 배포할 때 가장 먼저 떠오르는 선택지는 단연 Vercel이다. Next.js를 만든 회사인 만큼 SSR(Server Side Rendering), ISR 등 모든 기능을 설정 없이 완벽하게 지원하기 때문이다.하지만 비용 문제나 사내 보안 정책, 혹은 간단..