리덕스에서 FireStore 데이터 가지고 놀기
1) firestore 데이터를 리덕스 스토어에 넣으려면? (미들웨어 설치!)
우리가 firestore에서 데이터를 가져올 때 비동기 통신을 한다고 했죠!
비동기 통신이 뭐라고?
보통 코드를 읽어올 때는 위에서부터 하나 하나 처리하면서 읽어오는데(동기 통신),
비동기 통신이란걸 하면 1번 작업을 하다가 이게 조금 오래걸릴 것 같으면 얘를 빼놓고서
2, 3, 4번 하다가 1번이 끝나면 1번의 후속 작업을 하고 이런식으로 바꿔줄 수 있음.
조금 더 효율적으로 얘가 끝날 때까지(1번이 다 끝날때까지 2번이 대기할 필요가 없음)
효율적으로 처리할 수 있는데
리덕스에서 비동기 통신을 할 때 필요한 미들웨어라는 친구를 사용함.
yarn add redux-thunk미들웨어가 뭐냐구요?
리덕스 데이터를 수정할 때 [액션이 디스패치 되고 → 리듀서에서 처리] 하던 과정 기억하시죠?
미들웨어는 이 과정 사이에 미리 사전 작업을 할 수 있도록 하는 중간 다리 같은 거예요!
즉! [액션이 일어나고 → 미들웨어가 할 일 하기 → 리듀서에서 처리] 이 순서로 처리하게 됩니다!
근데 왜 중간과정이 필요해? 액션 일어나고 리듀서 처리되는건 동기 과정. 근데 왜 미들웨어가 껴?
파이어스토어에게 우리가 데이터좀 주라고 요청을 보내면 파이어스토어는 우리에게 뭘 해줘야 한다?
데이터를 줘야함.
이 데이터를 받아올 때까지 기다려줘야 함. 그래서 받아온 데이터를 어디에? 리듀서에 넣고 이제 이걸로 상태값 업데이트 하라고 알려줄 수 있음.
미들웨어는 이 사이에서 미리 사전작업이라고 표현하는데
어떤 액션이 디스패치되고 리듀서에서 처리하기 전, 이 사이에 사전 작업을 할 수 있도록 도와주는 중간다리같은 친구임.
이 중간다리 친구 중 하나인 redux-thunk를 우리가 사용하는 것.
<요약>
그럼 파이어스토어에 요청을 보내고 답을 받아와야함. 데이터를 받아오는동안 기다려줘야 하니까 미들웨어라는 친구를 써야하는 거구나!!!!! 우리가 쓸 미들웨어는 redux-thunk구나!!
redux-thunk는 뭐하는 미들웨어일까?
우리 액션 생성 함수가 뭘 반환한다고 했었죠? 맞아요! 객체 반환하죠. 🙂
redux-thunk는 객체 대신 함수를 생성하는 액션 생성함수를 작성할 수 있게 해줍니다!
그게 왜 필요하냐구요?
리덕스는 기본적으로는 액션 객체를 디스패치합니다!
그러면 이게 함수 객체 말고 함수를 생성해주면 어떻게 될까?
→ 즉, 함수를 생성하면 특정 액션이 발생하기 전에 조건을 주거나, 어떤 행동을 사전에 처리할 수 있겠죠!!
한마디로 응답이 올 때까지 기다려줄 수 있음. 함수를 대신 생성해내면.
configStore.js에 미들웨어를 추가
미들웨어 왜 넣었다고? 파이어스토어에 있는 데이터 가져와서 쓰려면 비동기 통신을 해야하니까!
리덕스에서 비동기통신을 처리하기 위해 이친구 불러온거임!
2) firestore 적용하기
파이어스토어에 있는 데이터를 리덕스에 가져와서 써보자!
(1) load할 때 데이터를 가지고 와보자!
만들고 안썼던 기능이 하나 있죠? loadBucket 액션 생성 함수! 드디어 사용할 차례입니다!!
-(1)파이어베이스랑 통신하는 함수 만들고,
bucket.js에 import부터 하고
콜렉션을 전역변수로 만들어놓고 시작!
콜렉션 이름이 기억 안나면 얼른 보고오기!!!
그 다음엔 파이어베이스랑 통신하는 함수 만들기
-(3)그 후에는요? 불러다 쓰면 되겠죠!
-(2)리듀서를 고쳐요!
콘솔에 잘 받아왔으니 얘를 리덕스 스토어에다 넣어주면 됨.
리듀서를 고쳐보자.
(2) create에 firestore 적용
순서는 항상 똑같을 거예요! 파이어베이스랑 통신 → 필요하다면 리듀서 고치고 → 불러다 쓰기
(3) update에 firestore 적용
파이어베이스랑 통신 → 필요하다면 리듀서 고치고 → 불러다 쓰기
수정하기는 Detail.js에 있는 버튼을 눌렀을 때 되니까(완료하기)
Detail.js로 가서 콘솔 확인해주자.
(4) delete에 firestore 적용
에러방지처리
머테리얼 UI 사용하기
부트스트랩처럼 이미 다 만들어진 ui를 가져다 써보자!
머테리얼 ui는 우리가 styled-components를 쓰던 것처럼 사용할 수 있어요.
공식 문서(https://material-ui.com/)에서 어떻게 생겼는 지 보고 사용 해봅시다!
- 설치
yarn add @material-ui/core @material-ui/icons
페이지 의도적으로 가리기
페이지를 왜 가려야 하나?
버킷리스트 앱을 새로고침 해볼까요?
redux에 넣어둔 데이터 때문에 자꾸만 가짜 데이터 3개가 먼저 보이죠!
파이어스토어의 데이터만 제대로 보여주고 싶을 때, 어떻게 하면 좋을까요? 😎
→ 그렇죠! 페이지를 가려버리는 거예요.
언제까지? 파이어스토어에서 데이터를 가져올 때까지!
이 외에도 수정이나 추가하기 버튼을 눌렀을 때, 여러번 API를 호출하는 현상을 방지하기 위해 페이지를 가리기도 해요.
로딩 스피너 만들기!!
(1) 로딩 스피너 컴포넌트 만들기
(2) firestore 데이터 가져오기 전엔 페이지 진입을 막자!
-initialState에 is_loaded라는 변수를 추가하고 firestore에서 데이터를 받아오면 갱신합니다.
처음엔 false로 줌
그 다음 loadBucketFB 함수 보면 .then() 하고 응답을 받았을 때 디스패치를 해주는 것을 알 수 있음.
리듀서로 내려가보면 여기에서 응답이 완료되면 상태 업데이트 하는 것!
그럼 여기 안에서 is_loaded 해주면 되겠네!
그 다음 App.js 가서 is_loadede가 true가 되었으면 조건부렌더링 시켜주기
조건부렌더링 뭐다? 삼항연산자처럼 쓰는거!
일단 is_loaded 추가해주고
render로 내려가서 로드가 됐을 때 <Container/> 부분 가려주면 된다.
로드가 안됐으면 스피너만 나오면 될것임.
일단 스피너부터 붙이자
render로 가서 조건부렌더링 걸어주면 끝!
Quiz_버킷리스트 생성 시 스피너 띄우기
-Firestore에 데이터 추가하면 스피너를 띄워보자
추가하기 버튼을 누르면 → 로딩 스피너를 띄우고 → 추가가 끝나면 → 페이지를 보여줍시다!
힌트: is_loaded를 false로 바꿔주면 스피너가 뜨겠죠?
is_loaded를 바꿔주는 액션을 만들고, [추가하기]를 누르면 액션을 디스패치 해봅시다.
그리고 addBucketFB()에서 추가가 끝나면 다시 is_loaded를 false로 바꿔줍시다. 🙂
1. 뷰는 있으니까 액션부터 만들기!
bucket.js로 가서 액션 -> 액션크리에이터 -> 리듀서 만들기
-is_loaded를 바꿔놓을 액션을 만들어야함. (const LOADED)
- loaded를 바꿀 액션크리에이터
-리듀서 만들기
이미 있는 state 가져오고 is_loaded만 액션에서 받아온걸로 주면 됨.
addBucketFB 가서 요청을 보내자마자 화면을 가려야하니까
화면 가려주려면 여기서 dispatch부터 하기.
그 다음 then에서 isLoaded를 true로 바꿔주기!
AWS S3 버킷
S3 버킷이란?
S3(Simple Storage Service)는 단순 스토리지 서비스예요! 이미지나 파일을 저장할 수 있습니다. html, css, js 같은 정적 자원을 올리고, 정적 웹 사이트를 호스팅할 수도 있어요. 우리가 컴퓨터에 폴더 만드는 것처럼 버킷을 만들고 사용할 수 있어요!
버킷 만들 때 이거 체크 해제 해주기
정적 웹 사이트란?
웹 사이트는 서버 측 스크립트 사용 유무를 기준으로 동적 웹 사이트와 정적 웹 사이트로 나눠볼 수 있어요. (서버 측 스크립트는 PHP, JSP, ASP같은 친구들을 말해요!) 정적 웹 사이트는 html, js, css같이 정적 자원으로만 이루어진 웹 사이트입니다. 🙂
S3 버킷 설정하기
Amazon S3를 사용하여 정적 웹 사이트 호스팅 - Amazon Simple Storage Service
Amazon S3를 사용하여 정적 웹 사이트 호스팅 - Amazon Simple Storage Service
AWS Amplify 콘솔을 사용하여 단일 페이지 웹 앱을 호스팅할 수 있습니다. AWS Amplify 콘솔은 단일 페이지 앱 프레임워크(예: React JS, Vue JS, Angular JS 및 Nuxt)와 정적 사이트 생성기(예: Gatsby JS, React-static,
docs.aws.amazon.com
S3 버킷에 내 결과물 올리기
1) 빌드하기
build 해주면 프로젝트 밑에 build 폴더 하나 생김.
build가 끝나면 저기 안에 우리가 올릴 수 있는 정적 자원들을 만들어줌.
우리의 수많은 js 파일을 묶어서 만들어주는것임!
2) 결과물 올리기
버킷에 build 폴더 내 파일을 올린다.
3) 정적 웹 사이트 호스팅 설정하기
속성 탭에 가서 정적웹사이트 호스팅 부분 가서 설정해주기
링크 클릭하면 내가 만든것 잘 나옴!
도메인 연결하기 이후부터
-강의자료 참고하기
'React' 카테고리의 다른 글
| 리액트 5주차 과제 (완성본 s3 버킷에 올리고 도메인 공유) (0) | 2021.04.27 |
|---|---|
| 리액트 기초 강의 4주차 정리 -2 (0) | 2021.04.25 |
| 리액트 기초 강의 4주차 정리 -1 (0) | 2021.04.24 |
| 점수 화면, 랭킹 화면을 그리고 링크 연결하기(리액트 기초 3주차 숙제) (0) | 2021.04.17 |
| 리액트 기초 3강 정리 (0) | 2021.04.16 |
댓글