Planova 프로젝트

개발환경

• 언어
  • TypeScript
• 프레임워크
  • NestJS
• 라이브러리
  • React
  • Zustand
  • React Query
  • Shadcn UI
  • Zod
• DB
  • PostgreSQL
  • Redis
• 인프라
  • Ubuntu 20.04
  • Nginx
  • docker
• CI / CD
  • Git Action

주요 기능

• 배포 자동화 및 환경 설정
  • GitHub Actions 기반 CI/CD 파이프라인으로 자동화하여 배포 시간을 약10분에서 약 2분으로 단축.
  • CI/CD 환경 내 .env 파일 및 application.yml 설정 관련 빌드 오류(예: no configuration file provided: not found) 발생.  GitHub Secrets를 통한 환경 변수 안전 주입 및 Spring Profile 관리 방안을 수립하여 해결.
• 백엔드 1. 실시간 데이터 동기화 (Real-time Sync)
  • Socket.io를 사용하여 워크스페이스 및 프로젝트 내의 데이터 변경 사항을 실시간으로 모든 접속자에게 전파합니다.
  • 특정 사용자의 작업 수정, 상태 변경, 멤버 추방 등의 이벤트 발생 시 즉각적인 UI 업데이트를 지원합니다. 2. 다중 인증 전략 (Multi-Strategy Auth)
  • JWT (JSON Web Token) 기반의 보안 인증 체계를 갖추고 있습니다.
  • Local Login 뿐만 아니라 Google, Kakao OAuth2 소셜 로그인을 지원합니다.
  • Refresh Token을 Redis에 저장하여 보안성을 강화한 세션 관리를 수행합니다. 3. 이벤트 기반 아키텍처 (Event-Driven)
  • EventEmitter2를 활용하여 모듈 간 결합도를 낮췄습니다.
  • 특정 작업 완료 시 활동 로그 생성, 마일스톤 진척도 재계산 등의 부수 작업을 비동기 이벤트로 처리합니다. 4. 데이터 정밀 관리 (Data Integrity)
  • Prisma를 통한 선언적 스키마 관리와 커스텀 @Transactional() 데코레이터를 사용하여 복잡한 비즈니스 로직의 원자성을 보장합니다. 5. 활동 추적 및 캐싱 (Activity Tracking & Caching)
  • 모든 중요 액션에 대해 Activity Log를 생성하여 프로젝트 히스토리를 관리합니다.
  • 빈번하게 조회되는 활동 로그와 작업 목록은 Redis 캐시를 적용하여 데이터베이스 부하를 줄이고 응답 속도를 개선했습니다.
• 프론트엔드 1. 고도화된 라우팅 가드 시스템 react-router-dom v7의 중첩 라우팅을 활용하여 보안과 권한 관리를 자동화했습니다.
  • PrivateRoute: 인증되지 않은 사용자 접근 차단
  • WorkspaceRoute: 특정 워크스페이스 참여 권한 검증
  • ProjectRoute: 특정 프로젝트 참여 권한 검증
  • WorkspaceOwnerRoute: 소유자 전용 설정 페이지 접근 제어 2. 효율적인 상태 관리 전략 상태의 성격에 따라 관리 주체를 명확히 분리하여 성능을 최적화했습니다.
  • 서버 상태 (Server State): TanStack Query를 사용하여 캐싱, 자동 리페칭, 낙관적 업데이트(Optimistic Updates)를 구현했습니다.
  • 클라이언트 상태 (Client State): Zustand를 사용하여 모달 상태, 필터 조건 등 가벼운 전역 상태를 관리합니다. 불필요한 리렌더링을 방지하기 위해 셀렉터 패턴을 사용합니다. 3. 강력한 사용자 경험 (UX) 제공
  • Rich Interaction: dnd-kit을 활용하여 칸반 보드 내 카드 이동 및 리스트 순서 변경 시 부드러운 애니메이션과 즉각적인 반응성을 제공합니다.
  • Interactive Documentation: TipTap을 커스터마이징하여 단순 텍스트가 아닌 이미지, 코드 블록, 마크다운이 어우러진 협업 문서를 작성할 수 있습니다. 4. 코드 품질 및 안정성
  • Type Safety: TypeScript를 프로젝트 전반에 적용하고, API 응답과 폼 데이터에 대해 엄격한 인터페이스를 정의했습니다.
  • Validation: Zod와 React Hook Form을 결합하여 클라이언트 사이드에서 실시간 데이터 검증을 수행하며, 서버로 잘못된 데이터가 전송되는 것을 사전에 방지합니다.
  • Real-time Sync: Socket.io를 통해 다른 사용자의 활동을 실시간으로 감지하고 UI에 즉각 반영합니다.

아키텍처

아키텍처 주요 특징

• Path-based Routing (Nginx): nginx.conf 설정을 통해 각 서비스의 컨테이너로 요청을 분기합니다.
  • /planova/: 메인 비즈니스 로직 처리.
  • /email-server/: 공용 이메일 발송 서비스.
  • /file-server/: 공용 파일/이미지 관리 서비스.
• Static File Serving: /uploads/ 경로의 요청은 Nginx가 별도의 서버를 거치지 않고 호스트 시스템에 마운트된 볼륨에서 파일을 직접 추출하여 서빙함으로써 성능을 극대화했습니다.
• Security (SSL/Certbot): 포트 80(HTTP)과 443(HTTPS)을 개방하고 Let's Encrypt 및 Certbot을 사용하여 안전한 통신 환경을 구축했습니다.
• Service Isolation (gyubuntu_net): gyubuntu_net이라는 독립 브리지 네트워크를 통해 각 서비스 컨테이너들이 내부적으로만 안전하게 통신하도록 격리했습니다.
• Shared Common Services: 이메일 및 파일 서버는 범용적으로 설계되어 다양한 프로젝트에서 공유 자원으로 활용됩니다.

ERD

스크린샷

깃허브 URL

프론트엔드 : https://github.com/Gyulo94/planova-react

백엔드 : https://github.com/Gyulo94/planova-nest

배포 URL

https://planova.kro.kr