Middleware — 요청 가로채기, 인증 게이트, A/B 테스트
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. Next.js Middleware가 실행되는 런타임 환경은?
💡 Next.js Middleware는 Edge Runtime에서 실행됩니다. 이는 사용자와 가까운 CDN 엣지에서 동작하여 응답 속도가 매우 빠르지만, Node.js 고유 API(fs, 일부 crypto 등)는 사용할 수 없습니다.
Q2. Middleware에서 URL을 변경하지 않고 다른 페이지의 콘텐츠를 보여주려면?
💡 `rewrite`는 브라우저 URL을 변경하지 않고 다른 경로의 콘텐츠를 렌더링합니다. A/B 테스트나 URL 정규화에 유용합니다. `redirect`는 브라우저 URL도 변경됩니다.
Q3. Middleware의 `matcher` 설정에서 정적 파일을 제외하는 이유는?
💡 JS, CSS, 이미지 등 정적 파일 요청마다 미들웨어가 실행되면 불필요한 연산으로 성능이 저하됩니다. `matcher`에서 `_next/static`, `favicon.ico` 등을 제외해 정적 파일은 바이패스하도록 설정하는 것이 좋습니다.
Q4. Edge Runtime에서 JWT를 검증할 때 권장되는 라이브러리는?
💡 `jose`는 Web Crypto API 기반으로 만들어진 JWT 라이브러리로 Edge Runtime에서 완전하게 동작합니다. `jsonwebtoken`은 Node.js crypto 모듈에 의존해 Edge에서 사용할 수 없습니다.
Q5. 미들웨어에서 해서는 안 되는 작업은?
💡 미들웨어(Edge Runtime)에서는 데이터베이스에 직접 접근할 수 없고, 해서도 안 됩니다. 미들웨어는 가벼운 로직(토큰 검증, 헤더 읽기, 쿠키 설정)만 처리해야 합니다. 무거운 권한 조회는 Server Component나 Route Handler에서 수행하세요.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.