📋요약

• SMS/NMS 모니터링 시스템 고도화를 진행했습니다

👤역할

• 프론트엔드

  • 레거시 코드 분석 및 성능 개선을 위한 문제 파악
  • 외부 라이브러리의 내부 사용으로 코드 경량화 및 의존성 감소
  • WebSocket에서 sockJS로 대체하여 호환성 유지
  • 최적의 데이터 요청 방식을 도출하여 렌더링 성능 개선

• 백엔드

  • API 구조 및 데이터 흐름 분석을 통해 성능 향상 방안 도출
  • 서버와의 연결 방식 조정 및 최적화 작업 수행

📈성과

• 어드민 페이지 렌더링 속도 25초 → 0.43초 개선

📆시기

• 2024.07 ~ 현재

📝어드민 페이지 고도화

• 레거시 코드 분석 및 성능 개선

  • 문제 분석

    외부망에서는 코드가 정상 작동하였으나, 폐쇄망 환경에서 렌더링 속도가 25초까지 저하되는 문제가 발생했습니다. 이 문제는 사용자 경험에 큰 영향을 미쳤으며, 이를 해결하기 위한 분석이 필요했습니다.
    
    내부 어드민 페이지에서 사용된 레거시 코드와 외부 라이브러리의 의존성으로 인해 성능 저하가 발생하였음을 확인했습니다.
    

  • 개선 작업

    외부 라이브러리를 내부에서 사용하도록 변환하여 성능을 개선하였습니다. 이를 통해 코드의 경량화를 이루고, 외부 의존성을 줄였습니다.
    
    기존 WebSocket 사용에서 일부 고객사가 Chrome 이외의 브라우저를 사용하는 것을 고려하여 sockJS로 대체하여 외부망에서의 호환성을 유지하였습니다.
    
    그러나 sockJS를 내부로 변환하더라도 폐쇄망에서 Connection 시간이 길어지면 서버 연결이 자동으로 끊기는 문제를 발견하였습니다. 이로 인해 실시간 데이터 불러오기 시 렌더링 성능의 누적 저하가 발생했습니다.
    
    최종적으로 사용되지 않는 WebSocket을 제거하고, 일정 주기로 GET 요청을 보내는 방식으로 전환하여 성능을 개선하였습니다.
    

  • 성능 개선 결과 결과적으로 외부망 및 폐쇄망에서의 렌더링 속도를 25초에서 0.4초로 개선하는 성과를 달성했습니다.

💡느낀점

이번 레거시 코드 분석 및 성능 개선 작업을 통해 사용자 경험의 중요성을 다시 한 번 깨달았습니다. 폐쇄망에서 렌더링 속도가 25초까지 저하되는 문제를 해결하기 위해, 외부 라이브러리의 의존성을 줄이고 내부로 변환하는 과정을 통해 성능을 크게 개선할 수 있었습니다.