일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 필터링후복사붙여넣기
- 영어시간읽기
- WHATTIMEOFTHEDAY
- 고급영어단어
- 암홀트롭
- 와끼
- Armhole Drop
- 지연환가료
- 엑셀필터복사붙여넣기
- MERN스택
- 클린코드
- TACKING
- 미니마카
- 슈퍼코딩
- 우레탄지퍼
- 40HQ컨테이너40GP컨테이너차이
- 미국영어연음
- 요척합의
- 핸드캐리쿠리어차이점
- 비슬론지퍼
- 엑셀자동서식
- 웹API
- 엑셀드래그단축키
- 헤이큐
- 40HQ컨테이너
- AATCC
- 나일론지퍼
- 봉제용어
- 비리짐
- 자켓실측
- Today
- Total
CASSIE'S BLOG
[슈퍼코딩] 74-2강 리덕스 정리 본문
Firebase 데이터베이스에 연동하여 장바구니 데이터를 데이터베이스에 저장하고 불러오기
1. Firebase 데이터베이스에서 데이터를 불러오기
2. Firebase데이터베이스에 데이터를 저장하기
장바구니 데이터 저장하고 불러오는 것까지 하기 지금 백엔드가 없으니까
각각의 방법을 다 해본다함
방법1. 컴포넌트 안에서 side-effect 로직 및 비동기 로직을 처리하기
e.g. useEffect()
방법2. Redux의 action.creator안에서 side-effect 로직 및 비동기 로직을 처리하기 e.g. redux-thunk
cart 바뀔 때마다 보내는 요청을 useEffect()안에 로직 적어준다.
우리가 익숙한 fetch api를 써주겠다는데
useEffect( () => {
fetch()
}, [cart])
만약 fetch 함수가 Firebase와 연결되어 있다면, 일반적으로 그것은 Firebase에 있는 데이터를 가져오는 데 사용될 것입니다. Firebase는 클라우드 기반의 백엔드 서비스이며, 실시간 데이터베이스와 클라우드 스토리지 등 다양한 기능을 제공합니다.
fetch 함수의 구체적인 구현은 코드에서 확인할 수 있겠지만, Firebase와의 통합에서는 Firebase SDK를 사용하여 데이터를 가져오는 것이 일반적입니다. 이 SDK를 사용하면 데이터베이스에서 데이터를 쿼리하거나 실시간으로 업데이트를 수신할 수 있습니다.
✅쇼핑카트에 담아놨는데 새로고침했는데 다 사라지면 진짜 화나잖아 안 사라지게 기능 구현
요청을 하나하나 다 컴포넌트에 넣으면
컴포넌트 뚱뚱해져서 오류 잡아낼 때 굉장히 피곤해지게된다고함.
'PROGRAMMING > 슈퍼코딩 강의 정리' 카테고리의 다른 글
83강 Next.js (1) | 2023.11.25 |
---|---|
75강 React Router (0) | 2023.11.22 |
[슈퍼코딩] 76강 Auth 인증 (0) | 2023.11.19 |
[슈퍼코딩] 73-1강 리덕스 (1) | 2023.11.18 |
[슈퍼코딩] 72강 리덕스 (0) | 2023.11.17 |