Thunk 에서 Promise 다루기 Todos 조회하기 기능 구현 이전 챕터에서 사용했던 프로젝트를 이용하거나 또는 새로운 프로젝트를 생성해, Redux 설정을 모두 하고, 아래 코드를 작성했습니다. 저번 챕터에서는 thunk 를 통해서 3초를 기다리고, 이후에 숫자를 더하는 기능을 구현했습니다. 이번 챕터에서는 좀 더 실용적인 예시를 다뤄보겠습니다. json-server 를 띄우고, Thunk 함수를 통해서 API 를 호출하고 서버로부터 가져온 값을 Store 에 dispatch 하는 기능입니다. 시작에 앞서 아래 작업부터 진행합니다. 1. json-server 설치 및 서버 가동 yarn add json-server db.json { "todos": [] } 2. Slice 로 todos 모듈 추가..
학습 목표 미들웨어의 개념에 대한 이해 Redux 구조에서 비동기를 다루는 기술(미들웨어)인 Thunk 에 대해 알아보고, 사용합니다. Redux 미들웨어 미들웨어란? 리덕스에서 dispatch 를 하면, action 이 리듀서로 전달이 되고, 리듀서는 새로운 state 를 반환합니다. 근데 미들웨어를 사용하면 이 과정 사이에 우리가 하고 싶은 작업들을 넣어서 할 수 있습니다. 만약 counter 프로그램에서 더하기 버튼을 클릭했을 때, 바로 +1 을 하지 않고, 3초를 기다렸다가 +1이 되도록 구현하려면 미들웨어를 사용하지 않고서는 구현할 수 없습니다. 왜냐하면 dispatch가 되자마자 바로 action 이 리듀서로 달려가서 새로운 state 를 반환해버리기 때문이죠. 즉, 여기서 "3초를 기다리는 ..
학습 목표 axios interceptor 픠 필요성에 대해 배우고, interceptor 를 이해하기 위한 필수 개념인 instance 도 함께 이해합니다. 여러 예시를 실제로 사용해보며, 사용방법을 체득합니다. axios interceptor 의 개념과 필요성 상황을 통해 살펴보는 interceptor 의 필요성 앞선 과정에서 get, post, delete 등 axios 를 활용해 HTTP 통신을 하는 방법을 배웠습니다. axios.get("http://localhost:3001/todos"); axios.post("http://localhost:3001/todos", todo); axios.delete(`http://localhost:3001/todos/${todoId}`); 이렇게 호출하는 부분..
학습목표 대표적인 비동기 통신 방법인 fetch 와 axios 의 소개 및 예시를 살펴봅니다. fetch 와 axios 를 직접 사용해보며 비교합니다. 서로의 장/단점에 대해 이해할 수 있습니다. Axios Axios 란? 공식문서에 따르면 axios 란 node.js 와 브라우저를 위한 Promise 기반 http 클라이언트라고 소개하고 있습니다. 다시 말해 http 를 이용해서 서버와 통신하기 위해 사용하는 패키지입니다. Axios 설치 CRA 를 통해서 새 프로젝트를 생성하고, 터미널에 아래의 명령어를 입력해서 axios 를 설치합니다. yarn add axios json-server 설정 API 서버는 직접 만들어 json-server 를 사용합니다. 테스트용 db.json 설정 { "todos"..
들어가며 08/25부터 3주간에 걸쳐 진행될 [Chapter 3] 주특기 주차가 시작되어 Lv.1 ~ 5 까지 페어 프로그래밍으로 과제가 진행되고 있습니다. 이번주는 Lv.3 페어과제로 모달과 버튼을 포함한 웹 페이지를 페어를 이루어 주어진 요구사항에 맞게 만들어 보는 과제를 화요일, 수요일(09/05, 09/06) 진행했습니다. 웹 페이지에서는 과제를 수행하기 위해 Redux-Toolkit, Styled-Components 의 props children, position(css) 의 개념을 이용했습니다. 과제 요구사항 Modal 2개를 구현합니다. overlay 를 클릭했을 때 모달이 닫히는 형태와 그렇지 않은 형태 Buuton 6개를 구현합니다. styled-components 를 이용해 props ..
