리액트로 만드는 스도쿠 — 6. 컴포넌트 만들기

개요

목차

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

라이브러리 설치

$ yarn add styled-components open-color

컴포넌트 준비작업

로직 담기

Grid에 적절한 데이터를 넘겨주고 나면, 남은 작업들은 Grid의 몫입니다.

Grid에서도 모양을 다 잡아줬으니 이제 Cell만 만들면 문제없을 것 같습니다.

모든 작업을 완료했으니, AppSudokuContainer를 넣습니다.

어디 한 번 볼까요?

$ yarn start

위 명령어를 입력한 뒤, 직접 눈으로 테스트해봅시다.

의도한 대로 잘 나오는 모습

이제 어느 정도 스도쿠의 모양을 갖추어가는 것 같습니다. 그래도 몇 가지의 남은 일들이 있습니다.

  1. 처음 board에 있는 값과 이미 맞춘 값을 변경할 수 없어야 한다.
  2. 3번 오답 시 게임을 종료한다.
  3. 난이도를 조절할 수 있어야 한다.
  4. 다 풀었음을 자동으로 감지하고(boardsolution 비교) 게임을 종료한다.

다음 포스트에서는 남은 일들을 하나씩 처리해볼 예정입니다.

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

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