🚀 Flutter Web + NestJS 풀스택 포트폴리오 프로젝트 개요 및 기술 스택 선택

포트폴리오 사이트는 개발자의 경험과 기술력을 보여주는 중요한 도구입니다.
이번 프로젝트에서는 Flutter Web을 활용해 부드럽고 인터랙티브한 프론트엔드를 구축하고,
NestJS + PostgreSQL + Prisma 조합으로 확장성과 유지보수성이 뛰어난 백엔드를 설계합니다.

이 글에서는 프로젝트의 개요와 전체적인 기술 스택을 선택한 이유를 정리합니다.

✅ 1. 프로젝트 목표 및 컨셉

🔹 프로젝트 목표

Flutter Web의 UI/UX 장점을 살린 반응형 포트폴리오 사이트 제작
NestJS 기반 API 서버를 구축하여 데이터 관리
PostgreSQL + Prisma ORM을 사용한 데이터베이스 설계
CI/CD 자동화 및 클라우드 배포 최적화
SEO 적용 및 검색 최적화된 블로그 시스템 추가

🔹 타겟 오디언스

채용 담당자: 기술력과 프로젝트를 한눈에 확인
개발자 커뮤니티: 코드 및 기술 공유
클라이언트: 프리랜서 개발 의뢰 가능

✅ 2. 기술 스택 선택

🔹 프론트엔드 (Flutter Web)

기술 선택 이유

Flutter Web	빠른 개발, 동일 코드로 모바일과 웹 대응 가능
Dart	Flutter의 기본 언어, 최적화된 UI 구현 가능
go_router	직관적인 라우팅 및 URL 관리 지원
dio + retrofit	API 요청을 쉽게 관리할 수 있는 네트워크 라이브러리
freezed + json_serializable	데이터 모델링 및 API 응답 파싱을 위한 강력한 도구

🔹 백엔드 (NestJS + Prisma + PostgreSQL)

기술 선택 이유

NestJS	TypeScript 기반의 구조화된 백엔드 프레임워크
Prisma ORM	직관적인 데이터 모델링 및 마이그레이션 지원
PostgreSQL	강력한 관계형 데이터베이스, Prisma와 높은 호환성
JWT 인증	보안이 강화된 사용자 인증 방식
Swagger	API 문서 자동 생성

🔹 배포 및 인프라

기술 선택 이유

Vercel	백엔드 서버리스 배포 (NestJS)
Railway	PostgreSQL 클라우드 DB 호스팅
Firebase Hosting / Netlify	Flutter Web 정적 사이트 배포
GitHub Actions	CI/CD 자동화

✅ 3. 프로젝트 아키텍처 설계

Flutter Web과 NestJS 백엔드는 API 중심의 클라이언트-서버 구조로 동작합니다.

graph TD;
    User-->Flutter Web;
    Flutter Web-->NestJS API;
    NestJS API-->PostgreSQL;
    NestJS API-->Cloud Storage;
    PostgreSQL-->NestJS API;
    Firebase/Netlify-->Flutter Web;
    Vercel-->NestJS API;

Flutter Web → NestJS API를 통해 데이터 요청
NestJS API → PostgreSQL에서 데이터 조회 및 처리
Flutter Web 배포: Firebase Hosting or Netlify
NestJS API 배포: Vercel (Serverless)

✅ 4. 데이터 모델 설계 개요

프로젝트에서는 Prisma ORM을 활용하여 데이터 모델을 설계합니다.

model Project {
  id        String   @id @default(uuid())
  title     String
  description String
  techStack  String[]
  githubUrl String
  liveUrl   String?
  createdAt DateTime @default(now())
}

Projects: 프로젝트 목록
Blogs: 블로그 게시글
Skills: 기술 스택
Users: 사용자 정보

이 데이터 모델을 기반으로 Prisma를 활용하여 NestJS API와 연동합니다.

✅ 5. 다음 단계

Flutter Web + NestJS 프로젝트 초기 설정
NestJS에서 Prisma를 이용한 DB 연결
Flutter Web에서 API 연동