Next.js 인증 페이지와 Proxy 접근 제어
인증된 사용자만 접근할 페이지가 생기면 요청 초기에 redirect할 수 있습니다. 하지만 Proxy에서 통과시켰다고 서버 데이터 권한 검증까지 끝난 것은 아닙니다.
책상 정리 용품 · 제휴
모아 보기이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
웹 화면과 서비스를 만드는
해비의 개발 기록
웹사이트 제작·운영과 개인 서비스, 자동화·AI 도구를 만들며 배운 내용과 문제 해결 과정을 정리합니다.
전체 글
Next.js Auth.js 로그인 세션 로그아웃
인증은 로그인 화면만 만드는 문제가 아닙니다. 서버에서 현재 사용자를 확인하고, 브라우저에서도 세션에 따라 UI를 바꾸고, 로그아웃 후 캐시와 화면을 정리해야 합니다.
Next.js MSW 2 Mock API 만들기
프론트엔드 일정은 백엔드 API가 완성될 때까지 기다릴 수 없는 경우가 많습니다. API 명세만 있다면 MSW로 요청을 가로채 가짜 응답을 만들고 UI 개발을 먼저 진행할 수 있습니다.
Next.js Server Component 데이터 조회와 Streaming
App Router의 Server Component는 서버에서 직접 비동기 데이터를 읽을 수 있습니다. 모든 데이터를 브라우저 useEffect로 가져올 필요가 없습니다.
Next.js loading error not-found 라우트 상태 처리
App Router는 페이지마다 로딩·오류·404 상태를 특수 파일로 분리할 수 있습니다. 사용자는 데이터가 늦거나 실패했을 때도 현재 상태를 이해할 수 있어야 합니다.
Next.js Intercepting Routes 모달 라우팅
Intercepting Routes를 사용하면 클라이언트 이동에서는 상세 화면을 modal로 보여 주고, URL을 직접 열거나 새로고침했을 때는 전체 상세 페이지를 보여 줄 수 있습니다.
Next.js Parallel Routes default tsx
Parallel Routes는 하나의 layout 안에 여러 독립 UI 영역을 동시에 렌더링하는 기능입니다. 본문 위에 modal slot을 함께 렌더링하는 구조가 대표적입니다.
Next.js Route Group Private Folder template tsx
App Router에서는 폴더가 URL 구조를 만들지만, 모든 폴더가 URL에 반영되는 것은 아닙니다. Route Group과 Private Folder를 이용하면 URL은 유지하면서 프로젝트 구조를 정리할 수 있습니다.
Next.js Server Component와 Client Component 구분
App Router에서 가장 먼저 이해해야 할 경계는 Server Component와 Client Component입니다. App Router의 컴포넌트는 기본적으로 서버에서 렌더링할 수 있고, state·이벤트·브라우저 AP…
Next.js로 TaskFlow 만들기: 38편 학습 과정 미리보기
React 과정에서 만든 TaskFlow는 브라우저 안에서 동작하는 SPA입니다.
React DevTools Profiler 사용법 리렌더링 측정 원인 찾기
React 화면이 느리다고 느껴질 때 가장 먼저 useMemo와 useCallback을 추가하는 것은 좋은 순서가 아닙니다. 먼저 어떤 상호작용에서 어떤 컴포넌트가 얼마나 렌더링되는지 측정해야 합니다.
React useActionState useOptimistic 비동기 액션 낙관적 UI
사용자가 작업을 완료 처리했을 때 서버 응답이 올 때까지 아무 변화가 없다면 UI가 느리게 느껴질 수 있습니다. 반대로 서버 성공 여부를 확인하지 않고 화면을 영구 변경하면 실패 시 데이터와 UI가 어긋납니다.
