리액트로 만드는 스도쿠 — 7. 게임 로직 담기 & 배포하기

개요

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

목차

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

완벽한 최적화는 아니라도 나름의 최적화

Cell 컴포넌트에 조금의 최적화를 더합니다.

React.memo() 를 이용한 간단한 최적화

https://reactjs.org/docs/react-api.html#reactmemo 참조

React.memo() 메서드는 리액트에서 제공하는 Higher-Order Component 인데, 같은 props로 같은 result가 반환되는 Function Component일 시 Memoization을 통하여 일부 상황에서의 성능을 개선합니다.

스도쿠 리듀서 변경

/modules/sudoku.ts/sagas/sudoku.saga.ts 파일을 변경합니다.

아래 두 파일에서 Fail 로직을 만들었습니다.

간단한 UI 작업

Gap 컴포넌트를 만들어, 둘 사이의 공간을 내는 데에, Stat 컴포넌트를 만들어 남은 셀 개수와 실수 횟수를 보여주는 데에 사용할 예정입니다.

또, Select 컴포넌트로 셀렉트박스의 색상을 조금 변경하여 사용할 예정입니다.

그 전에..

몇 가지 빼먹은 작업이 있었습니다. 로딩 인디케이터를 넣어보고 싶었는데, 리듀서와 사가를 또 수정해야겠습니다.

그 전에 로딩 인디케이터를 위해 React Loading 라이브러리를 설치합니다.

$ yarn add react-loading

그 후 리듀서와 사가를 수정합니다.

찐막

SudokuContainer를 진짜 마지막으로 수정합니다.

이후 중앙으로 보내기 위해 App 또한 수정합니다.

End of Making Sudoku

보시면 이렇게 다 만들었습니다!

이제 다 완성했으니, 배포하는 일만 남은 것 같습니다.

Now로 배포하기

프로젝트 루트에 now.json 파일을 만듭니다.

이후 다음 명령어들을 실행해줍니다.

$ yarn global add now
$ now

이제 제 기준으로 https://react-sudoku.hw0k.now.sh에 프로젝트가 성공적으로 Now를 통해 배포되었습니다.

다음 포스트는?

어떤 내용이 들어갈 지 잘 모르겠으나, 프로젝트에 대한 회고와 앞으로에 대한 계획이 들어갈 예정입니다.

그리고 다음 포스트부터는 앞서 설명드린 대로 블로그 플랫폼을 Velog로 옮겨 작성합니다.

--

--

--

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

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

How to Prevent Scroll (& Touch Move) On Mobile Web Parent Elements — while allowing it on children

Sass Custom Functions

Minimize extracted CSS file using Webpack. (CssMinimizerWebpackPlugin)

Temporal Dead Zone(TDZ)