체스 예제 만들기-1

아기가 신생아 시기를 지나면서, 아주아주 조금 틈이 생겼다. 물론 지금도 세수도 못할 만큼 정신이 없다. 육아 하는 삶이 이렇게까지 시간이 없을 줄 몰랐지. 이번 달 부터는 작은 목표를 하나씩 하려고 한다. 이를테면, 하루에 한 컵 물마시기, 스트레칭 5분이라도 하기, 잊지 않고 약먹기, 일주일에 한 번은 물리치료 가기, 손 파라핀 한 번이라도 하기 등.. 삶의 기본권(?)을 조금씩 채우면서 천천히라도 개발을 다시 해보려 한다. 첫 시작은 체스 게임 만들기.. 아마도 긴 여정이 될 것 같다.

참고 유튜브 - https://youtu.be/kBR7pDLcC3A

Day 1

어제는 프로젝트 만들고, 세팅만..
npx create-react-app 프로젝트 이름

참고 유튜브에서는 yarn 쓰는데 나는 그냥 있는 npm으로..
npm add rxjs react-dnd react-dnd-html5-backend chess.js

육아의 삶으로 돌아가며 이날은 이걸로 끝,,

Day2

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { DndProvider } from 'react-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <DndProvider backend={ HTML5Backend }>
      <App />
    </DndProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

import * as Chess from 'chess.js'
import { useEffect } from 'react'
import { BehaviorSubject } from 'rxjs'

const chess = new Chess()

export const gameSubject = new BehaviorSubject({
    board: chess.board()
})

import React from "react";

export default function Board() {
    return <div></div>
}

import React, { useEffect, useState } from 'react'
import { gameSubject } from './Game'
import Board, { board } from './Board'

import logo from './logo.svg';
import './App.css';

function App() {
  const [board, setBoard] = useState([])
  useEffect(() => {
    const subscribe = gameSubject.subscribe((game) => {
      setBoard(game.board)
    })
    return () => subscribe.unsubscribe()
  }, [])
  return <div>
    <Board board={board}/>
  </div>
}

export default App;

앱 시작할 때 board 초기 상태를 가지도록,
그리고 effect가 있을 때마다 gameSubject가 상태를 subscribe 할 수 있도록 설정한다.

손가락 부셔질 것 같아서 여기까지..
파라핀 하고 자야지..