앱 진입 시 긴 로딩 이슈

이전에 무한로딩까지는 아니지만 종종 특정 구간에서 유저들이 오랜 대기를 겪는 상황이 있었다.

우리 프로젝트는 mobX를 사용 중이며, 앱 진입 시 각 Store가 직렬/순차적으로 초기화된 뒤에 진입하고있다. 현재 store들 간 연관관계가 없음(일부 제외)에도 불구하고 직렬로 처리되고 있어 병목을 겪고 있는 것으로 보였다!

유저에 따라 다르지만 어떤 유저는 A스토어, 또 어떤 유저는 B스토어에서 적게는 200ms, 많게는 15s 이상 대기하는 경우도 보였다. 디버깅모드에서는 일반적으로 모든 스토어초기화 과정을 통과하는 데에 1000~3000ms 내외로 소요되었다.

다음과 같은 단계로 해결을 시도해봤다.

1. await를 제거해 store가 동시에 초기화되도록 함

   ❗문제발생

   스토어 초기화 이후 로딩스크린에서 실행되는 함수는 일부 store의 데이터를 사용하는데, 이 값이 초기화되지 않은 상태였다.

   → 전체 스토어 초기화 자체는 동기적으로 처리되어야하기 때문에 전체 스토어초기화는 동기적으로 처리될 필요가 있었다. 즉 스토어 초기화 함수가 완료되기 전에 로딩스크린으로 넘어가버린 케이스로 볼 수 있다.

2. 각 스토어는 연관이 없으므로 독립적인 관계로 볼 수 있어 Promise.all을 사용한다.

   1. Promise.all 내부에서 실행되는 함수가 여러개라면 그 함수들간에는 호출순서가 다를 수 있다.

   2. Promise.all은 동기적으로 실행되므로, Promise.all를 만나게 되면 이 내부 함수가 모두 실행된 후 다음으로 넘어간다. 즉 내가 바라는 상황인 전체 스토어 초기화가 완료된 뒤에 로딩스크린이 실행될 수 있다.

try {
  await Promise.all([
    this.CustomFistStore.initialize(),
    this.CustomSecondStore.initialize(),
    this.CustomThirdStore.initialize(),
  ]);
} catch (e) {
  console.error(e);
}

위와 같이 Promise.all로 병렬처리 결과 1000ms 정도 앱 진입속도가 단축되는 효과를 얻을 수 있었다!