반응형 Library & Framework/React2 성격 검사 페이지 구현 회고 2 - 리액트에서 동적 비디오 로딩화면 구현하기 (복병 IOS혼내주기) 로딩화면? 성격 검사에 모두 응답을 하고 결과를 계산하기 위해 서버와 통신하는 사이 귀여운 캐릭터가 빙글빙글 도는 영상을 제공하려고 하였다. 기존에는 컴포넌트를 한 개씩 순서대로 보여주며 결과를 서버로부터 내려받을 때까지 로딩 애니메이션을 보여주다가 서버와 통신을 마치면 결과에 해당하는 캐릭터로 변신하는 애니메이션을 보여주고 끝나면 폭죽을 터트리며 결과화면으로 이어지는 하나의 애니메이션처럼 보이도록 단순하게 만들었다. 근데 단순히 컴포넌트를 변경하는 방법으로 구현했을 경우 네트워크 속도에 따라서 아직 영상 메타데이터들 조차 다운로드 되지 않아 빈화면으로 바뀌었다가 다시 변신 영상이 로드되는 모습이 보이게 되어 매끄럽지 않고 중간에 한번 끊기는 모습을 보여주었다. 또한 로딩 애니메이션이 끝난 뒤에 변신 애.. 2023. 6. 16. 성격 검사 페이지 구현 회고 1 - github pages에서 react 배포하기 https://16ssss.github.io/ Sixteens. site 16ssss.github.io 해당 페이지를 만들고 배포하면서 겪었던 문제들을 회고하기 위해서 이 글을 작성하게 되었다. 구현하게 된 계기 현재 진행하고 있는 프로젝트에서 웹을 다룰 줄 아는 팀원이 없었다... 그나마 내가 리액트를 접해본 적이 있었기에 내가 담당하게 되었다. (백엔드에서 어느 정도 성장을 이루면 프런트엔드도 맛보리라 생각했기에 이 기회에 맛을 봐보자라고 생각했었음) 그렇게 나만 믿으라며 의기양양하게 시작하게 된 리액트... 하지만 시작부터 순조롭지 않았다. gh-pages 리액트를 깃허브 페이지에 배포하기 위해서는 빌드한 파일을 레파지토리에 올리고 github pages 설정을 해주어야 한다. 이걸 직접 했었는데 .. 2023. 6. 14. 이전 1 다음 반응형
