Skip to content

[릴리즈 노트] CS 리팩토링 2주차(2025.01.13 ~ 2025.01.17)

Jump to bottom
krokerdile edited this page Jan 17, 2025 · 6 revisions

현재 팀 상황

기존 팀에 소속되어 있던 준현님, 현민님이 인턴이 되셔서 불가피하게 평일 코어타임에는 남은 두명으로 진행을 하게 되었습니다. 선빈님을 포함하여 공식적으로 일정에 참여 못하시는 3분도 리팩토링에 대해 참여 의사를 보이셔서 저희는 비동기로 리팩토링을 진행하고 있습니다.

그래서 실질적인 릴리즈 자체는 일요일에 모여서 진행 하게 될 것 같습니다. 아래 내용은 현재 작업 중인 혹은 PR로 올라가져 있는 내용이라고 생각을 해주시면 될 것 같습니다.

프론트엔드

주요 변경사항

1. QuizZonePage FSD 세그먼트 실험적 적용

  • QuizZonePage 컴포넌트에 한정하여 FSD 세그먼트 패턴 적용
    • 실험적 도입을 통한 패턴 검증
    • 최소 범위 내에서의 구조 개선
    • 향후 확장 가능성 평가

2. 컴포넌트 구조 개선

features/
└── QuizZone/
    ├── model/          # 상태 관리 로직
    │   ├── context/    # Context 정의
    │   └── provider/   # Provider 구현
    └── ui/             # UI 컴포넌트
        ├── QuizZonePage.tsx
        └── QuizZoneContent.tsx


graph TB
    subgraph "기존 구조"
        A[QuizZonePage]
        B[QuizZoneContent]
        C[useQuizZone Hook]
        D[Lobby]
        E[InProgress]
        F[Result]
        G[ChatBox]
        
        A --> B
        B --> C
        B --> D
        B --> E
        B --> F
        B --> G
        
        style A fill:#f9f,stroke:#333,stroke-width:2px
        style B fill:#bbf,stroke:#333,stroke-width:2px
        style C fill:#ff9,stroke:#333,stroke-width:2px
        style D fill:#dfd,stroke:#333,stroke-width:2px
        style E fill:#dfd,stroke:#333,stroke-width:2px
        style F fill:#dfd,stroke:#333,stroke-width:2px
        style G fill:#dfd,stroke:#333,stroke-width:2px
    end
    
    subgraph "FSD 구조"
        H[features/QuizZone]
        
        subgraph "UI Layer"
            I[QuizZonePage]
            J[QuizZoneContent]
        end
        
        subgraph "Model Layer"
            K[QuizZoneProvider]
            L[QuizZoneContext]
            M[useQuizZone Hook]
        end
        
        subgraph "Components"
            N[Lobby]
            O[InProgress]
            P[Result]
            Q[ChatBox]
        end
        
        H --> I
        I --> K
        K --> L
        K --> M
        K --> J
        J --> N
        J --> O
        J --> P
        J --> Q
        
        style H fill:#f9f,stroke:#333,stroke-width:2px
        style I fill:#bbf,stroke:#333,stroke-width:2px
        style J fill:#bbf,stroke:#333,stroke-width:2px
        style K fill:#ff9,stroke:#333,stroke-width:2px
        style L fill:#ff9,stroke:#333,stroke-width:2px
        style M fill:#ff9,stroke:#333,stroke-width:2px
        style N fill:#dfd,stroke:#333,stroke-width:2px
        style O fill:#dfd,stroke:#333,stroke-width:2px
        style P fill:#dfd,stroke:#333,stroke-width:2px
        style Q fill:#dfd,stroke:#333,stroke-width:2px
    end

    classDef default fill:#f9f,stroke:#333,stroke-width:2px;
Loading

3. 상태 관리 개선

  • Provider 패턴을 통한 상태 관리 구조 개선
    • QuizZoneProvider를 통한 상태 중앙화
    • useQuizZone 훅 초기화 로직 최적화
    • Context 기반 상태 공유 구현

4. 성능 최적화

  • Hook 호출 순서 최적화
  • Context Provider 메모이제이션 적용
  • 불필요한 리렌더링 방지

적용 결과 및 평가 포인트

개선된 사항

  • 상태 관리 로직 모듈화
  • 컴포넌트 책임 분리
  • 코드 구조 명확화

검증 필요 사항

  • FSD 패턴의 실질적 효용성
  • 확장 시 고려사항
  • 팀 적용 가능성

영향받는 컴포넌트

  • QuizZonePage (구조 변경)
  • QuizZoneContent (구조 변경)
  • QuizZoneProvider (신규)
  • QuizZoneContext (신규)

주의사항

  • Hook 순서 규칙 준수
  • Context 사용 시 메모이제이션 고려
  • Provider 래핑 구조 유지

인프라

기존 설정했던 docker-compose에서 MSA 및 이후 수평 확장을 고려하기위해 k8s로 마이그레이션을 진행하고 있습니다.

주요 변경 사항

  1. Kubernetes(k8s) 인프라스트럭처 구성
  2. CI/CD 파이프라인 구축 및 최적화
  3. 애플리케이션 빌드 환경 개선

작업 내용 상세

  1. 인프라스트럭처 구성 작업

    • NCP k8s master, worker 노드 환경 준비
    • k8s 클러스터에 필요한 기본 매니페스트 파일 생성
    • 환경별 설정값 분리를 위한 kustomization 구조 설계
    • 데이터 지속성을 위한 스토리지 설정
    • 서비스 간 네트워크 통신을 위한 인그레스 규칙 정의

  2. 배포 자동화 구축 작업

    • GitHub Actions 워크플로우 파일 작성
    • 환경별 시크릿 관리 체계 구축
    • 컨테이너 이미지 빌드 및 푸시 자동화
    • k8s 클러스터 배포 프로세스 자동화

  3. 빌드 환경 개선 작업

    • Dockerfile 구조 최적화
    • 공유 패키지 참조 경로 수정
    • 빌드 성능 향상을 위한 캐시 전략 수립
    • 테스트 환경 구성 (jest.config.ts 추가)
Clone this wiki locally