App Vesrion

버전관리에 대한 내용입니다.

해당 기능은 공통업무 기능입니다. 다음과 같이 미리 준비된 Boilerplate confy-app 형태로 제공됩니다.
신규 빌드/배포 후에도 사용자의 화면에서 이전 내용의 페이지가 나타나는 이슈에 대응하고자 배포마다 고유한 버전을 생성하고 클라이언트에서 이를 확인합니다.

주요 구성 요소

─ src
  ├── main.tsx
  └── shared
      └── provider/               
          └── versionCheckProvider.tsx

import { versionService } from '@/api/services/global.service'
...

export const VersionCheckProvider = ({ children }: { children: ReactNode }) => {

  // <- 버전관리 API 호출
  const { data, refetch } = useQuery({
    queryKey: ['version'],
    queryFn: () => versionService.getAll() 
  })

  useEffect(() => {
    if (data) {
      const item = data.data[0]
      const versionNew = item.version
      const versionOld = localStorage.getItem(APP_VERSION) || '0'
      if (versionOld === '0') {
        localStorage.setItem(APP_VERSION, versionNew)
      } else if (parseInt(versionNew) > parseInt(versionOld)) {
        localStorage.setItem(APP_VERSION, versionNew)
        alert('새로운 버전이 있습니다. 페이지를 새로고침 합니다.')
        window.location.reload()
      }
    }
  }, [data])

  useEffect(() => {
    const intervalId = setInterval(
      () => {
        refetch()
      },
      60 * 60 * 1000
    )
    return () => {
      clearInterval(intervalId)
    }
  }, [refetch])

  return <>{children}</>
}

버전을 관리하는 API 가 준비 되어야 합니다.

버전 확인: 정기적으로(60 * 60 * 1000) 서버에서 최신 버전 정보를 가져옵니다.
버전 비교: 로컬 스토리지에 저장된 현재 버전과 서버의 최신 버전을 비교합니다.
업데이트 알림: 새 버전이 있을 경우 사용자에게 알림을 표시합니다.
자동 새로고침: 새 버전이 감지되면 페이지를 자동으로 새로고침하여 최신 버전을 로드합니다.

Usage

적용된 모습: /src/main.tsx

import i18nInstance from '@/shared/i18n/i18n'
import { CustomQueryProvider } from '@/shared/provider/customQueryProvider'
import { VersionCheckProvider } from '@/shared/provider/versionCheckProvider'
...

const rootElement = document.getElementById('root')!
const root = createRoot(rootElement)

const initializeApp = async () => {
  ...
  root.render(
    <StrictMode>
      <CustomQueryProvider>
        <VersionCheckProvider> // <- 버전관리 프로바이더 주입
          <I18nextProvider i18n={i18n}>
            <ThemeProviders>
              <DefaultRouterProvider />
            </ThemeProviders>
          </I18nextProvider>
        </VersionCheckProvider>
      </CustomQueryProvider>
    </StrictMode>
  )
}

// 앱 초기화 실행
initializeApp()

참고

PreviousPrevent Leaving Page

NextuseDialog

Edit this page on GitHub.

Overview

React

NEXT.js

Interface

App Vesrion

주요 구성 요소

Usage

참고