리액트로 만드는 스도쿠 — 4. Redux 스토어 만들기

개요

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

목차

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

라이브러리 설치

다음 라이브러리들을 설치해줍니다.

$ yarn add redux react-redux immer
$ yarn add @types/react-redux --dev

모듈 작성

모듈은 Ducks 구조를 사용해서 작성할 예정입니다.

/modules/sudoku.ts 파일을 만들어줍니다.

코드를 쓰다가 올렸는데, 고민이 하나 생겼습니다.

55번 줄에 있는 getEmptyBoard() 함수를 좀 더 코드처럼 짤 수 있는 방법이 없을까?

그래서 묵혀두었던 스택오버플로우를 사용해 도움을 구해보기로 했습니다.

스택오버플로우에 질문을 올리는 사진 (https://stackoverflow.com/questions/56436023/how-to-initialize-array-to-tuple-type-in-typescript)

스택오버플로우 만세!

놀랍게도 20분 이내로 질 좋은 답변들이 올라왔습니다.

두 답변을 조합해서, getEmptyBoard() 함수를 아래와 같이 만들었습니다.

const getEmptyBoard: (() => Board) = () => new Array(9).fill(0).map(() => new Array(9).fill(0)) as Board;

최종 모듈 코드

루트 리듀서 만들고 전역적으로 사용

/modules/index.ts 파일을 생성합니다.

/store/configureStore.ts 파일을 생성합니다.

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

테스트 코드는?

본 테스트 코드는 수기로 만든 스도쿠 보드 때문에 링크로 대체하겠습니다.

참고: https://github.com/hw0k/react-sudoku/blob/master/src/__tests__/modules/sudoku.test.ts

다음에 할 일

이제 Redux Saga를 이용해서 API를 핸들링하는 Saga를 만들 예정입니다.

맺음말

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