1. 프로젝트 개요
UZU Dev는 개인 프로젝트와 블로그를 통합적으로 관리할 수 있도록 설계된 풀스택 웹 애플리케이션입니다. 프론트엔드는 Next.js(타입스크립트, TailwindCSS) 로 구축되어 있으며, 백엔드는 Express와 MongoDB(Mongoose) 기반 REST API를 제공합니다. 서비스는 Render와 Vercel을 통해 배포되었으며, 정적 자산은 GitHub Pages를 활용하여 효율적으로 관리하고 있습니다.
본 프로젝트는 단순한 정적 포트폴리오가 아니라, 데이터 중심의 동적 웹 서비스를 직접 설계하고 구현하면서 확장성과 유지보수성을 고려한 구조를 경험한 것이 핵심입니다.
2. 주요 기능
2.1 게시물 관리
- 프로젝트 및 블로그 게시물 CRUD (생성, 조회, 수정, 삭제)
- 카테고리/태그 기반 분류 및 검색
- 무한 스크롤(Infinite Scroll) 적용으로 대규모 데이터에서도 부드러운 사용자 경험 제공
2.2 사용자 경험
- 반응형 UI: 모바일, 태블릿, 데스크톱 환경 지원
- 다크 모드 / 라이트 모드 자동 전환
- 직관적인 내비게이션과 접근성 고려된 레이아웃
- GitHub Pages 연동을 통한 이미지 안정적 제공
3. 기술적 특징
- 타입 안정성: 전 구간 TypeScript 적용, 컴파일 타임 오류 최소화
- 보안 고려: 환경변수 기반 설정 관리, 토큰 기반 인증 지원 구조
- 데이터 모델링: Mongoose 스키마 설계를 통한 일관성 유지 및 인덱스 최적화
- 마크다운 파이프라인: unified/remark 기반의 Markdown → HTML 렌더링, XSS 방지를 위한 sanitize 적용
3.1 기술 스택
(1) Frontend
- Next.js
- TypeScript
- TailwindCSS
(2) Backend
- Node.js
- Express
- MongoDB (Mongoose)
(3) Infra
- Vercel (프론트엔드 배포)
- Render (백엔드 서버 배포)
- GitHub Pages (정적 자산 관리)
4. 프로젝트 구조
uzu-dev/
├── server/ # Express 백엔드
│ ├── models/ # Mongoose 스키마 정의
│ ├── routes/ # REST API 라우트
│ └── server.ts # 서버 진입점
├── client/ # Next.js 프론트엔드
│ ├── app/ # 페이지 및 레이아웃(App Router)
│ ├── components/ # UI 컴포넌트
│ ├── lib/ # API 유틸리티 및 데이터 fetch
│ └── public/ # 정적 파일
└── README.md # 프로젝트 문서
5. 개발 의의
이 프로젝트를 통해 단순 프론트엔드 개발을 넘어, 풀스택 아키텍처 전체 사이클을 경험했습니다. REST API 설계, 데이터베이스 모델링, 환경변수 기반 보안 설정, 다크/라이트 모드 UI 설계, 그리고 클라우드 배포까지 이어지는 과정을 직접 수행함으로써 실무에 가까운 워크플로우를 학습했습니다.
또한, 통합적인 서비스 구조를 설계하고 유지하면서 확장성·보안·성능 최적화 관점에서 고려해야 할 요소들을 체득할 수 있었습니다.