목록 보기
SPA 환경에서의 버전 업데이트를 위한 모두싸인의 최신 버전 업데이트 기능 구현기
프론트엔드

SPA 환경에서의 버전 업데이트를 위한 모두싸인의 최신 버전 업데이트 기능 구현기

모두싸인
모두싸인
2025년 2월 12일

두줄요약

SPA에서 구 버전 리소스가 계속 유지되는 문제를 해결하기 위해 최신 버전 업데이트 기능을 구현했습니다. version.json 폴링과 버전 비교로 강제·선택 업데이트를 분기하고 전환율까지 측정했습니다.

문제 상황

  • SPA 특성상 index.html이 한 번만 로드되어, 배포 후에도 유저가 구 버전 리소스를 계속 참조하는 문제
  • 버전 격리 배포 환경에서 최신 기능, API 변경, 버그 수정이 즉시 반영되지 않는 문제

원인 분석

  • 초기 로드 이후 HTML 재요청이 없어 세션 동안 기존 리소스가 유지되는 구조
  • 모바일 브라우저의 장시간 세션으로 구 버전 유지 현상이 더 자주 발생

해결 방법

  • version.json에 최신 버전, 최소 지원 버전, 이용 금지 버전을 담아 주기적으로 폴링
  • 현재 버전과 비교해 강제 업데이트 또는 선택 업데이트로 분기
  • 유저에게 사유와 시점을 안내한 뒤 일정 시간 후 자동 새로고침 적용

성능/운영 포인트

  • 1분 주기 폴링으로 버전 변경 감지 속도 확보
  • CI/CD에서 최신 버전은 자동 생성, 최소 지원 버전과 금지 버전은 수동 관리
  • Mixpanel로 최신/구 버전 이용 비율과 전환율 측정

주의할 점

  • 작성 중인 문서 유실을 막기 위해 즉시 새로고침은 지양
  • 로그인 세션 대기 방식은 전환이 느려 최신화에 한계
  • 로그인 없이 이용하는 페이지는 알림 노출 제외

다음 읽기

#Vite 주제를 이어서 읽기

하나의 프론트엔드 코드로 멀티 환경 운영하기

하나의 프론트엔드 코드베이스로 여러 환경을 운영하기 위해 분기 구조를 재설계했습니다. Route와 Component는 설정화·자동화하고, Logic은 단순 플래그로 유지해 생산성과 DX를 개선했습니다.

모두싸인
모두싸인
프론트엔드

댓글 0

댓글을 작성하려면 로그인이 필요합니다.

댓글을 불러오는 중...