// Project2026년 6월 18일 · 5 min read
정적 블로그에 동적 기능 더하기 — GitHub Pages + Supabase Edge Function
서버가 없는 GitHub Pages 정적 블로그에 댓글·조회수·이모지 리액션·방명록을 붙였다. Supabase Edge Function을 백엔드로 쓰고, 익명이지만 식별 가능한 댓글·본인 제외 조회수·무료 운영까지 실제로 구축하며 내린 결정들을 정리했다.
Tag
#Next.js
18개의 글이 연결되어 있습니다.
// Project2026년 5월 20일 · 9 min read
운영 프로젝트의 axios 인터셉터 설정을 점검해봤다
토큰을 매번 헤더에 박는 코드를 걷어내려고 인터셉터를 들였는데, 점검해보니 store.subscribe로 토큰을 밀어 넣는 패턴과 인터셉터가 사실상 따로 놀고 있었다. 실제 프로젝트의 axios 설정을 진단하고 정리한 기록.
// React / Next.js2026년 5월 16일 · 10 min read
React와 Next.js에서의 동기와 비동기 — useEffect부터 Server Components까지
React 렌더링이 왜 동기인지부터 useEffect, Suspense, Server Components, Next.js fetch 캐시까지 React 생태계의 비동기 모델을 정리하고 실무에서 자주 만나는 함정을 함께 다룬다.
// React / Next.js2026년 5월 16일 · 7 min read
Redux Toolkit — 내가 정리한 표준 폴더 구조
Redux Toolkit + Next.js + redux-persist 환경에서 store/slice/selector/hook을 어떻게 나눠야 안전한지, 실제 프로젝트를 운영하며 정리한 표준 구조.
// React / Next.js2026년 5월 5일 · 10 min read
getServerSideProps와 getStaticProps — Pages Router 데이터 패칭 이해하기
Next.js Pages Router의 getServerSideProps와 getStaticProps가 언제 실행되고 왜 필요했는지, App Router에서는 어떤 방식으로 대체되는지 정리했다.
// React / Next.js2026년 5월 4일 · 4 min read
Next.js Proxy란 무엇인가 — middleware에서 proxy로 바뀐 이유
Next.js 16에서 middleware.ts가 proxy.ts로 바뀐 이유와 Proxy의 실행 위치, matcher, redirect, rewrite 사용 기준을 정리했다.
// React / Next.js2026년 5월 4일 · 4 min read
Next.js에서 SSE와 WebSocket은 Proxy로 처리해도 될까
Next.js Proxy가 일반 HTTP rewrite에는 적합하지만 SSE와 WebSocket 같은 장기 연결에는 Route Handler, custom server, gateway 분리가 필요한 이유를 정리했다.
// React / Next.js2026년 5월 3일 · 11 min read
Next.js App Router vs Pages Router — 최신 기준 비교
Next.js 16 기준으로 App Router와 Pages Router의 라우팅 구조, 데이터 패칭, 레이아웃, 서버 컴포넌트, API 작성 방식, 마이그레이션 기준을 비교했다.
// DevOps · Infra2026년 5월 2일 · 7 min read
Turborepo 모노레포 CI/CD 최적화 — GitLab CI 빌드를 Dockerfile 멀티스테이지로 옮기기
CI runner에서 빌드하던 구조를 Dockerfile 멀티스테이지(pruner → installer → runner)로 옮기면서 빌드 시간을 단축한 과정을 정리했다.
// Frontend2026년 4월 19일 · 3 min read
낙관적 업데이트 — Optimistic UI를 쓰는 이유와 롤백 패턴
서버 응답을 기다리지 않고 UI를 먼저 업데이트하는 Optimistic UI 패턴이 왜 좋고, 실패 시 어떻게 롤백하는지 React와 Next.js Server Actions 기준으로 정리했다.
// Frontend2026년 4월 19일 · 4 min read
URL을 상태로 쓰는 패턴 — searchParams로 필터·페이지네이션 관리하기
필터, 정렬, 페이지네이션 같은 UI 상태를 useState 대신 URL searchParams에 저장하면 뭐가 좋은지, Next.js App Router 기준으로 구체적인 패턴을 정리했다.
// JavaScript / TypeScript2026년 4월 19일 · 3 min read
env의 종류와 빌드·런타임 실행 시점 완전 정리
.env 파일 종류, NEXT_PUBLIC_ 접두사의 의미, 빌드 타임과 런타임에 어느 환경변수가 살아있는지 Next.js 기준으로 정리했다.
// JavaScript / TypeScript2026년 4월 19일 · 3 min read
.env는 어떻게 동작하는가 — process.env부터 Next.js 빌드 인라이닝까지
.env 파일을 Node.js가 직접 읽는 게 아니라는 사실부터, Next.js가 빌드 시 환경변수를 코드에 박아넣는 원리까지 — 동작 원리를 한 층씩 뜯어본다.
// Project2026년 4월 19일 · 10 min read
실무에서 SSE + Shared Worker를 도입하며 마주친 것들
실시간 알람 시스템을 SSE와 Shared Worker로 구축하면서 실제로 고민했던 것들 — Next.js Edge Runtime 문제, 배치 전략 설계, 재연결 정책, 탭 간 상태 동기화까지.
// React / Next.js2026년 4월 19일 · 4 min read
서버 컴포넌트를 쓰는 이유 — RSC가 해결하는 문제
React Server Components가 등장한 배경과 클라이언트 컴포넌트와의 차이, 실제로 어떤 기준으로 구분해서 써야 하는지 정리했다.
// Trouble Shooting2026년 2월 20일 · 1 min read
정적 배포를 고려할 때 피해야 할 블로그 구현 실수
정적 배포 환경에서 동적 의존성을 과하게 넣으면 초기 구현은 빨라도 장기 유지보수는 어려워진다.