리액트로 만드는 스도쿠 — 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이나 조언을 언제든지 환영합니다 :)

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

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
남현욱

남현욱

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

More from Medium

Creating a simple CV template with ReactJS

State management in React with redux vanilla

HashRouter vs BrowserRouter

Set up your React app for CRUD operations using MongoDB Realm GraphQL