SUIN

Create 순서 1. 액션 타입만들기 // ---- Actions ---- const CREATE = "card/CREATE"; 2. 액션 생성함수 만들기 // ----- Action Creators ---- export function createCard(card) { console.log("액션을 생성할거야!"); return { type: CREATE, card }; } 3. 파이어베이스와 통신하는 미들웨어 만들기 import { db } from "../../firebase"; import { collection, doc, getDoc, getDocs, addDoc, updateDoc, deleteDoc, } from "firebase/firestore"; // 추가 export const cr..

리덕스에 FireStore 데이터를 넣어보자 Road 순서 1. 액션 타입만들기 // ---- Actions ---- const LOAD = "card/LOAD"; 2. 액션 생성함수 만들기 // ----- Action Creators ---- // loadCard 모든 카드의 리스트를 다 가지고 있어야 합니다 export function loadCard(card_list){ return { type: LOAD, card_list }; } 3. 파이어베이스와 통신하는 미들웨어 만들기 import { db } from "../../firebase"; import { collection, doc, getDoc, getDocs, addDoc, updateDoc, deleteDoc, } from "firebas..

Redux 상태관리 흐름도 스토어 - 데이터 저장하는곳 리듀서 - 데이터를 실제로 수정되는 공간 흐름도 순서 A Component 에서 Store에 있는 구독중 A Component 에서 Action dispatch Reducer 에서 새로운 상태 값을 만든다(실제 data 수정이 일어난다) 변경된 새로운 상태값은 Store 저장된다 Store에서 구독중인 Component에 수정된 데이터를 넘겨준다(알려준다) A Component re-rendering DOM에 변경된 data 확인

비동기 통신 서버에서 데이터를 가지고 오는 것은 우리가 바로 알 수없고 요청이 들어가면 응답을 해줄 때까지 작업이 끝났는지 알 수 없다 즉 우리가 파이어스토어에서 데이터를 가지고 오는 것은 비동기로 데이터를 가지고 오는 것이다 미들웨어 리덕스에서 비동기 통신을 할 때 필요한 미들웨어라는 친구 먼저 설치해야합니다 yarn add redux-thunk 액션 디스패치와 리듀서 사이에 중간다리 역할을 한다. 액션이 일어남-> 미들웨어에서 비돈기 통신 -> 리듀서에서 데이터 수정 redux-thunk는 뭐하는 미들웨어일까? 객체대신에 함수를 생성하는 액션 생성 함수를 작성할 수 있다 액션 생성 함수 - 액션 객체 반환(딕셔너리{}) thunk- 함수리턴 -> 특정 액션이 실제로 수행되기 전에 조건을 준다거나 사전..

데이터를 가지고 와보자 ! import { collection, getDoc, getDocs ,addDoc , updateDoc ,doc , deleteDoc} from "firebase/firestore"; collection : getDoc : 하나만 가지고올때 getDocs : 여러개 한번에 가지고 올때 addDoc : 데이터 추가하기 updateDoc : 데이터 수정 doc : 도큐먼트 정보 (데이터 수정시 필요)s deleteDoc : 데이터 삭제 파이어베이스 데이터 접근 순서 : collection -> Doc 콘솔에 가져온 정보 확인해보기 React.useEffect(() => { //파이어베이스 잘 db확인해보기 console.log(db); // collection(db정보,콜렉션 이름)..

오전 9시 팀원들과의 회의에서 팀 과제에 대해 이야기했다 하루에 한문제씩 팀 문제를 풀고 금요일까지 개인적으로 최소 2개 이상의 DIY를 작성해오기로 했다 회의가 끝나고 개인과제를 시작했는데 강의를 2번 정도 보고 나니 리덕스의 사용법을 조금 알 수 있었다 .리액트 훅이 아직 많이 부족하다는걸 느껴서 내일 중으로 훅에 대해서 정리를 한번 해봐야겠다 그래도 리덕스는 너무 어려워... 팀 과제 1번 문제 Q1. 컴포넌트 A는 리덕스 스토어를 구독하고 있습니다. 리덕스에 저장된 데이터가 변경되었을 때(A가 구독 중인 값이 변경되었다고 가정합니다.), 어떤 과정을 거쳐 컴포넌트 A가 변경된 값을 가져올 수 있는지 흐름을 그려볼까요 스토어 - 데이터 저장하는곳 리듀서 - 데이터를 실제로 수정되는 공간 흐름도 순서..

Link : https://console.firebase.google.com/?hl=ko 로그인 - Google 계정 하나의 계정으로 모든 Google 서비스를 Google 계정으로 로그인 accounts.google.com Firebase 프로젝트 추가 프로젝트 이름 지정 사이트에서 발생하는 사용자의 행동 데이터를 쌓을 수 있는것 (애널리틱스) 얼마나 머물렀는지, 오류가 나지는 않았는지 트래킹 해볼 수 있다 활성상태로 계속 클릭 기본값으로 프로젝트 만들기 프로젝트 만들기 완성 ! FireStore 설정하기 파이어 스토어는 크게 Collection Document 으로 구성이 되어있다 Collection: 문서(다큐먼트)의 집합 Document: JSON 형식으로 데이터를 저장할 수 있음 My Dicti..

- 테스트 영상 - Redux >modules> Card.js initialState => state 초기값 생성 Action Creators => Create Reducer=> new_card_list에 state값 추가 // card.js // ---- Actions ---- const CREATE = "card/CREATE"; //---- 초기값 ----- const initialState = { card: [ { word: "Lorem", explanation: "Ipsum is simply dummy ", example: "It is a long established fact that a reader ", }, { word: "Lorem", explanation: "Ipsum is simply ..