[React][Clone] Chess 게임 만들기 - 1. setting
오랜만의 포스팅...!
새 프로젝트 때문에 몇 달 동안 바빴다.
할당 된 일정 중 두 개가 취소돼서 지난주 이번주 그나마 시간이 났다.
남은 시간 동안 놀고 싶지는 않아서 괜찮아 보이는 소스를 따라해보려고 한다.
아래 영상을 보고 1인용 체스게임을 만들 것이다.
www.youtube.com/watch?v=kBR7pDLcC3A
체스게임 좋아하지만 그렇게 즐겨하지 않았던 터라 '리액트로 체스 게임을 만들어볼까?' 하는 생각은 아마 무의식에 <퀸즈갬빗>이 어느 정도 자리했던 게 아닐 까 싶다.
가능하다면 WebSocket을 이용하여 multiplayer 버전으로 바꿔보고 싶은데 능력이 따라줄까 모르겠다.
들어가기 전에 내 블로그에는 개념 설명이 많지 않다.
나도 내가 정리하는 편이 아니고 개발 도중에 궁금한 거 찾아보는 편이어서 그리고 그런 방법이 학습에 도움이 된다고 생각하므로 원래 하던 방식대로 하겠다.
(이 블로그는 내게 자습노트와 마찬가지다.)
우선 원하는 위치에 react app을 만들어준다.
npx create-react-app 원하는-프로젝트-이름
생성이 완료되면 이렇게 뜰 것이다.
나는 vscode를 사용한다.
vscode로 만들어놓은 디렉토리 폴더에서 open folder 한다.
npm extensions 이 있다는 전제 하에 진행한다.
위 vscode extension이 있다면 terminal에 npm start와 yarn start 없이
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에 반영되어있다면 다음으로 넘어가자.