1주차 진행 계획

전체 계획에 대한 내용은 우리의 리팩토링 목표 페이지를 참고해 주세요!

김현진

🔍 CQRS 적용

목표: 읽기 요청의 평균 응답 시간을 30% 개선한다.
목표: 쓰기 요청 시간을 단축한다.

• CQRS(Command Query Responsibility Segregation) 적용으로 읽기와 쓰기를 분리시켜 성능 개선

박병주

🧪 테스트 코드 작성

CRDT 반영 테스트하는 부분은 희진님과 함께 분배해서 진행 예정

목표: 유지보수 용이성을 향상시킨다.

• 웹 소켓 서버 통신 테스트: 웹소켓 연결 상태, CRDT 동기화 테스트
• CRDT 반영 테스트: 공유 데이터에 따라서 그래프 뷰, 에디터 화면을 올바르게 표시하는지 테스트

💫 성능 개선

목표 1: 그래프 뷰 화면에서 20명이 동시에 노드를 생성하는 상황에서 4G 환경에서 평균 네트워크 지연 시간이 100ms를 초과하지 않는다. (사용자의 노드 생성 주기는 2s로 가정한다.)
목표 2: 에디터 화면에서 20명이 동시에 텍스트를 입력하는 상황에서 4G 환경에서 평균 네트워크 지연 시간이 100ms를 초과하지 않는다. (사용자의 타자 속도는 331 TPM로 가정한다.)
목표 3: 그래프 뷰 화면에서 10,000개의 Node와 9,999개의 Edge가 존재하는 경우 프레임 렌더링 시간이 16ms를 초과하지 않고, 단일 프레임의 Draw 호출 수가 1,000개를 초과하지 않는다.

나희진

✨ 렌더링 성능 최적화

목표: 스페이스 화면에서의 렌더링 시간을 10% 이상 단축시킨다.

• 메모이제이션, 코드 스플리팅 등 활용
• React DevTool을 활용해 렌더링 시간 측정

🎨 디자인 패턴 활용 및 코드 구조 개선

이벤트 핸들러 관련된 로직은 옵저버 패턴 활용하여 병주님과 같이 개선 작업 진행 예정

목표 1: 평균 Cyclomatic Complexity를 10 이하로 낮춘다.
목표 2: 코드 중복도를 20% 이상 낮춘다.
목표 3: 한 파일 당 평균 150줄 이하를 유지한다.

• 상태 관리 및 비즈니스 로직 분리, 컴포넌트 업데이트 방식을 디자인 패턴을 활용해 리팩토링
• ESLint, SonarQube 등을 활용해 코드 복잡도와 중복도 측정
• 고려 중인 패턴: 디렉토리 구조 아키텍처, 옵저버 패턴, 팩토리 패턴 등