메뉴를 보시려면 마우스를 올려주세요

VansDevBlog

마이크로서비스 기반 풀스택 블로그 프로젝트

VansDevBlog - 마이크로서비스 기반 풀스택 블로그

현재 배포 중인 개인 기술 블로그입니다. 마이크로서비스 아키텍처를 적용하여 6개의 독립적인 서비스로 구성되어 있습니다.

Deployed2024.12개인

기술 스택

Next.jsSpring BootKotlinNestJSDjangoPythonTypeScriptMariaDBMongoDBElasticsearchRedisAWS S3OpenAI APIJWTOAuth 2.0Tailwind CSSSharpStorybook

아키텍처

마이크로서비스 아키텍처로 각 서비스가 독립적으로 배포되며 직접 통신합니다.

마이크로서비스 아키텍처 다이어그램
각 서비스별 독립적인 배포 및 관리 (각 백엔드 서버 및 db, 프론트엔드 서버, 각 api 라우트 서버)
다양한 기술 스택 학습 및 적용 (Spring Boot, NestJS, Django, Next.js)
한 서버 장애 발생시에도 나머지 서비스는 정상 동작
서비스별 최적화된 데이터베이스 선택 (MariaDB, MongoDB, Elasticsearch)
기능별 코드 분리로 유지보수성 향상
개인 프로젝트 내에서 풀스택 개발 경험 확장

서비스 구성

Frontend

Frontend (Next.js)

React, Next.js 기반 프론트엔드

Next.jsReactTypeScriptTailwind CSSStorybook
기술 스택
Next.jsReactTypeScriptTailwind CSSStorybook
주요 기능
  • 타이핑 효과가 있는 인터랙티브 홈페이지
  • JWT 기반 사용자 인증 시스템
  • Tiptap 에디터를 활용한 마크다운 작성
  • 다국어 지원 (한국어/영어)
  • Storybook을 활용한 컴포넌트 문서화
  • 반응형 디자인
관련 문서
개발 가이드

프로젝트 개요 및 기능 소개

API 문서

Frontend API 엔드포인트 및 사용법

아키텍처

Redux를 사용한 상태 관리 구현 가이드

보안

OAuth 인증 구현 상세 가이드

Backend Services

Backend - User Service (Spring Boot)

Kotlin 기반 사용자 관리 및 인증 서비스

Spring BootKotlinMariaDBJWTSpring Security
기술 스택
Spring BootKotlinMariaDBJWTSpring Security
주요 기능
  • JWT 기반 사용자 인증 및 권한 관리
  • Spring Security를 활용한 보안 설정
  • MariaDB 기반 사용자 데이터 관리
  • CORS 지원 및 API 로깅
관련 문서
개발 가이드

개발 환경 설정 및 가이드

API 문서

아키텍처, 인증 시스템, 설계 원칙

REST API 명세 및 테스트 인터페이스

아키텍처

OAuth 도메인 설계 및 플로우 상세 가이드

데이터베이스 엔티티 구조 및 관계 정의

보안

JWT 인증, 권한 관리, API 보안 가이드

코드 문서

Kotlin 백엔드 클래스, 패키지, 함수 문서

Backend - Post Service (NestJS)

TypeScript 기반 게시글 관리 서비스

NestJSTypeScriptMongoDBMongooseJWT
기술 스택
NestJSTypeScriptMongoDBMongooseJWT
주요 기능
  • 게시글 CRUD 및 페이지네이션
  • MongoDB 기반 게시글 데이터 관리
  • JWT 기반 인증 가드
  • 테마 및 카테고리별 게시글 분류
관련 문서
개발 가이드

개발 환경 설정, 프로젝트 구조, 의존성 정보

API 문서

포스트 관리 API 문서

REST API 명세 및 테스트 인터페이스

코드 문서

NestJS 백엔드 클래스, 모듈, 인터페이스 문서

Backend - Search Service (Django)

Django 기반 고성능 검색 엔진 서비스

DjangoPythonElasticsearchRedisMongoDB
기술 스택
DjangoPythonElasticsearchRedisMongoDB
주요 기능
  • Elasticsearch 기반 전문 검색 (Full-text search)
  • Nori 한국어 분석기 지원으로 정확한 한국어 검색
  • 실시간 자동완성 및 검색 제안 시스템
  • Redis 캐시를 통한 고성능 검색 결과 제공
  • 카테고리, 태그, 날짜 범위 기반 스마트 필터링
  • 인기 검색어 트래킹 및 통계 수집
  • Swagger/OpenAPI 자동 문서화
  • 마이크로서비스 아키텍처로 독립적 배포
관련 문서
개발 가이드

Django Elasticsearch 기반 고성능 검색 서비스

환경 설정 및 설치 가이드

빠른 시작 가이드 및 기본 사용법

API 문서

Django REST Framework 기반 검색 API 문서

아키텍처

Elasticsearch 아키텍처 및 설계 원칙

API Services

OAuth Authentication Server

OAuth 2.0 기반 소셜 로그인 중간 서버

Next.jsTypeScriptOAuth 2.0JWTJOSE
기술 스택
Next.jsTypeScriptOAuth 2.0JWTJOSE
주요 기능
  • Google, Kakao OAuth 2.0 지원
  • CSRF 방지를 위한 state 파라미터 검증
  • OAuth 토큰 즉시 폐기로 보안 강화
  • 최소 정보 전달 (사용자 ID만)
  • 포괄적인 에러 핸들링
  • CORS 지원
관련 문서
개발 가이드

OAuth 중간 서버 개요 및 설정 가이드

API 문서

OAuth 인증 서비스 API 문서

코드 문서

OAuth 서비스 클래스, 모듈, 인터페이스 문서

Image Processing Service

AWS S3 기반 이미지 업로드 및 처리 서비스

Next.jsSharpAWS S3WebPTypeScript
기술 스택
Next.jsSharpAWS S3WebPTypeScript
주요 기능
  • Sharp 라이브러리를 사용한 WebP 변환
  • AWS S3 멀티파트 업로드
  • 이미지 품질 최적화 (80-85%)
  • 메타데이터 추출 (너비, 높이, 포맷)
  • 고유 파일명 생성으로 중복 방지
  • 최대 5MB 파일 크기 제한
관련 문서
개발 가이드

AWS S3 이미지 업로드 및 WebP 변환 서비스

코드 문서

Image 서비스 클래스, 모듈, 인터페이스 문서

AI Chat Service

OpenAI API 기반 AI 채팅 서비스

Next.jsOpenAI APITypeScriptReact
기술 스택
Next.jsOpenAI APITypeScriptReact
주요 기능
  • OpenAI GPT-4o-mini 모델 사용
  • ChatGPT API 연동
  • 사용자 맞춤형 응답 생성
  • CORS 지원
관련 문서
개발 가이드

OpenAI API 기반 ChatGPT 챗봇 서비스

코드 문서

AI Chat 서비스 클래스, 모듈, 인터페이스 문서

프로젝트 목표

마이크로서비스 아키텍처 설계 및 구현, 독립적인 서비스 배포, 확장성 있는 시스템 구축