프로젝트 페이지 로딩 중...
프로젝트 페이지 로딩 중...
Next.js + NestJS 기반 풀스택 블로그 플랫폼 (모노레포)
포트폴리오와 블로그를 겸하는 풀스택 웹 플랫폼입니다. pnpm + Turborepo 기반 모노레포로 구성되어 블로그 프론트엔드(Next.js), 어드민 대시보드(Vite + React), REST API 서버(NestJS) 세 앱을 하나의 레포지토리에서 관리합니다.
프론트엔드부터 백엔드까지 직접 설계하고 구현하면서 모노레포 아키텍처, JWT 인증, ORM 기반 DB 접근, 리치 텍스트 에디터 통합 등 실무에서 활용되는 다양한 기술을 적용했습니다.
pnpm + Turborepo 기반 모노레포를 구성하여 blog(Next.js), admin(Vite + React), api(NestJS) 세 앱과 공유 패키지(@repo/ui, @repo/types 등)를 단일 레포지토리에서 관리합니다. 공유 타입과 컴포넌트를 패키지화하여 앱 간 일관성을 유지했습니다.
NestJS로 블로그 CRUD API를 구현했습니다. JWT 기반 인증(Access/Refresh Token), Passport.js 전략, Prisma ORM을 통한 PostgreSQL 데이터 접근, Supabase Storage를 활용한 이미지 업로드 기능을 갖췄습니다.
Next.js App Router 기반으로 블로그 목록/상세 페이지를 구현했습니다. Atomic Design 패턴(atoms → molecules → organisms → templates)을 적용하여 컴포넌트를 체계적으로 구성하고, Tanstack Query로 서버 상태를 관리했습니다.
Vite + React 기반 어드민 SPA를 구축했습니다. TanStack Router 파일 기반 라우팅, React Compiler 최적화, Tiptap 리치 텍스트 에디터를 통한 블로그 글 작성/수정/삭제 기능을 구현했습니다.
React Hook Form과 Zod를 조합하여 블로그 작성 폼의 유효성 검사를 구현했습니다. 스키마 기반 검증으로 런타임 안정성을 확보하고, 프론트엔드와 백엔드 간 타입을 @repo/types 패키지로 공유했습니다.
pnpm workspace와 Turborepo를 활용해 세 개의 앱(blog, admin, api)과 공유 패키지(@repo/ui, @repo/types, @repo/eslint-config 등)를 단일 레포지토리에서 관리합니다. 빌드 캐싱과 태스크 파이프라인으로 개발 생산성을 높였습니다.
NestJS로 블로그 플랫폼의 REST API 서버를 구현했습니다. 모듈형 아키텍처를 기반으로 인증, 블로그 CRUD, 파일 스토리지 기능을 분리하여 관리하며, Prisma ORM으로 PostgreSQL 데이터베이스에 접근합니다.