5-6. 퀴즈 프로젝트에 firestore를 연결하고, 스피너 붙여보기. 그리고 완성된 사이트를 s3로 배포해보기. 너! 나를 얼마나 아니? 사이트에 firestore를 연결하고, 스피너를 붙여봅니다. 완성된 사이트를 s3로 배포해봐요! - 스피너 붙이기. 먼저 react-icons를 이용하여 Spinner component를 만들어 줄 거임. styled-component를 이용하여 Wrap을 만들어주고 아이콘을 정 가운데 배치해줌. import React from "react"; import styled from "styled-components"; import { TfiHeartBroken } from "react-icons/tfi"; const Wrap = styled.div` width: 100..

5-4. Quiz - 버킷리스트 생성시 Spinner 띄우기. - Firestore에 데이터 추가하면 스피너를 띄워보기. 추가하기 버튼을 누르면 → 로딩 스피너를 띄우고 → 추가가 끝나면 → 페이지를 보여줍시다! 힌트: is_loaded를 false로 바꿔주면 스피너가 뜨겠죠? is_loaded를 바꿔주는 액션을 만들고, [추가하기]를 누르면 액션을 디스패치 해봅시다. 그리고 addBucketFB()에서 추가가 끝나면 다시 is_loaded를 false로 바꿔줍시다.🙂 앞서 만들었던 스피너를 조금 다르게 이용해보겠음. 버킷리스트를 생성하는 버튼을 클릭시 스피너가 떴다가 사라지게끔 해줄 거임. 그렇게 하기 위해서 action value와 action creator를 하나 더 만들어줄 거임. => Loade..

5-3. 페이지 의도적으로 가리기 1. 페이지를 왜 가려야 하는가? 버킷리스트 앱을 새로고침해보면 redux에 넣어둔 데이터 때문에 자꾸만 가짜 데이터 1개가 먼저 보임. 파이어스토어의 데이터만 제대로 보여주고 싶을 때 어떻게 하면 좋을까? => 파이어스토어에서 데이터를 가져올 때까지 페이지를 가려버리면 됨. 이 외에도 수정이나 추가하기 버튼을 눌렀을 대 여러 번 API를 호출하는 현상을 방지하기 위해 페이지를 가리기도 함. (네트워크 속도가 느린 곳에서 사이트를 이용시 하나의 글을 작성하고 그게 등록되어 화면에 보이기까지 시간이 꽤 오래 걸릴 수 있음. 사람들은 그걸 보고 글이 올라가지 않았다고 생각을 하고 글을 여러 번 등록하게 됨.) - 파이어스토어 데이터를 가져오기까지 보이는 화면. 리덕스에 넣어..