성격 검사 페이지 구현 회고 2 - 리액트에서 동적 비디오 로딩화면 구현하기 (복병 IOS혼내주기)

로딩화면? 성격 검사에 모두 응답을 하고 결과를 계산하기 위해 서버와 통신하는 사이 귀여운 캐릭터가 빙글빙글 도는 영상을 제공하려고 하였다. 기존에는 컴포넌트를 한 개씩 순서대로 보여주며 결과를 서버로부터 내려받을 때까지 로딩 애니메이션을 보여주다가 서버와 통신을 마치면 결과에 해당하는 캐릭터로 변신하는 애니메이션을 보여주고 끝나면 폭죽을 터트리며 결과화면으로 이어지는 하나의 애니메이션처럼 보이도록 단순하게 만들었다. 근데 단순히 컴포넌트를 변경하는 방법으로 구현했을 경우 네트워크 속도에 따라서 아직 영상 메타데이터들 조차 다운로드 되지 않아 빈화면으로 바뀌었다가 다시 변신 영상이 로드되는 모습이 보이게 되어 매끄럽지 않고 중간에 한번 끊기는 모습을 보여주었다. 또한 로딩 애니메이션이 끝난 뒤에 변신 애..

원문링크 : 성격 검사 페이지 구현 회고 2 - 리액트에서 동적 비디오 로딩화면 구현하기 (복병 IOS혼내주기)