개발환경

• 언어

  • 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에 즉각 반영합니다.

아키텍처