Focus / 작업 초점
Full-stack / Portfolio / Content
Core Problem / 핵심 문제
포트폴리오, 블로그, 개발 기록을 하나의 서비스로 구성
Stack / 주요 기술
Next.js, NestJS, TypeScript, Tailwind CSS, Supabase
Overview / 프로젝트 소개
IT'S SMI는 개인 블로그 및 포트폴리오 사이트입니다. Next.js 프론트엔드와 NestJS API 서버를 분리해 포트폴리오, 프로젝트 상세, 블로그 콘텐츠 작성/조회 흐름을 직접 운영할 수 있도록 구성했습니다.
Focus / 작업 초점
Motivation / 개발 목적
Architecture / 전체 구조
Frontend
Next.js App Router 기반의 포트폴리오, 프로젝트 상세, 게시글 목록/상세, 관리자 작성 화면을 담당합니다.
Backend
NestJS 서버로 posts, categories, tags, images API와 SupabaseService를 구성해 데이터 접근을 담당합니다.
Supabase
Auth, Database, Storage를 제공하며, 서버는 사용자 토큰을 전달받아 권한이 필요한 요청을 처리합니다.
Implementation / 주요 구현
Tech Decisions / 기술 선택
Next.js
App Router 기반으로 포트폴리오, 프로젝트 상세, 블로그 목록/상세 화면을 구성하고 서버 렌더링 데이터 조회 흐름을 만들었습니다.
NestJS
posts, categories, tags, images를 모듈 단위 API로 나누고 DTO 검증과 Supabase 연동을 백엔드 계층에서 처리하기 위해 사용했습니다.
TypeScript
프론트엔드와 백엔드를 같은 타입 기반 언어로 구성해 API 데이터 흐름과 관리 화면 구현의 안정성을 높였습니다.
Tailwind CSS
포트폴리오와 블로그 UI를 빠르게 구성하고 모바일/데스크톱 반응형 레이아웃을 일관되게 관리하기 위해 사용했습니다.
Supabase
Auth 토큰 기반 관리자 요청, 게시글/카테고리/태그 데이터 조회, Storage 이미지 업로드를 담당하는 데이터 기반으로 사용했습니다.
Retrospective / 배운 점
개인 사이트를 직접 운영하면서 포트폴리오, 블로그, 관리자 작성 도구를 하나의 서비스 흐름 안에 배치하는 경험을 쌓았습니다. 백엔드를 NestJS로 구성하면서 프론트엔드와 같은 TypeScript 기반으로 API 계약과 데이터 흐름을 맞추기 쉬워졌고, Supabase를 데이터 계층으로 두면서 인증, DB, 이미지 저장을 작은 규모의 서비스에 맞게 연결할 수 있었습니다.