1.Firebase.

  • 백엔드의 역할을 대신해줌.
  • 그중 firestore는 클라우드 데이터베이스를 제공하는 서비스다.
  • 리액트와는 firebase라는 패키지를 통해 연결가능.(yarn add firebase)

FireStore 구조

  • Collection : 문서(document)의 집합.
  • document : Json형식으로 데이터를 저장할 수 있음.

2. 리덕스와 FireStore.

firestore에서 데이터를 가져와 리덕스에 저장하고싶다.

FIreStore는 서버쪽이기떄문에 비동기통신을한다. 리덕스에서 비동기통신을하려면 미들웨어를 필요로한다( 미들웨어에서 비동기통신을한다)

미들웨어

우리가 리덕스에있는 데이터를 접근할떄를보면 1. 액션발생, 2. 리듀서에서처리 순서로 진행된다. 미들웨어는 1번과 2번사이에 들어가 액션이 발생한후 리듀서에서 처리하기전에 추가적인 동작을 해줄수있게한다.( firestore에서 데이터를 가져온다) 이후 리듀서로 액션을 전달해주면서 store의 데이터를 바꿔준다.

회고

4주차와 5주차의 내용은 그래도 3주차의 내용보단 괜찮았다. firebase 중 데이터베이스인 firestore를 배웠는데 기존의 리덕스에서의 데이터접근방법에서 추가로 미들웨어라는 개념이 나오면서 쫌 복잡해졌다.. 특히 여기선 함수를반환하는 미들웨어인 redux-thunk를 설치해준후 미들웨어 함수를 정의하고, 이함수에서 반환해주는 함수에서( 여기서 dispatch가 매개변수가 아닌 인자라고나오는데..찝찝하지만 우선은 넘어갔다..) firestore에접근하여 데이터를 가져온후 액션까지 발생시켜 바로 리듀서로 보내주면서 기존의 리덕스 스토어에 접근하여 데이터를 다룬다. 강의자료에선 액션과 리듀서에서의 처리 사이에 미들웨어가 들어가는걸로 나오는데, 이해하는데에있어선 미들웨어 함수를 호출하면서 firestore에서 데이터를 가져오고 이를 액션함수로 dispatch해주는과정으로 이해하는게 편한것같다. firestore또한 서버로 취급하여 미들웨어함수에서 데이터를 가져오는 과정중 비동기통신이나오는데, 여기서나오는 프로미스 개념중 async와 await는 다시한번 정리할 필요가 있을것같다.

profile
FE developer 🙂

0개의 댓글