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

개요

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

목차

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

스도쿠에 대해

스도쿠에 대해 모르는 분들을 위해 간단히 설명드리겠습니다.

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

스도쿠의 예시 사진

갑자기 스도쿠?

저는 대구소프트웨어고등학교 소프트웨어개발과에 재학 중인 3학년 남현욱입니다. 3학년이 되면 개인 프로젝트를 진행하는데, 제가 고안했던 개인 프로젝트가 너무 장황하고 뜬구름을 잡는 느낌이 들어 바꿀 계획을 하게 되었습니다.

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

그럼 이제 어떻게 만들지?

맨 처음 계획표를 이렇게 작성했습니다.

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

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

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

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

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

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

API를 찾아서

정말 단번에 제가 원하는 API를 찾았습니다.

https://github.com/berto/sugoku

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

스도쿠 생성

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

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

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

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

이제 제대로 나오는 모습

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

만들기 전에

프로젝트의 계획이 자작 스도쿠 알고리즘 -> API 사용으로 변경되었으니, 계획표를 변경해야 합니다. 하지만 알고리즘 공부의 손을 마냥 놓고만 있을 수는 없어서, 이를 추가 과제로 남겨두고 제대로 계획표를 작성했습니다.

• 기본 과정

1. API를 사용하여 스도쿠 생성 및 풀이 처리하기
2. Redux 스토어 만들기
3. 컴포넌트 만들기
4. 스도쿠 진행 로직 만들기
5. 배포하기

• 추가 과정

1. API를 제거하고 순수 만든 스도쿠 로직으로 변경
2. 스도쿠 로직 서버로 옮기기
3. 랭킹 시스템 만들기
4. 일일 스도쿠 만들기
5. 랜딩 페이지 서버사이드 렌더링하기
6. 새로 배포하기

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