Chaeuda | 채우다

Project Images

My Tasks

• AWS IAM 권한 관리 및 Route 53 설정
• 토큰(쿠키) 기반 인증 및 미들웨어 설정
• Naver Map 활용한 매물 지도 시각화
• Socket을 이용한 실시간 채팅 기능 구현

Technologies Used

Code Highlight

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

export const middleware = (req: NextRequest) => {
  const refreshToken = req.cookies.get('refreshToken');

  if (
    !refreshToken &&
    (req.url.includes('/create') || req.url.includes('/chat') || req.url.includes('/mypage'))
  ) {
    return NextResponse.redirect(new URL('/auth/signIn', req.url));
  }

  if (refreshToken && (req.url.includes('/auth/signIn') || req.url.includes('/auth/signUp'))) {
    return NextResponse.redirect(new URL('/mypage', req.url));
  }

  return NextResponse.next();
};

export const config = {
  matcher: ['/create/:path*', '/chat/:path*', '/mypage/:path*', '/auth/signIn', '/auth/signUp'],
};

사용자의 인증 상태에 따라 특정 페이지 접근을 제한하는 Next.js Middleware를 작성하였으며, 토큰 기반 리다이렉션 로직을 구현하여 보안 및 사용자 경험을 개선했습니다.

Challenges & Solutions

Key Learnings

• 미들웨어를 활용하여 인증 상태에 따른 페이지 접근을 제어하고, NextResponse로 요청 흐름을 관리하는 방법 학습
• Zustand 라이브러리를 사용한 전역상태관리
• Socket의 Handshaking 과정을 이해하고, 이벤트 기반 실시간 데이터 송수신 및 상태 동기화 구현 경험