[기술포스팅 원문] https://tech.kakao.com/posts/686

[기술포스팅 요약] 이 글은 오픈채팅 Lite FE의 렌더링 성능을 개선하기 위해 진행한 다양한 최적화 방법을 다룹니다. 오픈채팅 Lite는 대규모 메시지가 짧은 시간 안에 몰리는 특성을 가지고 있어 성능 최적화가 필수적입니다. 이번 개선에서는 컴포넌트 렌더링 최적화, 상태 관리 개선, 데이터 처리 방식 변경 등 여러 방안을 적용했으며, 성능이 크게 향상되었습니다.

• 오픈채팅 Lite에서 발생한 주요 성능 문제
  • 사용할수록 점점 느려지는 앱.
  • 메시지 렌더링 중 유저 인터랙션이 블로킹되는 현상.
  • 빠르게 쌓이는 메시지로 인해 화면이 깜빡이는 문제.
• 렌더링 최적화를 위한 개선 방법
  • 가상 스크롤(Virtual Scroll) 적용: 화면에 보이는 메시지만 렌더링하여 메모리 사용량 절감.
  • React.memo 활용: 불필요한 리렌더링 방지로 성능 개선.
  • 비제어 컴포넌트 사용: 이벤트 핸들러를 직접 DOM에 적용하여 렌더링 부담 감소.
  • button 태그를 span 태그로 변경: iOS에서 발생하는 인터랙션 블로킹 문제 해결.
• 메시지 데이터 처리 방식 개선
  • 연속적인 메시지 렌더링 개선: 비동기 작업(Task Queue) 활용하여 콜 스택 과부하 방지.
  • Message Queue 도입: 서버에서 받은 메시지를 한 번에 처리하여 UI 블로킹 방지.
  • setInterval 대신 requestAnimationFrame 고려: 메시지 처리 속도를 적절히 조절.
• 상태 관리 개선
  • useChatMapStore 최적화: 필요 데이터만 가져오도록 개선하여 리소스 절감.
  • useModal 훅 제거: 불필요한 상태 업데이트를 없애 성능 개선.
  • zustand의 getState 활용: 상태를 직접 가져와 불필요한 리렌더링 제거.
• 최적화 결과
  • 성능 점수(파루스) 70점대 → 90점대로 상승.
  • 대량의 메시지 렌더링 시에도 원활한 성능 유지.
  • 유저 인터랙션 지연 문제 해결.

성능 개선은 단순히 빠른 기술을 적용하는 것이 아니라, 서비스의 특성을 파악하고 가장 적절한 방안을 선택하는 과정이 중요합니다. 오픈채팅 Lite는 지속적인 성능 최적화를 통해 높은 트래픽에서도 안정적인 사용자 경험을 제공하고 있으며, 앞으로도 개선을 이어갈 예정입니다.

이 게시글은 [GPT-4o model]를 통해 요약되었으며, 정보 공유 목적으로 게시되었습니다. 원문 게시물에 대한 책임이나 이해 관계가 없습니다. - 소프트웨어QA 포럼