초보 개발자의 팀 프로젝트를 도와주는 Mini Github Web

🎯 Project DDBB: Mini-GitHub

버전 관리 + 협업 기능을 갖춘 Mini GitHub 플랫폼

Git과 유사한 버전 관리 시스템(VCS)을 직접 설계·구현한 미니 협업 플랫폼입니다.

🚀 Tech Stack 🔧 Backend & Core

🎨 Frontend & Optimization

☁️ Infra & Tools

주요 기능 및 기술적 하이라이트

1. 코드 Diff 알고리즘 및 시각화 구현

Mini-GitHub의 핵심 기능으로, 버전 관리 시스템의 핵심인 코드 비교 기능을 자체적으로 구현했습니다.

Diff 로직 구현: 두 파일(혹은 두 커밋) 간의 변경 사항을 라인 단위로 비교하여 추가, 삭제, 수정된 부분을 정확히 판별하는 알고리즘을 구현했습니다.

시각화: 수정(노란색), 삭제(빨간색), 추가(초록색) 등의 색상 태깅을 통해 변경 사항을 직관적으로 시각화하여 코드 리뷰의 효율성을 극대화했습니다.

Pull Request (PR) 지원: Diff를 기반으로 변경 사항을 병합(Merge)하기 전 리뷰를 요청하고 승인하는 워크플로우를 지원합니다.

2. 보안을 고려한 로그인, 회원가입 및 ID/PW 찾기

단순한 인증을 넘어, 사용자 계정 보안과 편의성을 동시에 확보했습니다.

아이디/이메일 중복 확인: 회원가입 과정에서 실시간 중복 검사 기능을 구현했습니다.

아이디/비밀번호 찾기 (이메일 인증): 아이디 또는 비밀번호를 찾을 때, 사용자에게 이메일 인증 코드를 발송하고 이 코드를 확인하는 인증 절차를 거쳐 안전하게 계정을 복구하도록 구현했습니다. 이메일 전송/인증 로직을 백엔드(Java/Spring Boot) 단에서 처리했습니다.

보안: 비밀번호를 안전하게 저장하기 위한 해싱(Hashing) 기법을 적용했습니다.

3. 프론트엔드 성능 및 사용자 경험 최적화

토스 가이드라인의 요구사항에 맞춰, 사용자 경험(UX) 개선 및 서버 부하 감소에 중점을 두었습니다.

이벤트 처리 최적화 (Debounce & Throttle):

useDebounce (검색 기능): 검색어 입력이 멈춘 후 (300ms)에만 API를 호출하도록 구현하여 서버 부하를 방지했습니다.

useThrottle (무한 스크롤): 스크롤 이벤트의 콜백 함수 호출 주기를 제한하여 브라우저의 성능 저하를 방지했습니다.

TanStack Query (React-Query): 서버 상태를 효율적으로 관리하여 Infinite Query를 통한 무한 스크롤 구현 및 caching/staleTime 설정을 통한 불필요한 API 호출을 최소화했습니다.

접근성 및 편의성: useEffect와 Escape 키 이벤트를 사용하여 사이드바를 키보드로 쉽게 닫고 외부 스크롤을 막는 기능을 구현했습니다.

4. 아키텍처 및 설계 원칙

객체 지향 설계 (OOP): Java를 사용하여 버전 관리의 핵심 객체(Commit, Pull Request 등)를 도메인 모델로 정의하고, 책임 기반 설계를 통해 유연하고 확장 가능한 구조를 확보했습니다.

레이어드 아키텍처: Controller, Service, Repository 계층으로 역할을 명확히 분리하여, 각 계층이 **단일 책임 원칙(SRP)**을 따르도록 설계했습니다.

TypeScript 적용: 프론트엔드에 TypeScript를 전면 도입하여 타입 안전성과 개발 생산성을 높였습니다.

🧱 아키텍처 설계

Layered Architecture (Controller / Service / Repository)

SRP 원칙 기반 관심사 분리

OOP 기반 도메인 모델링

TypeScript 기반 타입 안정성 확보

📦 실행 방법

🔹 1. Repository Clone git clone https://github.com/kinjaebeom/ProjectDDBB.git cd ProjectDDBB

🔹 2. Backend 설치 & 실행

mvn clean install

mvn spring-boot:run

🔹 3. Frontend 설치 & 실행 cd frontend

npm install

npm run dev

📝 실제 github에서 영감을 받아 진행하게 된 프로젝트

📝 팀 프로젝트 웹 사이트로 코드비교와 현황 조회 뿐만 아니라 코멘트와 팀원들끼리 소통할 수 있는 게시판과 커뮤니티를 형성

📝 방장 제도를 통해 팀원을 초대하거나 강퇴 할 수있는 권한을 부여

📝 로그인과 회원가입 그리고 계정찾기 까지 세밀하게 구현.