✅ 배경 및 기존 문제
초기 프론트엔드에서는 이미지 업로드 시 클라이언트에서 직접 AWS S3에 업로드하는 방식을 사용했습니다. 이 방식은 업로드 Key가 프론트 코드 또는 네트워크 탭에서 노출될 수 있어 보안상 취약했습니다.
이를 개선하기 위해 presigned URL을 백엔드에서 받아서 S3에 업로드하는 방식으로 1차 개선을 완료했습니다.
하지만 여전히 presigned URL이 네트워크 탭을 통해 노출될 수 있는 보안 이슈에 대해 presigned URL을 클라이언트가 아닌 서버 측에서 처리하도록 아키텍처를 변경하게 되었습니다.
⚠️ 기존 시도 - Page Router 방식
기존에는 Next.js의 Page Router 방식에서 서버 API 라우트를 통해 presigned URL을 받아 처리하려 했습니다. 하지만 이 방식에서는 브라우저에서 선택한 File 객체를 서버로 직접 전달할 수 없는 한계가 있었습니다.
이를 해결하기 위해 FormData로 파일을 전달하는 접근을 시도했지만, Page Router에서 FormData를 파싱하고 처리하는 데 복잡하고 불편한 로직이 필요하다는 문제가 있었습니다.
✅ 개선 방향 - App Router 도입 및 타입스크립트 전환
이러한 문제를 해결하기 위해 Next.js의 App Router로 전환하였습니다.
App Router는 Next.js 13 이상부터 권장되는 방식이며, 서버 컴포넌트와의 통합, server actions, formData 처리 등 보다 직관적인 서버-클라이언트 연동 방식을 제공합니다.
App Router 환경에서는 server actions 또는 route handlers를 통해 FormData를 쉽게 처리할 수 있고, presigned URL을 통한 파일 업로드도 서버 측에서 안전하게 수행할 수 있습니다.
이번 구조 전환과 함께 TypeScript도 도입하여 전체 코드의 안정성과 개발 효율성을 강화했습니다.
✨ 기대 효과
presigned URL을 클라이언트에 노출하지 않음으로써 보안성 강화
App Router 도입으로 서버 측 파일 처리 로직을 명확하게 구현 가능
TypeScript 도입을 통해 정적 타입 검사를 통한 코드 안정성 확보
