Community Platform – Mogi Logi

"작은 배움도 기록하고 남기는 개발자 로그 플랫폼"

Mogi Logi(모기로기) 는 “기록 자체를 습관화”하는 것을 목표로 만든 커뮤니티 기반 기술 기록 플랫폼입니다.

이 프로젝트는 기술 블로그의 핵심 목적(기록 → 학습력 강화)과 행동 변화 이론·학습 이력 기반 학습 모델에서 얻은 “작은 배움이 장기적 성장에 영향을 준다”는 관점을 반영하고 있습니다.

---

Technical Overview (VDOM → React Migration Project)

이 프로젝트는 Vanilla JavaScript로 직접 구현한 SPA 아키텍처(VDOM 버전)에서 시작하여, React 19 + Router v7 + TanStack Query + FSD 구조(React 버전)로 확장한 두 단계의 기술적 성장 프로젝트입니다.

🎉 목표

• 프론트엔드 렌더링 구조를 근본부터 이해하여 직접 구현
• 해당 구조를 실제 서비스 개발에 적합한 현대적 React 아키텍처로 재구성
• 동일 기능(CRUD, 댓글, 좋아요, 인증)을 두 환경 모두에서 구현하며 아키텍처적 관점의 차이를 탐구

---

🧭 Summary Table

구분	내용
프로젝트명	Community Platform — Vanilla SPA → React Migration
Version	VDOM Version / React Version (Current Stable)
Frontend Stack	Vanilla JS(ESM), Custom VDOM, React 19, React Router v7, TanStack Query, Vite
Backend Stack	Spring Boot 3, JWT, MySQL, Spring Data JPA
Architecture	SPA, VDOM Engine, FSD 구조, Container–Presenter, Compound Components
인증 방식	VDOM: Session Cookie / React: Access·Refresh Token (sessionStorage)
주요 기능	게시글·댓글 CRUD, 좋아요, 무한스크롤, 액션 모달, 토스트, 인증
Current Status	React Version을 기준으로 기능 확장 및 구조 개선 진행 중
Repository	FE: /react-version, /vdom-version · BE: Backend Repo

---

👥 Development Info

📌 팀 구성

• 개발 인원: 1명 (개인 프로젝트)
• 역할: Full-Stack Developer
  • Frontend: VDOM SPA → React Migration 설계 및 구현
  • Backend: Spring Boot(JWT) 기반 API 서버 개발
  • UI/UX: 디자인 토큰, 공통 컴포넌트 시스템 구축

📆 개발 기간

• 2025.10 ~ 진행 중
• 두 단계로 나누어 개발
  • Phase 1: Vanilla SPA + Custom VDOM 엔진 제작
  • Phase 2: React 19 + Router 7 + FSD 구조로 리팩토링 및 확장

---

📚 Version Overview

🔵 VDOM Version (Custom SPA + Virtual DOM Engine)

Vanilla JavaScript 기반 SPA로 직접 구현한 학습형 아키텍처입니다.

• Virtual DOM + Diff Engine
• 전역 상태 시스템 & Effect Tracking
• Custom Hash Router
• 쿠키 기반 인증

VDOM Version README 보러가기

🟣 React Version (React 19 + FSD Architecture)

VDOM 버전에서 구축한 개념을 실제 서비스 아키텍처로 확장한 버전입니다.

• React 19 + Vite (rolldown)
• React Router v7(Data Router)
• TanStack Query (전체 데이터 계층)
• 커서 기반 무한 스크롤 (useInfiniteQuery + IntersectionObserver)
• 토큰 기반 인증 (sessionStorage 저장 + Refresh Flow)
• FSD 구조
• Container–Presenter / Compound Component / Custom Hook
• 디자인 토큰 (Color/Spacing/Typography)

React Version README 보러가기

🟡 Backend

프로젝트 양쪽 버전이 공통으로 사용하는 백엔드입니다.

• Framework: Spring Boot 3
• Auth: JWT (Access + Refresh Token)
• DB: MySQL
• 문서화: Swagger

Backend Spring README 보러가기

---

⭐ Current Stable Version

React Version (react-version/)

현재 메인 개발은 React 버전에서 이루어져있습니다.

---

🎯 Project Goals

What this project aims to show

이 프로젝트의 핵심 목표는 아래 4가지 목표를 중심으로 설계되었습니다.

1) 브라우저 렌더링 구조를 근본부터 이해하기

• React 없이 VDOM, diff, state, effect를 직접 구현하면서 프론트엔드 프레임워크가 내부에서 어떻게 작동하는지 구조적으로 이해함.

2) 직접 만든 구조를 현대적 React 아키텍처로 자연스럽게 확장

• VDOM 버전의 설계 철학 → React FSD 아키텍처로 옮기며, “왜 이렇게 분리하는가?”를 코드 레벨에서 체득함.

3) 유지보수 가능한 대규모 구조 경험

• React 버전에서 FSD, Barrel Pattern(index.js), Container–Presenter 등을 도입하여 대규모 프로젝트에서도 유지보수가 가능한 구조를 구성함.

4) 사용자 경험(UX) + 개발 경험(DX) 향상시키기

• 디자인 토큰
• 전역 Toast
• Layout 시스템
• 무한 스크롤 + 스크롤 복원

---

🧩 Shared Features

두 버전 모두 다음 기능을 포함하고 있습니다.

• 게시글 CRUD
• 댓글 CRUD
• 좋아요 토글
• 인증(Login/Signup)
• sessionStorage 기반 세션 유지
• 액션 모달
• 토스트 메시지
• 디자인 토큰 기반 UI

하지만 구현 방식은 VDOM 버전과 React 버전이 완전히 다르기 때문에, 각 버전 README에서 자세히 설명합니다.

---

🛠️ Development Journey

Phase 1 — VDOM + SPA Architecture (Learning Phase)

프레임워크에 의존하지 않고, 렌더링 엔진 + 라우터 + 상태 관리 + 이벤트 시스템을 자체 제작하며 프론트엔드의 근본을 학습.

→ 이 단계에서 React의 핵심 구조를 직접 구현해봄.

Phase 2 — React 19 + FSD Migration (Practical Phase)

학습한 내용을 실제 서비스 아키텍처로 재구성.

• FSD 구조 정착
• React Query 도입
• Data Router 기반 네비게이션
• Container–Presenter 및 Compound Component
• Barrel Pattern(index.js)로 도메인 API 구성
• UI/로직 분리 및 상위 책임 재배치

→ 이 단계에서 실전 개발에서 사용되는 구조적 패턴을 구축.

---

🧭 Repository Structure

/
├── vdom-version        # Vanilla JavaScript + Custom VDOM 버전
├── react-version       # React 19 + Router 7 + FSD 버전
└── README.md           # (현재 파일) 프로젝트 전체 설명 & 버전 안내

---

🎉 Thanks for reading!

프론트엔드 아키텍처를 깊이 이해하고 실제로 구현을 목표로 진행한 프로젝트입니다.