![]()
이번 글에서는 Canvas를 사용하여 캐릭터 이동을 구현한 경험을 공유해보려 합니다. 그저 이동 뿐 아니라, 캐릭터가 마치 걷는 듯한 애니메이션을 표현했습니다. (제일 어려웠어요..) Canvas? Canvas API는 JavaScript 및 HTML 요소를 통해 그래픽을 그리는 수단을 제공합니다. 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리에 사용할 수 있습니다. → 캐릭터 이동을 위해 동적 그래픽 조작이 필요하기 때문에 Canvas API를 사용합니다! useCanvas Hook 구현 먼저 canvas를 조작할 수 있는 환경을 마련합니다. // useCanvas.ts import { useRef, useEffect } from "react"; const useCanva..
![]()
최근 React에서 Socket.IO를 사용해 보았습니다. Socket.IO를 통한 실시간 통신을 구현해보며 Custom Hook을 이용하면 더 편리한 개발이 가능할 것이라 생각했습니다. 이에 대한 구현기를 공유해보려 합니다. Socket.IO? - HTTP의 한계 HTTP는 요청한대로 응답을 보내주기만 하는 단순한 프로토콜입니다. 이처럼 요청에 대해서만 응답을 보낼 수 있는 HTTP의 특징으로 채팅, 게임 등의 실시간 통신에 매우 비효율적이었습니다. 예를 들어, 채팅 서비스에서 계속 메시지를 받기만 하는 상황은 구현하기 힘들었습니다. 또한 HTTP는 매 요청과 응답마다 connection과 disconnection의 과정을 반복해야 하기에, 유사한 통신을 반복해야 한다는 문제가 있었습니다. - WebS..
