ㅇ페이지 의도적으로 가리기

페이지를 왜 가려야 하나?

가하기 버튼을 누르면 → 로딩 스피너를 띄우고 → 추가가 끝나면 → 페이지를 보여줍시다!

• 버킷리스트 앱을 새로고침 해볼까요? redux에 넣어둔 데이터 때문에 자꾸만 가짜 데이터 3개가 먼저 보이죠!
  파이어스토어의 데이터만 제대로 보여주고 싶을 때, 어떻게 하면 좋을까요? 😎
  → 그렇죠! 페이지를 가려버리는 거예요. 언제까지? 파이어스토어에서 데이터를 가져올 때까지!
  • 이 외에도 수정이나 추가하기 버튼을 눌렀을 때, 여러번 API를 호출하는 현상을 방지하기 위해 페이지를 가리기도 해요.

로딩 스피너 만들기!

(1) 로딩 스피너 컴포넌트 만들기

저는 머테리얼 UI의 아이콘을 사용해서 만들어 볼게요!

import React from "react";
import styled from "styled-components";
import {Eco} from "@material-ui/icons";

const Spinner = (props) => {

    return (
      <Outter>
        <Eco style={{ color: "#673ab7", fontSize: "150px" }} />
      </Outter>
    );
}

const Outter = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ede2ff;
`;

export default Spinner;

(2) firestore 데이터 가져오기 전엔 페이지 진입을 막자!

initialState에 is_loaded라는 변수를 추가하고 firestore에서 데이터를 받아오면 갱신합니다.

//bucket.js
...
const initialState = {
  is_loaded: false,
  list: [],
};
...
	case "bucket/LOAD": {
      return { list: action.bucket, is_loaded: true };
    }

• 변수를 App.js에서 보고, 조건부 랜더링을 합니다.

  ...
  import { useDispatch, useSelector } from "react-redux";
  ...
  import Spinner from "./Spinner";
  ...
  
  function App() {
    const text = React.useRef(null);
    const dispatch = useDispatch();
    const is_loaded = useSelector(state => state.bucket.is_loaded);
  
    React.useEffect( () => {
      dispatch(loadBucketFB());
    }, []);
  
    const addBucketList = () => {   
      dispatch(addBucketFB({ text: text.current.value, completed: false }));
    };
    return (
      <div className="App">
        ...
        {/* 인풋박스와 추가하기 버튼을 넣어줬어요. */}
        <Input>
          <input type="text" ref={text} />
          <button onClick={addBucketList}>추가하기</button>
        </Input>
        {!is_loaded && <Spinner />}
      </div>
    );
  }
  ...
  
  export default App;

AWS S3 버킷

S3 버킷이란?

S3(Simple Storage Service)는 단순 스토리지 서비스예요!
이미지나 파일을 저장할 수 있습니다.
html, css, js 같은 정적 자원을 올리고, 정적 웹 사이트를 호스팅할 수도 있어요.
우리가 컴퓨터에 폴더 만드는 것처럼 버킷을 만들고 사용할 수 있어요!

• 버킷을 하나 만들고 아무 텍스트 파일이나 올려볼까요?
• 파일을 올려봤으면, 브라우저 주소창을 통해 해당 파일을 열어도 봅시다!

정적 웹 사이트란?

웹 사이트는 서버 측 스크립트 사용 유무를 기준으로 동적 웹 사이트와 정적 웹 사이트로 나눠볼 수 있어요. (서버 측 스크립트는 PHP, JSP, ASP같은 친구들을 말해요!)
정적 웹 사이트는 html, js, css같이 정적 자원으로만 이루어진 웹 사이트입니다. 🙂