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

개요

이 글은 React로 스도쿠를 만드는 과정에 대해 포스팅하지만, 강좌가 아닙니다. 제가 저만의 과정으로 차근차근 만들어나가고 있어 꽤 난항이 예상됩니다 :)

목차

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

Redux Saga

이 프로젝트에서는 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() 액션이 필요없어진 것 같으니까, 이 액션을 과감하게 삭제했다고 가정합시다.

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

사가 만들기

/sagas/sudoku.saga.ts 파일을 만듭니다.

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

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

사가 테스트

이제 사가를 테스트해봅시다. 사가 테스트를 위해 redux-saga-test-plan 라이브러리를 사용하겠습니다.

$ yarn add redux-saga-test-plan

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

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

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

테스트 통과

이제 할 일

이제 Redux 작업을 모두 마쳤으니 컴포넌트와 컨테이너를 만들어서 표시하고 작업을 처리할 예정입니다.

맺음말

이 개발 일지의 기반이 되는 깃허브 레포지토리가 공개되어 있습니다. PR이나 조언을 언제든지 환영합니다 :)