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를 호출하는 현상을 방지하기 위해 페이지를 가리기도 함. (네트워크 속도가 느린 곳에서 사이트를 이용시 하나의 글을 작성하고 그게 등록되어 화면에 보이기까지 시간이 꽤 오래 걸릴 수 있음. 사람들은 그걸 보고 글이 올라가지 않았다고 생각을 하고 글을 여러 번 등록하게 됨.) - 파이어스토어 데이터를 가져오기까지 보이는 화면. 리덕스에 넣어..

다시 만들 거니까 어떻게 생겼는지만 스크린샷... 찰칵 부정하지 않습니다... 개인적인 팬심으로 만들었슴... ///^-^///a - Start page - Quiz page - Score page - Message page - Ranking page useEffect와 useRef를 사용하여 해당하는 곳으로 scroll을 올리려고 했지만 useEffect를 이용했을 때 useRef의 값이 바로 들어오지 않아 scroll 실패... 아직 고칠 방법을 제대로 알지 못해 내부 overflow : scroll로 바꿔버렸다 ^-^(진짜 미치겠다...

5-1. 리덕스에서 Firestore 데이터 가져다 쓰기 1. 미들웨어란? : firebase에서 데이터를 가져올 때 비동기 통신을 하고, 리덕스에서 비동기 통신을 할 때 필요한 것. 리덕스 데이터를 수정할 때 [액션이 디스패치 되고 → 리듀서에서 처리] 하던 과정 기억하시죠? 미들웨어는 이 과정 사이에 미리 사전 작업을 할 수 있도록 하는 중간 다리 같은 거예요! 즉! [액션이 일어나고 → 미들웨어가 할 일 하기 → 리듀서에서 처리] 이 순서로 처리하게 됩니다! 미들웨어도 종류가 굉장히 다양한데, 우리가 이번에 사용할 것은 미들웨어인 thunk 입니다. redux-thunk는 뭐하는 미들웨어일까? 우리 액션 생성 함수가 뭘 반환한다고 했었죠? 맞아요! 객체 반환하죠.🙂 redux-thunk는 객체 대신..

3-1. Event Listener - 이벤트 리스너 : 사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려주는 것. ( 대표적 : 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등 ) 이벤트 리스너는 에서처럼 엘리먼트에 직접 넣어줄 수도 있지만, 이번에는 addEventListener를 통해 추가해볼 거임. 동그라미 안에 텍스트를 한 줄 넣고 텍스트를 넣어줄 건데 동그라미에 마우스를 올렸을 때 동그라미의 색이 변하고, 텍스트에 마우스를 올렸을 때 텍스의 색이 변하도록 할 거임. - App.js import React from "react"; import styled from "styled-components"; import Text from "./Text"; const Wrap = st..