[Refactor] 프론트엔드 성능 개선

[Cllaude99]

개요

Resolves: #224

PR 유형

어떤 변경 사항이 있나요?

• 코드 리팩토링

작업 내용

• 페이지의 초기 로딩 시간을 줄이기 위해 React.lazy와 Suspense를 사용
• 게임 페이지내에 준비하기/시작하기, 사용자 발언 후 다음 발언자로 넘어가기, 투표하기, 투표결과 보여주기, 최종 결과 보여주기 중에
  발언하고 넘어가기, 투표하기 부분이 가장 많이 이루어지는 동작이므로 해당 동작에 대해 렌더링 성능을 개선하고자 하였습니다.

그중 발언하고 넘어가기 단계에서 발언자가 넘어갈때마다 VideoFeed도 리렌더링되고 있는 문제를 확인하였습니다.
따라서 전체 VideoFeed 컴포넌트를 memo로 감싸서 props가 변경될 때만 리렌더링되도록 하였고 빈 슬롯 컴포넌트를 별도로 분리하여 메모이제이션 하였습니다.
이외에도 MainDisplay 컴포넌트의 주요 로직들을 useCallback과 useMemo로 메모이제이션하여 불필요한 재계산과 리렌더링을 방지하도록 개선하였습니다.

스크린샷

아래 2이미지는 Profiler를 사용하여 개선 이전의 게임 시작에서 부터 발언자가 넘어가는 1라운드까지의 렌더링을 측정한 결과입니다.

아래는 개선 이후 게임 시작에서부터 발언자가 넘어가는 1라운드까지의 렌더링을 측정한 결과입니다.

결과적으로 688 -> 338로 약 50%의 렌더링 성능이 개선된 것을 확인하였습니다.

PR Checklist

PR이 다음 요구 사항을 충족하는지 확인하세요.

• 커밋 메시지 컨벤션에 맞게 작성했습니다. Commit message convention 참고 (Ctrl + 클릭하세요.)
• 변경 사항에 대한 테스트를 했습니다.(버그 수정/기능에 대한 테스트).