미들웨어란(feat. Next.js)

Next.js로 프로젝트를 수행하고 있고 미들웨어를 이용해서 리다이렉트를 처리하면서 미들웨어에 대해 좀 더 자세히 알고 싶어졌다. 그래서 정리해 본 내용.

미들웨어의 개념

"요청(Request)과 응답(Response) 사이에서 동작하는 중간 처리 로직"

즉, 클라이언트 → 서버로 가는 요청을 가로채서 그 사이에서 무언가를 처리하고, 흐름을 제어하거나, 요청을 조작하는 역할을 하는 것

여기서 궁금한 점, “요청과 응답 사이”라고 했는데 요청이 오면 그 요청에 대해 뭔가를 처리해서 응답으로 넘기는 건 알겠다.

 

그러면 ‘응답’에 대해서도 처리 후 반환이 가능한가?

미들웨어는 요청(Request)과 응답(Response) 모두를 가로채고 다룰 수 있다.

즉,

[클라이언트 요청] → ▶ [미들웨어 1] → [미들웨어 2] → [핸들러] →
                   ← [미들웨어 2] ← [미들웨어 1] ← [응답 반환]

 

이런 구조이기 때문에 "미들웨어 → 핸들러 → 미들웨어 → 클라이언트"

요청 전에도, 응답 후에도 끼어들 수 있다는 거다.

 

Express.js기준으로 코드의 예로 들어 보면

// 미들웨어 1 - 요청과 응답을 둘 다 조작 가능
app.use((req, res, next) => {
  console.log('요청 시간:', Date.now()); // 요청 처리
  const oldSend = res.send;

  // 응답 가로채기: send를 오버라이드
  res.send = function (body) {
    console.log('응답 바디:', body); // 응답 직전 가로채기
    return oldSend.call(this, body);
  };

  next();
});

결과 흐름:

• 요청 오기 전: console.log('요청 시간')
• 요청 핸들링 끝나고 → 응답 보내기 전: console.log('응답 바디')

그.러.나 Next.js의 미들웨어는 요청에 대해서만 동작한다.

Next.js의 Edge Middleware는 요청(Request)에 대해서만 동작

즉, 응답(Response) 은 가공할 수 없음

export function middleware(req) {
  // ✅ 요청을 보고 리다이렉트하거나 허용
  // ❌ res에 body 추가하거나 응답 내용을 수정할 수는 없음
  return NextResponse.redirect(...)
}

✅ 요청 가로채기, 리다이렉트, 헤더 설정, 쿠키 체크는 가능

❌ 응답의 HTML, JSON을 조작하는 건 불가능

 

현재 프로젝트에서 미들웨어를 통해 쿠키에 있는 토큰을 디코딩해서 ‘사용자 역할’과 ‘프로필 작성 여부’등을 통해 리다이렉팅(라우팅 가드)을 하고 있다.

이전 Next.js 프로젝트에서는 클라이언트에서 모든 리다이렉트를 처리했어서 이번 프로젝트도 그렇게 적용을 했었는데 딜레이나 깜박임(이전 화면이 잠깐 보이는 등)이 너무 심하게 느껴져서 다른 방법을 알아보던 중 미들웨어를 통한 처리에 대해 알게 됐다.

그로 인해 인증 방식도

• 토큰(액세스, 리프레시)을 로컬 스토리지에만 저장 후 헤더에 탑재하는 방식에서,
• 액세스 토큰은 로컬 스토리지에 저장, 리프레시 토큰은 쿠키를 이용하는 하이브리드 방식으로 변경했다.

그 과정에서 토큰에 여러 가지 정보도 담게 되고 여러 가지 유저 인증 방식을 적용해보면서 장단점 또한 알게 됐다.

이 부분은 별도의 글에서 한 번 다뤄보고자 한다.

일단 미들웨어에 대한 내용은 오늘 여기까지.

요약

항목 요청 처리 응답 가로채기 설명

Express 등 일반 백엔드 미들웨어	✅	✅	요청도, 응답도 가로채서 가공 가능
Next.js middleware.ts (Edge Middleware)	✅	❌	요청만 조작 가능, 응답은 못 만짐
Axios interceptors (클라이언트)	✅	✅	클라이언트에서도 요청/응답 둘 다 가능

미들웨어 사용 사례들

환경 미들웨어의 위치 예시

백엔드 (Express.js)	app.use(middleware)	로그 기록, 인증 토큰 확인, 에러 핸들링
Next.js 서버	middleware.ts	요청 전 유저 검사, 리다이렉트 처리
프론트엔드 (Axios)	axios.interceptors	요청에 토큰 추가, 에러 응답 통일
Redux	applyMiddleware()	비동기 처리 (예: redux-thunk, redux-saga)

---