TypeScript

이번 글에서는 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..

안녕하세요 동쪽별입니다. 최근에 바닐라 자바스크립트로 SPA(Single Page Application)를 개발해보았습니다. 이와 관련하여 SPA 개발을 위한 컴포넌트를 구현한 경험에 대해 공유해보려 합니다. 컴포넌트? 컴포넌트는 리액트로 만들어진 앱을 이루는 가장 최소한의 단위로, 리액트(React)에서 가장 중요한 구성요소입니다. 그래서 컴포넌트가 정확히 무엇일까요? 실제 리액트 공식 문서의 Components and Props 부문을 보면 아래 문장이 명시되어 있습니다. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements d..