개요
이 글은 React로 스도쿠를 만드는 과정에 대해 포스팅하지만, 강좌가 아닙니다. 제가 저만의 과정으로 차근차근 만들어나가고 있어 꽤 난항이 예상됩니다 :)
목차
- 만들기 전
- 프로젝트 준비하기
- 스도쿠 서비스 만들기
- Redux 스토어 만들기
- 스도쿠 서비스를 이용하는 사가 만들기
- 컴포넌트 만들기
- 게임 로직 담기 & 배포하기 (현재 포스트)
완벽한 최적화는 아니라도 나름의 최적화
Cell 컴포넌트에 조금의 최적화를 더합니다.
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로 옮겨 작성합니다.
