React & Next.js

Next.js 미들웨어 이해하기

0

미들웨어란 무엇인가요?

Next.js는 React 기반의 서버 사이드 렌더링(SSR)을 지원하는 프레임워크로, 웹 애플리케이션을 더 빠르고 효율적으로 만들 수 있게 도와줍니다. 이 과정에서 중요한 역할을 하는 것이 바로 미들웨어(middleware)입니다. 미들웨어는 클라이언트의 요청이 서버에 도달하기 전에 실행되는 코드로, 요청을 가로채고 필요한 작업을 수행할 수 있습니다.

미들웨어는 사용자의 요청을 확인하고, 수정하거나 요청의 흐름을 제어하는 데 사용됩니다. 예를 들어, 사용자가 로그인이 필요한 페이지에 접근하려고 할 때 로그인 상태를 확인하고, 로그인이 되어 있지 않으면 로그인 페이지로 리다이렉션하는 등의 작업을 수행할 수 있습니다.

미들웨어의 주요 용도

  • 사용자 인증: 특정 페이지에 접근하려는 사용자가 로그인되어 있는지 확인합니다.
  • 로그 기록: 요청 정보를 기록하여 나중에 분석하거나 디버깅할 수 있습니다.
  • 리다이렉션: 특정 조건에 따라 사용자를 다른 페이지로 리다이렉션할 수 있습니다.
  • 헤더 설정: 보안 헤더나 기타 응답 헤더를 설정할 수 있습니다.

Next.js에서 미들웨어 사용 방법

미들웨어를 정의하기 위해 `src` 폴더 아래에 `middleware.ts` 파일을 생성합니다. 이 파일에서 미들웨어의 로직을 작성하고, `config` 객체를 사용하여 미들웨어가 적용될 경로를 설정합니다.

예제 코드

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(req: NextRequest) {
  console.log('Request URL:', req.url);
  console.log('Headers:', req.headers);

  const isAuthenticated = checkAuthentication(req);
  if (!isAuthenticated) {
    console.log('User not authenticated, redirecting to login');
    return NextResponse.redirect('/login');
  }

  return NextResponse.next();
}

function checkAuthentication(req: NextRequest): boolean {
  // 실제 인증 로직 구현
  return true;
}

export const config = {
  matcher: ['/protected/:path*'], // '/protected' 경로와 그 하위 경로에 대해 미들웨어 실행
};

이 코드는 `/protected` 경로 아래의 모든 요청에 대해 미들웨어를 실행합니다. 사용자가 인증되지 않은 경우 로그인 페이지로 리다이렉션합니다.

미들웨어 디버깅 방법

미들웨어를 디버깅하려면 다양한 방법을 사용할 수 있습니다. 다음은 몇 가지 효과적인 방법들입니다.

1. console.log 사용

가장 간단한 방법은 `console.log`를 사용하여 요청 객체나 상태를 출력하는 것입니다.

export function middleware(req: NextRequest) {
  console.log('Request URL:', req.url);
  console.log('Headers:', req.headers);
  
  // ... 나머지 코드
}

2. Node.js 디버거 사용

Node.js 디버거를 사용하여 코드를 단계별로 실행하고 상태를 확인할 수 있습니다. `package.json` 파일에 디버그 스크립트를 추가한 후 실행합니다.

"scripts": {
  "dev": "next dev",
  "debug": "node --inspect-brk ./node_modules/.bin/next dev"
}
npm run debug

3. VS Code 디버깅 설정

Visual Studio Code에서 디버깅을 쉽게 설정할 수 있습니다.

`.vscode/launch.json` 파일을 생성하거나 수정합니다.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Next.js",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "debug"],
      "port": 9229,
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

VS Code에서 디버그 탭으로 이동하여 `Next.js` 설정을 선택하고 디버그를 시작합니다.

4. Custom Logging Library 사용

더 복잡한 애플리케이션에서는 Winston, Bunyan 같은 로깅 라이브러리를 사용하여 로그를 남길 수 있습니다. 예를 들어, Winston을 사용하여 로그를 기록할 수 있습니다.

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import winston from 'winston';

const logger = winston.createLogger({
  level: 'info',
  format: winston.format.json(),
  transports: [
    new winston.transports.Console(),
    new winston.transports.File({ filename: 'combined.log' }),
  ],
});

export function middleware(req: NextRequest) {
  logger.info(`Request URL: ${req.url}`);
  logger.info('Headers:', req.headers);

  const isAuthenticated = checkAuthentication(req);
  if (!isAuthenticated) {
    logger.warn('User not authenticated, redirecting to login');
    return NextResponse.redirect('/login');
  }

  return NextResponse.next();
}

function checkAuthentication(req: NextRequest): boolean {
  // 인증 로직
  return true;
}

export const config = {
  matcher: ['/protected/:path*'],
};

결론

Next.js에서 미들웨어는 웹 애플리케이션의 요청을 제어하고 보호하는 강력한 도구입니다. 미들웨어를 사용하여 사용자 인증, 로그 기록, 리다이렉션, 헤더 설정 등 다양한 작업을 수행할 수 있습니다. 또한 `console.log`, Node.js 디버거, VS Code 디버깅, 그리고 커스텀 로깅 라이브러리를 활용하여 효과적으로 디버깅할 수 있습니다.

이 글이 Next.js 애플리케이션에서 미들웨어를 설정하고 디버깅하는 데 도움이 되기를 바랍니다. Next.js의 미들웨어 기능을 잘 활용하여 더욱 안전하고 효율적인 웹 애플리케이션을 개발해 보세요!

답글 남기기