목록전체 글 (65)

dada's

💡중간학습 - RSC / middleware와 Axios 인터셉터

✅ 결론 먼저인터셉터 = API 요청 레벨 인증RSC / middleware = 페이지 접근 레벨 인증즉, 역할이 다르다.둘 중 하나만 있으면 구멍이 생김→ 둘 다 있어야 완전한 보안 + 좋은 UX✅ 각자의 역할 비교구분위치역할예시RSC / middleware페이지 요청 시 (서버)페이지 접근제어 (차단/리다이렉트)/tasks에 로그인 안 되어있으면 /loginAxios 인터셉터API 호출 시 (클라)토큰 만료 자동 갱신 & 재요청/tasks API에서 401 → refresh 후 다시 요청✅ 왜 둘 다 필요?1) RSC/middleware만 있다면?문제API 호출시 토큰 만료 → 새 로그인 필요 → UX 끊김2) 인터셉터만 있다면?문제로그인 안 된 사람이 /tasks 들어가면 화면 잠깐 보이고 리다이렉..
next.js 2025. 10. 30. 14:38
✅ Step 5-3 – 현재 사용자 정보(/me) 가져오기

✅ JWT 인증 학습 로드맵단계 내용 상태1쿠키 vs localStorage, 보안 개념✅ 완료2로그인 → 보호 페이지 → 자동 refresh → 로그아웃✅ 완료3middleware로 공통 보호✅ 완료4현재 사용자 정보(/me) 가져오기 (실무 핵심)⬅️ 지금 여기5상태 유지 + 헤더 UI 패턴⏳6오류 처리 UX (만료 알림/로그아웃 안내)이후지금 할 내용:서버에서 “현재 로그인된 사용자 정보” 가져와서 UI에 표시하기이게 중요한 이유 :로그인 상태 표시 (프로필, 로그아웃 버튼)서버가 토큰 검증 제대로 했는지 확인UI 렌더 전에 사용자 정보가 세팅되니까 UX 안정화실무 서비스는 대부분 /me API가 핵심Step 4: 현재 사용자 정보 가져오기 (RSC 방식)📌 우리가 만들 기능기능 목적API: /a..
next.js 2025. 10. 30. 14:32
✅ Step 5-2 – middleware 공통 가드

1) 기본 템플릿 (middleware.ts)// src/middleware.tsimport type { NextRequest } from 'next/server'import { NextResponse } from 'next/server'// ✅ 인증이 필요한 경로 패턴들 (정규식 or prefix)const PROTECTED = [ /^\/tasks(\/.*)?$/, // /tasks, /tasks/..., /tasks/1 등 /^\/projects(\/.*)?$/, // 예: 추가 보호 경로 // /^\/admin(\/.*)?$/, // 필요 시 주석 해제]// ✅ 로그인 페이지 경로const LOGIN_PATH = '/login'// ✅ 미들웨어 제외 대상(정적..
next.js 2025. 10. 30. 13:23
💡중간 학습/2. NextResponse / 쿠키 / 인증 구조, 3. NextRequest – 요청 데이터 다루기

✅ 2. NextResponse / 쿠키 / 인증 구조우리가 만든 로그인 API 안에 아래 코드 있었지?const res = NextResponse.json({ ... })res.cookies.set('access_token', 'mock-access', { httpOnly: true, path: '/' })이 부분이 실제로 인증을 만드는 핵심 역할이야.✅ NextResponse란?항목 설명역할API 응답을 생성하는 Next.js 객체비유Express의 res 역할기능JSON 응답, 쿠키 설정, 리다이렉트✅ 왜 쿠키를 여기서 설정?로그인 후 access_token과 refresh_token을 서버가 클라이언트 쿠키에 저장해줘야 하기 때문브라우저는 httpOnly 쿠키를 자동으로 인증에 포함시킨다JS에서는..
next.js 2025. 10. 29. 17:24
💡중간 학습/1. Next.js Route Handler 구조

✅ 시작 — 1. Next.js Route Handler 구조Route Handler는 Next.js App Router의 API 라우트 방식이야.📌 우리가 만든 경로:src/app/api/v1/auth/jwt/create/route.ts✅ 이 파일 하나가 아래 URL 하나를 의미:/api/v1/auth/jwt/create✅ 그리고 안에 있는 POST() 함수는 HTTP POST 요청 처리export async function POST(req: NextRequest) { // 로그인 처리 로직}✅ GET API가 필요하면 추가export async function GET() {}✅ DELETE, PUT도 동일export async function DELETE() {}export async functi..
next.js 2025. 10. 29. 16:52
이전 Prev 1 2 3 4 ··· 13 Next 다음