SUIN

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 ..

Redux 리덕스는 리액트에서 가장 많이 사용되는 상태 관리 라이브러리 중 하나이다. 공식 사이트 : https://ko.redux.js.org/introduction/getting-started/ Redux 용어 더보기 State, Action, Action Creator, Reducer, Store, Dispatch, Subscribe, Selector State 리덕스에서는 저장하고 있는 상태값을 State라고 한다. 딕셔너리 형태({[key]: value})형태로 보관할 수 있다 Action(액션) 상태에 변화가 필요할 때 발생하는 것 {type: 'CHANGE_STATE', data: {...}} Action Creator (액션 생성 함수) 액션 생성 함수(액션을 만들기 위해 사용) 화살표 함..

향해 22일째를 달리는 중 저번 주 React 기초 주차가 끝이 나고 숙련 주차가 시작되었다 리액트 기초반 강의 중 3주 차 ~5주 차까지의 내용을 하루 만에 완강해야 해서 아침부터 부랴부랴 강의를 듣기 시작했다 이제 막 리액트와 친해졌다고 생각했는데 3강 리덕스 4강, 5강 Firebase가 나오기 시작하면서 멘탈이 하나둘씩 나가기 시작했다 분명 강의를 이해하면서 듣고 있다고 생각했는데 범위가 많다 보니 처음에 들었던 강의와 헷갈리기 시작해 강의를 따라가는 게 너무 힘들었다 오늘은 리덕스에 대해서 정리 후 내일 개인과제를 시작하며 리덕스를 조금 더 공부할 생각이다.