리액트로 만드는 스도쿠 — 5. 스도쿠 서비스를 이용하는 사가 만들기

개요

목차

  1. 프로젝트 준비하기
  2. 스도쿠 서비스 만들기
  3. Redux 스토어 만들기
  4. 스도쿠 서비스를 이용하는 사가 만들기 (현재 포스트)
  5. 컴포넌트 만들기
  6. 게임 로직 담기 & 배포하기

Redux Saga

신은광님의 포스트: https://gracefullight.dev/2017/12/06/Why-redux-saga/

Rokt33r 님의 포스트: https://github.com/reactkr/learn-react-in-korean/blob/master/translated/deal-with-async-process-by-redux-saga.md

패키지 설치

$ yarn add redux-saga redux-logger

그 후 /modules/sudoku.ts 파일을 수정합니다.

만들고 보니 solveBoard() 액션이 필요없어진 것 같으니까, 이 액션을 과감하게 삭제했다고 가정합시다.

이제 사가를 만들 준비를 끝냈습니다.

사가 만들기

/store/configureStore.ts 파일을 수정합니다.

/Root.tsx 파일을 수정합니다.

사가 테스트

$ yarn add redux-saga-test-plan

/tests/sagas/sudoku.saga.test.ts 파일을 작성해줍니다.

아직은 고도화되지 않은 테스트지만 이내 수정하여 반영할 예정입니다.

테스트가 정말 느슨해서 쉽게 통과했습니다.

테스트 통과

이제 할 일

맺음말

세상이 아름다워지는 것을 지향하는 프론트엔드 개발자 남현욱입니다. 휴먼스케이프에서 프론트엔드 개발을 하고 있습니다.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store