비동기 처리 순서 문제

문제

비동기 처리 과정에서 순서를 정해주지 않아 생긴 문제

코드

getPlayMovie(30)
.then((data) => {
    playMovies = data;
    updatePlayCardContent();
});

• 위 getPlayMovie라는 함수를 비동기 처리하여 updatePlayCardContent라는 콜백을 실행 시키는데

const isLoggedIn = auth.currentUser ? true : false;
let favoriteIcon = card.querySelector(".favorite");

if (favoriteIcon) {
	card.removeChild(favoriteIcon);
}
if (isLoggedIn) {
	favoriteIcon = createFavoriteIcon(movie.id);
	card.appendChild(favoriteIcon);
}

• 내부에서 위와 같은 로그인 상태에 따라 즐겨찾기 요소를 생성하는 로직을 사용해 순서가 꼬이게 됨.
  • 사용자 인증에 걸리는 시간보다 영화 카드를 생성하는 시간이 더 빠름.
  • 그로인해 첫 페이지 로딩 시 즐겨찾기 버튼이 생성되지 않음.
• 토대의 코드를 다른 팀원분이 짜셔서 어떻게 건드려야할지 감도 못 잡던 상황.

1차 해결

getPlayMovie(30).then((data) => {
  setTimeout(() => {
    playMovies = data;
    updatePlayCardContent();
  }, 500);
});

• 그냥 카드를 업데이트 하는 부분에 setTimeout을 걸어 딜레이를 줬음.
• 문제 자체는 해결됐으나, 자체 딜레이로 인해 로딩 시간이 생겨 비효율적임.

2차 해결

onAuthStateChanged(auth, () => {
  getPlayMovie(30).then((data) => {
    playMovies = data;
    updatePlayCardContent();
  });
});

• 기존에 사용자 정보 쪽에서만 사용하던 onAuthStateChanged를 사용해 개선.
• 사용자 인증 이후에 getPlayMovie가 실행되도록 함.

etc

• 튜터님의 도움이 없었다면 아마 내버려뒀을듯.
• 아직도 갈 길이 까마득함.