![다시 시작하는 리액트 - 리액트 실무 기초 5-6 과제](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbbNVg6%2FbtsaShYjeUs%2FiaKKmGSgJjvxjzhLUSAF0K%2Fimg.png)
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라고 지어줬음.
![](https://t1.daumcdn.net/keditor/emoticon/friends1/large/010.gif)
배포를 끝마친 모습.
이 링크로 이동하면 확인할 수 있음. => http://minquiz.s3-website.ap-northeast-2.amazonaws.com/
'(심층)리액트' 카테고리의 다른 글
다시 시작하는 리액트 - 리액트 심화 1-2 (0) | 2023.04.27 |
---|---|
다시 시작하는 리액트 - 리액트 심화 1-1 (0) | 2023.04.18 |
다시 시작하는 리액트 - 리액트 실무 기초 5-5 AWS S3 버킷 / 도메인 연결 / Firebase로 배포 (1) | 2023.04.17 |
다시 시작하는 리액트 - 리액트 실무 기초 5-4 Quiz (0) | 2023.04.17 |
다시 시작하는 리액트 - 리액트 실무 기초 5-3 (0) | 2023.04.16 |
github : https://github.com/dnjfht
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!