엘리스 AI 트랙 08주차 - Redux 기초 II (2/17) 🔥

✔ 08주차. Open API 활용

<학습 목표>

1. React로 제작한 웹 사이트에서 Redux를 활용해 상태관리를 수행할 수 있습니다.

2. Axios를 이용하여 Create, Read, Update, Delete 를 할 수 있습니다.

3. OpenAPI를 활용하여 React로 제작한 웹 사이트에 사용할 수 있습니다.

---

[01 Redux로 비동기 처리]

1. Redux 미들웨어
  - Redux 미들웨어 : 리덕스의 기능을 확장할 때 사용하는 기능. 여러 미들웨어를 사용해도 서로 영향X, 여러 개를 조합해서 사용 가능
    ex. 액션 로그를 출력 미들웨어, 비동기 처리 미들웨어, 크래시 리포트를 전송 미들웨어, 라우팅 미들웨어 등
  - Redux 미들웨어의 구조 : Redux흐름에서 액션이 디스패치되는 시점부터 reducer로 처리가 이동할 때까지의 처리를 확장
이번 과목에서는 Redux가 지니고 있는 핵심 기술인 Redux 미들웨어의 개념을 배워봅시다.
Redux는 굉장히 코드가 짧고 가벼운 아키텍처를 가지고 있습니다. Redux는 미들웨어라고 부르는 확장 기능을 지원합니다. 기본적으로 제공되는 미들웨어 외에 추가로 설치하여 사용해야 하는 미들웨어들이 많이 공개되어있는데 이번 장에서는 이 미들웨어 중에서 대표적인 Redux-thunk를 적용하는 기본적인 방법부터 만드는 방법까지 알아봅니다.

2. 동기와 비동기
  - 동기 처리와 비동기 처리 : 동기적인 처리는 작성된 순서대로 실행되는 처리 / 비동기 처리는 작성된 순서대로 실행되지 않는 처리
  - 동기(Sync) : 작업을 다른 Thread에서 하도록 시킨 후 그 작업이 끝나길 “기다리고“ 다음 일을 진행한다.
  - 비동기(Async) : 작업을 다른 Thread에서 하도록 시킨 후, 그 작업이 끝나길 “안 기다리고“ 다음 일을 진행한다.

https://dev.to/clovis1122/dont-make-that-function-async-9m6

3. redux-thunk
  - redux-thunk : 리덕스를 사용하는 애플리케이션에서 비동기 작업을 처리할 때 사용하는 방법. 액션 객체가 아닌 함수를 디스패치 할 수 있음
  - thunk : 특정 작업을 나중에 하도록 미루기 위해서 함수 형태로 감싼 것
  - redux-thunk가 하는일
    ① pure javascript object 형태로 action을 반환하던 actionCreator에서 함수로 래핑한 형태로 반환 가능하게 함
    ② actionCreator가 함수를 반환하는데, 이 함수는 dispatch와 getState를 파라미터로 갖고 내부에서 비동기적으로 action을 dispatch 가능

 

4. redux-thunk를 이용한 비동기 처리
  - redux-thunk 적용(1) - 콜백으로 비동기처리하기

import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';
import thunk from 'redux-thunk';
import reducers from './reducers';

const middlewares = { logger, thunk };

const store = createStore (
reducers,
applyMiddleware(...middlewares)
);

export default store;

5. Promise
  - Promise : 자바스크립트 비동기 처리에 사용되는 객체. 프로미스가 생성될 때 꼭 알 수 있지는 않은 값을 위한 대리자로, 비동기 연산이 종료된 이후의 결과값이나 실패 이유를 처리하기 위한 처리기를 연결할 수 있도록 함. (비동기 메서드에서 동기 메서드처럼 값을 반환할 수 있음). 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용.
  - 프로미스의 3가지 상태(states)
    ① Pending (대기) : 비동기 처리 로직이 아직 완료되지 않은 상태. (new Promise() 메서드를 호출)
    ② Fulfilled (이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
    ③ Rejected (실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

6. Redux-saga
  - redux-saga : 액션을 모니터링하고 있다가, 특정 액션이 발생하면 이에 따라 특정 작업을 하는 방식으로 사용. 비동기 작업을 할 때 기존 요청을 취소 처리 하거나, 특정 액션이 발생했을 때 이에 따라 다른 액션이 디스패치되게끔 하거나, 자바스크립트 코드를 실행 하는 등

 

[02 Redux로 글 생성/삭제 구현]

1. CRUD 개념
  - CRUD : Create, Read, Update, Delete의 제일 앞 문자를 하나씩 따와 만든 줄임. 데이터를 처리하는 시스템이 지속성을 갖기 위해 갖춰야 하는 기본적인 데이터 처리 4가지 기능. ex. 게시판이나 블로그등

https://itzone.com.vn/en/article/what-is-crud-website-programming-crud-crud-database/

---

※ 수업 자료의 출처는 K-Digital Training x 엘리스 인공지능 서비스 개발 기획 1기 (elice.io/)입니다.