리액트로 만드는 스도쿠 — 2. 프로젝트 준비하기

개요

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

목차

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

CRA로 새 프로젝트 만들기

우선 Create React App으로 새로운 프로젝트를 만들어봅시다.

$ yarn create react-app react-sudoku --typescript

만든 후 불필요한 모든 파일들을 삭제하고, 다음 구조로 바꾸어줍니다.

src/
  components/
  containers/
    App.tsx
  reducers/
  services/
  tests/
  index.tsx
  react-app-env.d.ts
  Root.tsx
  serviceWorker.ts
  ...

본래 App 하나로 되어있던 최초 진입점을 Root와 App으로 분할했고, 사용하지 않는 파일들을 모두 삭제했습니다.

라이브러리 설치하기

그리고 반드시 쓸 것 같은 라이브러리들도 설치했습니다.

$ yarn add react-app-rewired customize-cra axios normalize.css open-color

index.tsx 코드를 변경합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import 'normalize.css';
import 'open-color/open-color.css';
import Root from './Root';
ReactDOM.render(<Root />, document.getElementById('root'));
serviceWorker.unregister();

기타 부수적인 것들(react-app-rewired 등)은 아직 아무런 세팅도 없이 기본으로 설정했으니 따로 설명하지 않겠습니다.

Module Resolve 설정하기

이걸 하는 이유는, ../../../services/test.service 보단 services/test.service 로 변경해서 사용하는 게 더 좋다고 생각합니다.

tsconfig.json 파일을 수정합니다.

{
  "compilerOptions": {
    ...
    "jsx": "preserve",
    "baseUrl": "src"
  },
  ...

정말 간단하게도 이 줄만 추가하면 됩니다.

TDD?

저는 Jest로 단위 테스트를 만들어 쓸 예정입니다. 하지만 유닛 하나를 다 만든 뒤에 이를 검증하는 용도로 쓸 예정입니다.