윤만석

이전 socket.io를 이용한 채팅방기능으로 끝말잇기 게임을 만들어 봤습니다. 리액트,리덕스,리덕스 사가 그리고 소켓을 사용했습니다. 우선 리액트 토이프로젝트를 만들면서 항상 사용했던 소켓io와 리덕스 그리고 리덕스 사가를 정리해보겠습니다. 그리고 끝말잇기 토이프로젝트 설계에 대해 이야기 하겠습니다. 리덕스란 리액트에서 사용하는 상태관리 라이브러리 입니다. 리액트에서는 props를 이용해 부모에서 자식으로 데이터를 전달합니다. 하위 컴포넌트에서 데이터를 사용해야 하는 경우, 반드시 부모컴포넌트에서 데이터를 갖고있어야 하므로, 구조가 복잡해지면 데이터를 관리하기 힘들어지는 단점이 있습니다. 따라서 리덕스를 사용해서 데이터를 전역으로 관리하고(state), 데이터가 변화할때 사용하는 Action을 모두 S..

https://orgin00.tistory.com/51 리액트로 테트리스 만들어보자[4] https://orgin00.tistory.com/50 리액트로 테트리스 만들어보자[3] https://orgin00.tistory.com/49 리액트로 테트리스 만들어보자[2] https://orgin00.tistory.com/48 리액트로 테트리스 만들어보자[1] App.js 전.. orgin00.tistory.com 이번에는 블록이 한 라인에 꽉차면 사라지게 만들고, 게임오버를 만드는 등 게임 진행에 필요한 나머지 로직을 작성하겠습니다. useEffect(() => { const repeatMotion = (timeStamp) => { /* 이전에 작성한 블록이 내려가는 로직입니다. if (timeStamp -..

https://orgin00.tistory.com/50 리액트로 테트리스 만들어보자[3] https://orgin00.tistory.com/49 리액트로 테트리스 만들어보자[2] https://orgin00.tistory.com/48 리액트로 테트리스 만들어보자[1] App.js 전체 코드입니다. 난잡하지만 끊어서 보겠습니다. 첫번째 글에서는 커.. orgin00.tistory.com 블록이 자동으로 떨어지게 만들어 보겠습니다. useEffect(() => { const repeatMotion = (timeStamp) => { if (timeStamp - cur > speed[data.stage]/*시간 1000ms=1s*/) {//현재 시간과 cur의 차이가 1초가되면 if (!validateMove(..

https://orgin00.tistory.com/49 리액트로 테트리스 만들어보자[2] https://orgin00.tistory.com/48 리액트로 테트리스 만들어보자[1] App.js 전체 코드입니다. 난잡하지만 끊어서 보겠습니다. 첫번째 글에서는 커스텀훅으로 게임화면,크기를 지정하고 canvas를 이용해 게임 orgin00.tistory.com 지금까지 작성한 그림그리기와 기본 상태관리를 바탕으로 이번 글 부터는 그림을 그리고, 게임 로직을 작성하겠습니다. querySelector와 캔버스 매소드인 getContext를 이용해서 드로잉 컨텍스트를 반환합니다. getContext의 인자는 2d 입니다. 보드와, 다음 블록이 나오는 박스의 컨텍스트를 반환하면 reDraw함수를 작성합니다. //보드 ..

https://orgin00.tistory.com/48 리액트로 테트리스 만들어보자[1] App.js 전체 코드입니다. 난잡하지만 끊어서 보겠습니다. 첫번째 글에서는 커스텀훅으로 게임화면,크기를 지정하고 canvas를 이용해 게임보드와 현재 블록, 그리고 다음 블록이 보여질 박스까지 그 orgin00.tistory.com 블록을 그리는 함수까지 만들었습니다. 이번에는 app.js에서 HTML부분을 살펴보고, 여러가지 상태관리를 보겠습니다. return ( setOnGame(true)}>시작 ); 우선 return 의 HTML부분입니다. Tetris 컴포넌트에서 게임을 실행합니다. useRef를 사용하는데 children component로 한단계 내려가야 하므로 fowardRef를 사용합니다. NextB..

App.js 전체 코드입니다. 난잡하지만 끊어서 보겠습니다. 첫번째 글에서는 커스텀훅으로 게임화면,크기를 지정하고 canvas를 이용해 게임보드와 현재 블록, 그리고 다음 블록이 보여질 박스까지 그려보겠습니다. 커스텀 훅을 만들어 화면의 가로세로 너비를 설정합니다. UseCustomSize.js import { useEffect, useState } from "react"; export const useCustomSize = () => { const [width, setWidth] = useState(0); const [height, setHeight] = useState(0); const [blockSize, setBlockSize] = useState(0); useEffect(() => { const..