리액트로 만드는 스도쿠 — 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 하나로 되어있던 최초 진입점을 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 설정하기

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

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

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

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

TDD?

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

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

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
남현욱

남현욱

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

More from Medium

Add Login Sessions to the state

CORS policy Error In Working With Graphql, ReactJs,Apollo client.

Configure Email-Password Authentication on MongoDB Realm

Creating a Modern React Project Vite, TypeScript, Test, EsLint, Prettier, Lint-Staged, Commitlint…