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

개요

목차

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

라이브러리 설치

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

모듈 작성

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

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

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

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

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

스택오버플로우 만세!

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

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

최종 모듈 코드

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

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

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

테스트 코드는?

참고: https://github.com/hw0k/react-sudoku/blob/master/src/__tests__/modules/sudoku.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