Middleware 이해하기
Middleware는 요청이 완료되기 전에 실행되는 코드입니다. 이를 통해 요청과 응답을 조작할 수 있으며, 특정 조건에 따라 리다이렉션, 응답 수정 등의 작업을 수행할 수 있습니다.
Next.js의 Middleware는 서버 측에서 실행되므로, 클라이언트가 페이지를 요청하기 전에 필요한 검증 작업을 미리 수행할 수 있습니다. 이러한 기능은 사용자 인증, 권한 관리, 로깅 등 다양한 용도로 활용될 수 있습니다.Middleware의 작동 방식
- 요청 처리: 클라이언트가 서버에 요청을 보낼 때 Middleware가 먼저 실행됩니다.
- 조건 확인: 요청의 URL, 메서드, 헤더 등 다양한 조건을 확인합니다.
- 응답 조작: 조건에 맞는 경우, 요청을 수정하거나 리다이렉션을 수행합니다.
이러한 방식으로 Middleware를 사용하면, 사용자 인증과 같은 중요한 로직을 일원화하여 관리할 수 있어 코드의 가독성과 유지보수성을 높일 수 있습니다.
| 단계 | 설명 |
|---|---|
| 1. 요청 처리 | 클라이언트가 서버에 요청을 보냅니다. |
| 2. 조건 확인 | 요청의 URL, 메서드, 헤더 등 다양한 조건을 확인합니다. |
| 3. 응답 조작 | 조건에 맞는 경우, 요청을 수정하거나 리다이렉션을 수행합니다. |
로그인 페이지 리다이렉션 구현하기
로그인 페이지로의 리다이렉션은 웹 애플리케이션에서 가장 기본적인 사용자 인증 방식 중 하나입니다. 사용자가 인증되지 않은 상태에서 보호된 페이지에 접근하려고 할 때, 로그인 페이지로 리다이렉션하는 로직을 Middleware를 통해 간단하게 구현할 수 있습니다.
프로젝트 구조 설정
Next.js 프로젝트의 구조는 크게 두 가지 방식으로 나눌 수 있습니다. /pages와 /app 디렉토리입니다.
/middleware.ts 또는 /middleware.js 파일을 프로젝트 루트에 생성하여 Middleware 기능을 구현할 수 있습니다.
Middleware 코드 작성
Middleware를 작성하기 위해서는 요청 헤더에서 쿠키를 확인하고, 토큰의 존재 여부를 판단합니다. 다음은 간단한 Middleware 예제입니다.
```javascript import { NextResponse } from 'next/server';
export function middleware(request) { const token = request.cookies.get('token');
// 토큰이 없으면 로그인 페이지로 리다이렉트
if (!token) {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();
} ```
이 코드는 사용자가 요청한 페이지에 대해 쿠키에서 token 값을 가져와 존재 여부를 확인합니다. 만약 token이 없다면, 로그인 페이지로 리다이렉트하고, 존재한다면 요청을 계속 진행합니다.
| 변수 | 설명 |
|---|---|
| token | 클라이언트 쿠키에서 가져온 인증 토큰 |
| request | 클라이언트의 요청 정보를 담고 있는 객체 |
| NextResponse | Next.js의 응답 처리 메서드 |
리다이렉션 로직의 강화
위의 기본적인 리다이렉션 로직을 강화하기 위해 추가적인 조건을 설정할 수 있습니다. 예를 들어, 사용자가 특정 페이지에 접근할 때만 리다이렉션하도록 설정할 수 있습니다.
이를 위해matcher를 사용하여 특정 경로에 대해서만 Middleware가 실행되도록 설정할 수 있습니다.
matcher 활용하기
matcher를 사용하면, 특정 경로에 대해 Middleware를 적용할 수 있습니다. 예를 들어, /protected 경로에 접근할 때만 Middleware가 작동하도록 설정할 수 있습니다.
javascript
export const config = {
matcher: ['/protected/:path*'], // /protected 경로에만 Middleware 적용
};
이렇게 설정하면, /protected 경로에 접근할 때만 Middleware가 실행되어 리다이렉션 여부를 결정합니다.
| 속성 | 설명 |
|---|---|
| matcher | Middleware가 적용될 경로를 설정하는 속성 |
| :path* | 하위 경로를 포함하여 모든 요청을 의미 |
사용자 경험 개선
Middleware를 활용하여 로그인 페이지로의 리다이렉션을 구현함으로써, 사용자는 500 에러 페이지를 경험하지 않고 매끄럽게 로그인 페이지로 전환될 수 있습니다. 이는 사용자 경험을 대폭 개선하는 중요한 요소입니다.
에러 페이지 방지
기존에는 인증되지 않은 사용자가 보호된 페이지에 접근할 경우, API 호출이 실패하면서 500 에러 화면이 노출되는 문제가 있었습니다. Middleware를 사용하여 이러한 문제를 사전에 방지할 수 있습니다.
사용자가 인증되지 않은 경우, API 호출을 방지하고 즉시 로그인 페이지로 리다이렉션하게 되니, 사용자에게 불필요한 에러 화면을 노출하지 않게 됩니다.| 개선 사항 | 설명 |
|---|---|
| 에러 화면 방지 | 인증되지 않은 사용자가 에러 페이지를 보지 않도록 함 |
| 사용자 경험 향상 | 매끄러운 리다이렉션으로 사용자 경험을 개선 |
결론
Next.js 14에서 도입된 Middleware 기능은 로그인 페이지 리다이렉션을 포함한 다양한 사용자 인증 로직을 간편하게 구현할 수 있게 도와줍니다. 요청 처리 전에 코드가 실행되어 사용자 인증을 확인하고, 필요한 경우 리다이렉션을 수행함으로써 사용자 경험을 개선할 수 있습니다.
Middleware의 다양한 기능을 알아보고 활용함으로써, 더욱 안정적이고 효율적인 웹 애플리케이션을 개발할 수 있습니다. 이와 같이 Next.js의 Middleware를 활용하면, 인증뿐만 아니라 다양한 비즈니스 로직을 효과적으로 관리할 수 있습니다.앞으로도 Middleware의 기능을 더욱 확장하여 다양한 상황에 맞는 처리를 구현할 수 있도록 노력해야겠습니다.
