자바스크립트의 데이터 타입자바스크립트의 모든 값은 데이터 타입을 갖고 있으며, 이 데이터 타입은 크게 원시 타입과 객체 타입으로 나눌 수 있다.원시 타입 : boolean, null, undefined, number, string, symbol, bigint객체 타입 : object위 타입들 중 boolean의 true와 false 처럼 평가되는 값들이 존재하는데, 이를 truthy, falsy한 값이라 한다.falsy 값은 false, 0, -0, 0n, 0x0n, NaN, "", '', ``, null, undefined 이며, truthy는 falsy를 제외한 모든 값이다. Number자바스크립트의 Number는 다른 언어와 다르게 모든 숫자를 하나의 타입에 저장한다. 그 수의 범위는 -(2^53 ..
REACT
Context란?React v16 부터 도입된 내장 API 이며, 컴포넌트간에 Props로 데이터를 전달하지 않고 데이터를 공유할 수 있게 해주는 기술이다. 하지만 착각하기 쉬운 것이 있다. Context API는 "상태관리"를 해주는 기술이 아니다. 정확히는 상태를 쉽게 "공유" 할 수 있게 해주는 다리와 같은 역활이다. 이는 컴포넌트간 Props로 계속해서 전달하는 Prop Drilling을 피할 수 있으며, 깊이와 무관하게 데이터가 필요한 컴포넌트에서 불러 데이터를 사용할 수 있게 된다. Context 생성Context를 사용하려면 React의 createContext를 이용해 Context를 생성해 준다. createContext의 인수로 초기값이 전달된다. 또한 Provider의 value로 ..
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 ( {/* 올바르게 매칭된 주소 */} ..
