[프리온보딩코스] 6주차 - 과제9

시간에 am5:29 보는데 왜 갑자기 슬퍼지지..?ㅋㅋㅋㅋ

✍알게된 것과 느낀점

• redux-saga....... 어렵다!
• json-server
• window hosts파일 수정

 

🔥그래서 해보는 정리

1. redux-saga....... 어렵다!

하지만 redux-saga를 하기전에 넘어야하는 큰 산이 하나 있는데..... #가보자고

 

✅ Generator

function weirdFunction() {
  return 1; // 보통 함수는 return을 여러 번 할 수 없다! 
  return 2; // 이 함수는 호출할 때 마다 1만 반환할 것이다.
  return 3;
  return 4;
  return 5;
}

위의 예시와 달리, 제너레이터 함수를 사용하면 값을 순차적으로 반환할 수 있게 된다.

• 제너레이터 함수를 만들 때에는 function* 이라는 키워드를 사용한다.
• 제너레이터 함수를 호출하면 한 객체(제너레이터)가 반환된다.
• 제너레이터 함수는 바로 호출한다고 실행되는게 아니고,
  generator.next()를 호출해야 코드가 실행되며 yield를 반환하고 멈춤
  → generator.next()를 다시 호출하면 그 뒤에부터 이어서 다시 시작 됨

 

✅ redux-saga

이미지 출처: https://www.youtube.com/watch?v=VHszuWZk0JA

비동기적으로 상태를 관리하기 위한 라이브러리. 액션을 모니터링 하고 있다가, 특정 액션이 발생하면 이에 따라 특정 작업을 함.

redux에서는 action을 하면 dispatch해서 바로 state가 변경되기 때문에 비동기 처리가 불가능하므로 redux-saga를 사용한다. 

 

redux-saga가 redux-thunk보다 많이 쓰이는 이유

• 비동기 작업 시 기존 요청 취소 가능
• 특정 액션이 발생했을 때 이에 따라 다른 액션이 디스패치 되게끔 하거나, js코드를 실행할 수 있음
• 웹 소켓을 사용하는 경우 Channel이라는 기능을 사용해서 더 효율적으로 코드 관리 가능
• API 요청이 실패했을 때 재요청 작업 가능

 

사용하기 위해서는 intall 필요!

$ npm install redux-saga

$ yarn add redux-saga

 

✅ Redux-Saga effects

• delay

import { delay } from 'redux-saga/effects';
// 생략

function* addTodo(action: Action) {
  try {
    yield delay(500);
    // 생략
  } catch (error) {
    // 생략
  }
}

다음 구문으로 이동 전에 일정 시간 대기한다.

 

• put

import { put } from 'redux-saga/effects';
// 생략

function* addTodo(action: Action) {
  try {
    yield put(addNewTodo(action.data));
    // 생략
  } catch (error) {
    // 생략
  }
}

redux 스토어에 액션을 dispatch 한다.

 

• call

import { call } from 'redux-saga/effects';
// 생략

function* getTodoList() {
  try {
    const getTodos: any = yield call(fetchTodos);
    // 생략
  } catch (error) {
    // 생략
  }
}

다른 saga들이나 promise 등을 호출 할 수 있다.

 

8분~ Redux-saga 설명이 나옵니다.

 

 

2. json-server

프론트엔드 개발 일정에 맞춰서 백엔드가 준비되지 않은 경우...😨

백엔드가 없더라도 프론트 개발은 멈추면 안되니까! 가짜 API 서버를 만들어 봅시다.

 

 

public/Data 안에 data.json을 만들어서 내용을 작성 후, 아래 코드를 작성해서 서버를 열어줍니다.

$ npx json-server ./data.json --port 4000

성공적으로 실행되면 귀여운 이모티콘이 반겨줍니다. ＼{^_^}/

 

이제 axios나 fetch를 사용해서 평소에 API에서 요청하던 것 처럼 작업을 하면 됩니다! 신기해

 

 

3. window hosts파일 수정

 

이미지 출처 : https://goddaehee.tistory.com/90

🤔 호스트 파일?

호스트 이름에 대응하는 IP 주소를 저장하고 있어서 DNS에서 주소 정보를 제공받지 않고도 서버의 위치를 찾게 해주는 파일!

 

🤔 왜 쓰는거야?

• 인터넷 속도 향상
• 리소스 사용 줄임

😨 하지만..

• 사이트 방문이 차단 될 수 있음
• 그리고 해커한테 털리면 매우 위험함 (그래서 호스트파일 수정할 때 보안프로그램이 경고함)

아무튼 저기 맨 마지막 줄에

127.0.0.1 dummy-server.url

을 추가하면...! 

 

아까 내가 열어준 가짜 서버(localhost:4000)을 연결할 수 있다!

 

 

 

👀 참고 (감사합니다!)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Generator

Generator - JavaScript | MDN

 

https://redux-saga.js.org/docs/introduction/BeginnerTutorial

Beginner Tutorial | Redux-Saga

 

https://react.vlpt.us/redux-middleware/10-redux-saga.html

10. redux-saga · GitBook

 

https://velog.io/@tjdud0123/Redux-%EB%B0%8F-%EB%AF%B8%EB%93%A4%EC%9B%A8%EC%96%B4-Redux-saga-%EA%B8%B0%EB%B3%B8-%EC%A0%95%EB%A6%AC

Redux 및 미들웨어 Redux-saga 기본 정리 및 적용

 

https://sustainable-dev.tistory.com/94

redux-saga의 주요함수(delay, call, put, all, takeEvery, takeLatest)