Context란?React v16 부터 도입된 내장 API 이며, 컴포넌트간에 Props로 데이터를 전달하지 않고 데이터를 공유할 수 있게 해주는 기술이다. 하지만 착각하기 쉬운 것이 있다. Context API는 "상태관리"를 해주는 기술이 아니다. 정확히는 상태를 쉽게 "공유" 할 수 있게 해주는 다리와 같은 역활이다. 이는 컴포넌트간 Props로 계속해서 전달하는 Prop Drilling을 피할 수 있으며, 깊이와 무관하게 데이터가 필요한 컴포넌트에서 불러 데이터를 사용할 수 있게 된다. Context 생성Context를 사용하려면 React의 createContext를 이용해 Context를 생성해 준다. createContext의 인수로 초기값이 전달된다. 또한 Provider의 value로 ..
REACT
Kaplay 라이브러리를 이용해 게임 기능을 구현했습니다. 웹 게임 만들기를 도와주는 Kaplay 라이브러리 사용Kaplay 라이브러리는 Web의 Canvas API를 기반으로 게임에 필요한 다양한 기능들을 지원해주는 라이브러리이다. KAPLAY, HTML5 Games library for JavaScript and TypeScriptKAPLAY is a JavaScript HTML5 game engine library that ma58cjdcns99.tistory.com 개발을 하던 도중 다른 페이지에 갔다가 다시 게임페이지에 돌아오니..... 에러가 발생했다...위의 자료를 보면 페이지 이동후 다시 게임을 플레이할 때, 비이상적인 속도를 갖으며 텍스트가 검은색으로 나타나는 에러가 발생한다. 원인을 두..
Kaplay 라이브러리는 Web의 Canvas API를 기반으로 게임에 필요한 다양한 기능들을 지원해주는 라이브러리이다. KAPLAY, HTML5 Games library for JavaScript and TypeScriptKAPLAY is a JavaScript HTML5 game engine library that makes it easy to create games. Is the successor of KABOOM.JS.kaplayjs.com 기존 코드에 적용const GamePlaying = ({ canvasWidth, canvasHeight }: GamePlayingPropsInterface) => { const canvasRef: RefObject = useCanvas(canvasWidth,..
Canvas API란 Javascript와 HTML의 canvas 엘리먼트를 통해 웹에 그래픽을 그리기 위한 수단이며, 애니메이션, 게임, 그래픽 및 비디오를 처리하기위해 사용됩니다. 이번 프로젝트는 2D 웹 게임을 만드는 프로젝트 이기에 웹에서 그래픽을 구현하고 Javascript를 이용해 그래픽을 조작할 수 있어야 하기 때문에 Canvas API는 중요 기술이였다. 우선 React 기반에서 Typescript를 사용해 컴포넌트 및 기능 개발을 진행할 것이다. 1. useRef() 리액트 훅을 이용해 요소에 접근React의 함수형 컴포넌트에서 요소에 접근하기 위해서는 리액트의 useRef() 훅을 이용해 접근해야 한다.const GamePlaying = ({ canvasWidth, canvasHei..
프로젝트를 진행하며 404 Not Found와 같이 라우터에 매칭되지 않은 주소로 접속하는 경우 나타낼 페이지를 매칭하려 한다. react-router-dom의 Route의 path 속성에 *을 설정해주어 위에서 개발자가 매칭해둔 주소 이외의 주소로 접근할 때 미리 정해둔 컴포넌트로 라우팅해줄 수 있다. // App.tsximport HomePage from 'pages/HomePage';import NotFound from 'pages/NotFound';import React from 'react';import { Route, Routes } from 'react-router-dom';function App() { return ( {/* 올바르게 매칭된 주소 */} ..
이번 글은 진행하는 프로젝트에 Storybook을 이용해 컴포넌트의 UI를 테스트하며 개발을 진행하는 컴포넌트 주도 개발법 CDD를 적용하며 정리하기 위해 작성했다.CDD는 컴포넌트를 모듈 단위로 나누어 개발하며 전체적인 UI 개발을 진행하는 개발 및 설계 방법론 이다.컴포넌트 단위로 시작해 전체 UI를 구성하기 위해 점진적으로 개발해 나아가는 Bottom-UP 성향을 갖고있다.Storybook을 이용한 CDD는 UI 디자인을 체계적으로 개발 디자이너와의 효율적인 협업을 UI 컴포넌트 익스플로어 툴을 이용해 진행할 수 있다. 문서화된 컴포넌트의 UI를 CSS, JS, 단위 테스트 등 UX에 영향을 줄 수 있는 요소들의 테스트도 가능하다. 기초 사용법우선 Storybook의 기본적인 사용법에 대해 알아보자..
