[React][Clone] Chess 게임 만들기 - 1. setting

 

 

오랜만의 포스팅...!

 

새 프로젝트 때문에 몇 달 동안 바빴다.

할당 된 일정 중 두 개가 취소돼서 지난주 이번주 그나마 시간이 났다.

 

남은 시간 동안 놀고 싶지는 않아서 괜찮아 보이는 소스를 따라해보려고 한다.

 

아래 영상을 보고 1인용 체스게임을 만들 것이다.

 

 

 

www.youtube.com/watch?v=kBR7pDLcC3A

 

 

체스게임 좋아하지만 그렇게 즐겨하지 않았던 터라 '리액트로 체스 게임을 만들어볼까?' 하는 생각은 아마 무의식에 <퀸즈갬빗>이 어느 정도 자리했던 게 아닐 까 싶다.

 

가능하다면 WebSocket을 이용하여 multiplayer 버전으로 바꿔보고 싶은데 능력이 따라줄까 모르겠다.

 

 

 

들어가기 전에 내 블로그에는 개념 설명이 많지 않다.

 

 

 

나도 내가 정리하는 편이 아니고 개발 도중에 궁금한 거 찾아보는 편이어서 그리고 그런 방법이 학습에 도움이 된다고 생각하므로 원래 하던 방식대로 하겠다.

(이 블로그는 내게 자습노트와 마찬가지다.)

 

 

 

우선 원하는 위치에 react app을 만들어준다.

 

npx create-react-app 원하는-프로젝트-이름

 

 

 

생성이 완료되면 이렇게 뜰 것이다.

 

create-react-app

 

 

 

 

나는 vscode를 사용한다.

 

 

vscode로 만들어놓은 디렉토리 폴더에서 open folder 한다.

 

 

 

npm extensions 이 있다는 전제 하에 진행한다.

 

 

npm extensions

 

 

 

위 vscode extension이 있다면 terminal에 npm start와 yarn start 없이

 

npm script

 

 

npm script에서 start 항목 오른쪽에 뜨는 재생버튼을 누르면 된다.

(예전에는 terminal에 npm run 로 입력되는 거로 기억하는데 이젠 yarn start로 입력되네...?!)

 

 

 

영상에 따르면 설치가 필요한 라이브러리 패키지들이 있다.

 

 

vscode의 integrated terminal 도 괜찮고 윈도우 terminal을 열어도 괜찮다.

디렉토리 주소만 정확하면 된다.

 

 

해당 디렉토리 주소임을 확인하고 다음 명령어를 입력한다.

 

yarn add rxjs react-dnd react-dnd-html5-backend chess.js

 

(chess.js 는 처음 본다...! 찾아봐야지)

 

 

설치가 끝나고 package.json에 반영되어있다면 다음으로 넘어가자.