개요
이 글은 React로 스도쿠를 만드는 과정에 대해 포스팅하지만, 강좌가 아닙니다. 제가 저만의 과정으로 차근차근 만들어나가고 있어 꽤 난항이 예상됩니다 :)
목차
라이브러리 설치
styled-components
와 open-color
라이브러리를 설치합니다.
$ yarn add styled-components open-color
컴포넌트 준비작업
우선, 스도쿠 관련 로직을 처리할 SudokuContainer
와 Grid
, Cell
컴포넌트를 만듭니다.
로직 담기
SudokuContainer
에서 필요한 작업들을 해줍니다.
Grid
에 적절한 데이터를 넘겨주고 나면, 남은 작업들은 Grid
의 몫입니다.
Grid
에서도 모양을 다 잡아줬으니 이제 Cell
만 만들면 문제없을 것 같습니다.
모든 작업을 완료했으니, App
에 SudokuContainer
를 넣습니다.
어디 한 번 볼까요?
$ yarn start
위 명령어를 입력한 뒤, 직접 눈으로 테스트해봅시다.
이제 어느 정도 스도쿠의 모양을 갖추어가는 것 같습니다. 그래도 몇 가지의 남은 일들이 있습니다.
- 처음
board
에 있는 값과 이미 맞춘 값을 변경할 수 없어야 한다. - 3번 오답 시 게임을 종료한다.
- 난이도를 조절할 수 있어야 한다.
- 다 풀었음을 자동으로 감지하고(
board
와solution
비교) 게임을 종료한다.
다음 포스트에서는 남은 일들을 하나씩 처리해볼 예정입니다.