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

개요

목차

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

CRA로 새 프로젝트 만들기

$ 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 하나로 되어있던 최초 진입점을 RootApp으로 분할했고, 사용하지 않는 파일들을 모두 삭제했습니다.

라이브러리 설치하기

$ 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 설정하기

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

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

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

TDD?

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

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