3주차 릴리즈 노트 v1.1.0

[FE]

1. Shared Worker를 이용해 브라우저 내의 여러 탭에서 소켓 연결 관리하기 #35

• 목표
  • 기존 여러개의 탭에서 각각 소켓 연결을 하게 되는데 이부분을 SharedWorker를 통해 하나의 연결을 여러 탭에서 공유하게 만들기.
    • 기존 Socket 아키텍처에 존재하는 socket.storage 분리
    • 3개의 Socket(Chat, Game, Draw)에 대한 코드를 Shared Worker에서 진행
• 문제
  • Game Socket 연결 지연으로 joinRoom 이벤트가 실행되지 않는 문제
• 해결
  • gameSocketManager 내부에 연결 완료 전에 받은 요청을 Queue로 저장한 후, 연결이 완료된 이후에 처리하는 로직을 추가
• 결과
  • 2개의 Socket(Chat, Game)을 Shared Worker로 관리하는데 성공
  • Draw Socket은 시간 관계상 완료하지 못함

2. Playwright를 이용한 성능 테스트 #30

• 문제
  • 기존의 랜덤 드로잉 테스트는 실제 환경과 다르다는 문제
• 해결
  • 실제 사용자의 마우스 이벤트로 드로잉 데이터 수집
  • 3개의 드로잉 시나리오 제작
• 결과
  • 5명의 플레이어로 약 20초 동안 게임을 진행하며 성능 측정 (CDP 사용)

3. 드로잉 최적화 #30

• 문제
  • 저성능 기기에서 렉이 발생하는 문제
• 해결
  • 마우스 무브 이벤트에 16ms 쓰로틀링 적용

4. 리액트 리렌더링 횟수 줄이기 #30

• 문제
  • 게임 캔버스의 수 많은 리렌더링에 따른 성능 저하 문제
• 해결
  • 잉크 부족 토스트 메시지에 3초 쓰로틀링 적용
  • GameCanvas 컴포넌트에 memo 적용
  • 여러 함수의 useCallback 의존성 배열 수정
• 결과
  • LayoutCount: 92.26% 향상(443.33 ➔ 34.33)
  • RecalcStyleCount: 87.79% 향상(497.33 ➔ 60.67)
  • LayoutDuration: 58.72% 향상(0.04107 ➔ 0.01695)
  • RecalcStyleDuration: 87.74% 향상(0.09295 ➔ 0.01140)
  • ScriptDuration: 53.77% 향상(1.65815 ➔ 0.76654)
  • TaskDuration: 20.68% 향상(7.96949 ➔ 6.31876)
  • ThreadTime: 25.19% 향상(5.26321 ➔ 3.93703)

---

[BE]

1. Prometheus와 Grafana 적용하기 #37

• 서버 데이터를 수집하여 성능 테스트 시 병목 구간 확인
• Docker로 구성해 다양한 서버의 데이터 수집 가능

2. Redis List 삽입 방식 변경 #27

• 문제
  • List 삽입에 LPUSH 사용으로 서버에서 reverse() 가 필요해 연산 횟수가 늘어나는 문제
• 해결
  • List 삽입에 RPUSH 사용
• 결과
  • reverse() 제거로 연산 횟수 약 50% 감소

3. Artillery를 이용한 성능 테스트 #38

• Artillery로 사용자가 사용하는 환경을 묘사한 성능 테스트 진행.
• Artillery’s 모니터링 툴로 부하 발생 구간 시각화.

4. Redis Adaptor 적용하기 #32

• 목표
  • 기존 Adaptor에서 Redis Adaptor로 전환해 다중 서버 확장 가능하도록 변경
• 결과
  • Nginx의 IP Hash로 로드밸런싱 설정
    • 같은 방에 있는 유저 중 일부가 게임 시작 실패
    • Redis Adaptor 설정 오류로 추정
    • Nginx 로드밸런싱의 경우 롤백

What's Changed

• Test/#20 플레이 라이트 성능 테스트 자동화 by @ijun17 in #21
• Feature/#23 구글 애널리틱스 스크립트 삽입 by @ijun17 in #24
• develop 브랜치로 병합 by @ijun17 in #25
• Refactor/#22 성능 테스트용 코드 추가 by @uuuo3o in #26
• Refactor/#22 Redis List 삽입 방식 변경 by @uuuo3o in #27
• Dev be to develop by @swkim12345 in #28
• Refactor/#29 프론트엔드 최적화 by @ijun17 in #30
• Dev fe to develop by @ijun17 in #33
• Refactor/#15 redis adaptor socket io에 적용하기 by @swkim12345 in #32
• Dev be to develop by @swkim12345 in #34
• Refactor/shared worker/#14 by @dannysir in #35
• develop 브랜치 머지 by @dannysir in #36

New Contributors

• @ijun17 made their first contribution in #21
• @dannysir made their first contribution in #35

Full Changelog: 1.0.1...1.1.0