다시 시작하는 리액트 - 리액트 실무 기초 5-6 과제

 

 

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%;
  height: 100%;
  background: linear-gradient( 0deg, rgb(255, 234, 190) 0%, rgb(253, 187, 45) 100% );
 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`;

const Text = styled.h1`
  font-size: 3rem;
  color: white;
`;

export default function Spinner() {
  return (
    <Wrap>
      <TfiHeartBroken style={{ color: "white", fontSize: "12rem" }} />
      <Text>점수 계산 중...</Text>
    </Wrap>
  );
}

 

제작된 Spinner component의 이미지.

 

 

Spinner component를 만들어줬다면 이제 redux를 수정해줄 거임.

먼저 rank module의 initialState에 is_loaded : false를 추가해줌.

우리는 is_loaded가 true로 바뀔 때 Spinner component를 보여줄 거임.

 

그렇게 하기 위해서 action value랑 action creator를 하나 더 만들어줌.

action value : LOADED / action creator : isLoaded

그리고 reducer의 LOADED에 기존 state들을 전부 받아와 객체 안에서 풀어주고,

is_loaded만 action.payload 값으로 변경해줌.

 

나는 랭킹이 뜨기 전에 Spinner component를 보여줄 거임.

 

Ranking component의 useEffect에서 dispatch(loadQuizFB());를 하기 이전에 dispatch(isLoaded(true));를 해줄 거임.

Ranking 페이지가 첫 렌더링 됐을 때 is_loaded 값을 true로 변경해줌.

그런데 여기까지만 하면 계속해서 Spinner가 떠 있고 랭킹 화면을 볼 수 없기 때문에 코드를 좀 더 추가해줄 거임.

 

dispatch(isLoaded(true)); 다음에 dispatch(loadQuizFB()); 코드가 실행되는데, 우리는 이 action creator를 이용할 거임.

rank module로 이동하여 loadQuizFB의 가장 아래에 dispatch(isLoaded(false));를 추가해줌.

가장 마지막에 is_loaded 값을 false로 되돌려주는 거임.

 

이렇게까지 해줬다면 Ranking component에서 useSelector를 이용하여 rank module의 is_loaded 값을 받아올 거임.

받아온 다음, return문 전에 if문을 하나 작성해줌.

받아온 is_loaded가 true일 때 <Spinner /> component가 return 되게끔 함.

 

이렇게 하면 is_loaded가 true일 때 Spinner가 보이게 되고

잠시 후에 is_loaded가 false로 바뀌면서 Spinner가 화면에서 사라지게 됨.

 

여기까지 하면 Ranking page에 들어섰을 때 Spinner가 잠시동안 뜨게 됨.

 

 

- AWS S3로 배포하기.

 

이제 AWS S3를 이용하여 배포를 해주면 되는데, 앞의 내용과 매우 유사하기 때문에 내용을 더 추가하지는 않겠음.

앞의 내용이 기억에 나지 않는다면, 이 링크의 내용을 참고하면 됨.

=> https://dnjfht.tistory.com/106

 

단지 하나의 차이가 있다면, 이번에는 도메인과 연결시키지 않을 것이기 때문에 S3의 버킷 이름을 원하는 대로 지어줘도 됨.

나는 버킷 이름을 myquiz라고 지어줬음.

 

 

 

배포를 끝마친 모습.

이 링크로 이동하면 확인할 수 있음. => http://minquiz.s3-website.ap-northeast-2.amazonaws.com/