리액트로 만드는 스도쿠 — 1. 만들기 전

개요

목차

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

스도쿠에 대해

스도쿠는 9x9 행렬에 1부터 9까지의 숫자를 채워넣는 숫자 퍼즐입니다. 같은 줄에는 1에서 9까지의 숫자를 한 번만 넣고, 작은 3x3 행렬에서도 1에서 9까지의 숫자를 한 번만 넣어야 됩니다.

스도쿠의 예시 사진

갑자기 스도쿠?

때마침 제 계획에 따르면 지금은 백엔를 개발할 기간인데, <React로 스도쿠 만들기> 프로젝트는 백엔드가 거의 필요없는(?) React만으로 이루어진 웹 앱이라고 생각해서 지금 바꿔도 상관없겠다는 생각을 했습니다.

그럼 이제 어떻게 만들지?

  1. 스도쿠 생성 및 풀이 알고리즘 만들기
  2. Redux 스토어 만들기
  3. 컴포넌트 만들기
  4. 스도쿠 진행 로직 만들기
  5. 배포하기

그 다음 스도쿠 알고리즘을 직접 만들러 맨 땅에 구글링을 하다가,

알고리즘에 약한 나를 좌절하게 만든 게시물 (출처: https://www.101computing.net/sudoku-generator-algorithm/)

요약하자면 스도쿠 풀이 알고리즘을 만들고, 그걸 이용해서 스도쿠 생성 알고리즘을 만들어야 합니다.

개인 프로젝트에 모든 시간을 쏟아부을 수 없어서, 알고리즘 공부를 하고 두 알고리즘을 만들어 6월 안에 프로젝트를 끝낼 자신이 없었습니다.

그래서 저는 차라리 API를 찾아보기로 결심했습니다.

API를 찾아서

https://github.com/berto/sugoku

기쁜 마음으로 API를 바로 Postman에서 테스트해보았으나, 예상치 못한 오류를 접했습니다.

스도쿠 생성
스도쿠 풀이, 하지만 아예 다른 정답을 제시함.

둘이 다른 문제를 제시하고 있어서, 어떻게 된 일인가 하고 직접 웹 앱에 들어가서 개발자 도구로 분석했습니다.

간단하게도 Content가 URL Encoded였습니다.

저는 URL Encoded라는 사실을 인지하지 못한 채 raw data를 보내고 있었습니다. 이제 제대로 사용해볼까요?

이제 제대로 나오는 모습

잘 작동하는 API를 찾았으니, 이제 이를 사용하여 프로젝트를 만들어볼려고 합니다.

만들기 전에

  • 기본 과정
  1. API를 사용하여 스도쿠 생성 및 풀이 처리하기
  2. Redux 스토어 만들기
  3. 컴포넌트 만들기
  4. 스도쿠 진행 로직 만들기
  5. 배포하기
  • 추가 과정
  1. API를 제거하고 순수 만든 스도쿠 로직으로 변경
  2. 스도쿠 로직 서버로 옮기기
  3. 랭킹 시스템 만들기
  4. 일일 스도쿠 만들기
  5. 랜딩 페이지 서버사이드 렌더링하기
  6. 새로 배포하기

이대로 한다면 기본 과정은 6월달까지 해낼 수 있다고 확신하고, 프로젝트 결과물을 제출한 후 틈을 내 공부하면서 추가 과정들을 하나하나씩 진행하기로 결정했습니다.

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

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