아기가 신생아 시기를 지나면서, 아주아주 조금 틈이 생겼다. 물론 지금도 세수도 못할 만큼 정신이 없다. 육아 하는 삶이 이렇게까지 시간이 없을 줄 몰랐지. 이번 달 부터는 작은 목표를 하나씩 하려고 한다. 이를테면, 하루에 한 컵 물마시기, 스트레칭 5분이라도 하기, 잊지 않고 약먹기, 일주일에 한 번은 물리치료 가기, 손 파라핀 한 번이라도 하기 등.. 삶의 기본권(?)을 조금씩 채우면서 천천히라도 개발을 다시 해보려 한다. 첫 시작은 체스 게임 만들기.. 아마도 긴 여정이 될 것 같다.
참고 유튜브 - https://youtu.be/kBR7pDLcC3A
어제는 프로젝트 만들고, 세팅만..
npx create-react-app 프로젝트 이름
참고 유튜브에서는 yarn 쓰는데 나는 그냥 있는 npm으로..
npm add rxjs react-dnd react-dnd-html5-backend chess.js
육아의 삶으로 돌아가며 이날은 이걸로 끝,,
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 할 수 있도록 설정한다.
손가락 부셔질 것 같아서 여기까지..
파라핀 하고 자야지..