Notebook

🟩 Portfolio-site 프로젝트

<aside> 💡

React와 NestJS 기반의 풀스택 포트폴리오 웹 애플리케이션 프로젝트 입니다.

</aside>

🚀 배포

• Frontend:

  Create Next App

• Backend:

• Database: Supabase PostgreSQL

📌 개요

🎯 목적

• NestJS 기반 API 서버와 Next.js 프론트를 연동하여 풀스택 구조 이해
• 방명록 및 댓글 기능 구현을 통한 CRUD 흐름 학습
• 일관된 API 응답 구조 설계를 통한 데이터 처리 흐름 이해

🛠️ 사용 기술

• Frontend: Next.js, React, TypeScript, TailwindCSS
• Backend: NestJS, Node.js, TypeORM, PostgreSQL (Supabase)
• Database: PostgreSQL (Supabase)

♻️ 환경

• VSCode

📌 주요 기능

• 방명록 작성 / 조회 / 삭제
• 댓글 작성 / 조회 / 삭제
• API 응답 구조 통일 (NestJS Interceptor 적용)
• 반응형 디자인

📌 문제 해결

✅ API 응답 구조 불일치 문제

<aside> 💡

각 API마다 응답 형태가 달라서 프론트에서 처리하기 어려움 발생

</aside>

⭕ NestJS Interceptor → 응답 형식 통일 ⭕ success, message, statusCode, data 구조로 일관성 유지

✅ 프론트-백엔드 데이터 연동 문제

<aside> 💡

API 호출 시 데이터 타입 및 구조 불일치로 오류 발생

</aside>

⭕ DTO 구조 명확하게 정의 ⭕ 프론트에서 사용하는 타입과 맞춰 데이터 구조 통일

🔴🟡🟢 결론

<aside> 📌

프론트엔드와 백엔드를 연동하는 전체 흐름을 이해할 수 있었으며, API 설계와 데이터 구조의 일관성이 중요하다는 것을 경험했습니다.

NestJS의 Interceptor를 활용하여 응답 구조를 통일함으로써 유지보수성과 확장성을 고려한 설계를 경험할 수 있었습니다.

또한, NestJS의 구조적인 아키텍처를 통해 유지보수성과 확장성을 고려한 백엔드 설계를 경험했습니다.

</aside>