DH의 개발 공부로그

Key Event 키이벤트는 원래 keyEvent함수 안에서 onKeyUp과 onKeyDown을 한번에 해주었는데, 게임이 끝나고 초기화를 해줄 때 키이벤트를 삭제해주기 위해서 세분화 했습니다. onKeyUp과 onKeyDown은 event인자를 받는데 그 타입은 KeyboardEvent로 지정을 해주었습니다. private keyEvent(): void { if (!gameOver) { document.addEventListener("keydown", this.onKeyDown); document.addEventListener("keyup", this.onKeyUp); } } private onKeyUp = (event: KeyboardEvent): void => { if (event.code === ..

이미 Commit을 한 메시지 수정하는 방법! Git을 사용하다 보면 커밋 메시지에 오타를 입력하거나 입력한 메시지를 수정하고 싶은 경우가 있을 수 있습니다. 그럴 때 사용하는 방법을 정리해보았습니다. 1. 가장 최근, 즉 마지막 Commit 메시지 수정하기 가장 최근, 마지막에 입력한 커밋 메시지를 수정하는 방법은 --amend 옵션을 사용합니다. $ git commit --amend git commit --amend를 입력하면 커밋을 수정하는 창이 뜨는데, i를 눌러서 메시지를 수정하고 완료한 후 esc - :wq(저장 + 창 닫기)를 해주면 됩니다. 또는 --amend 뒤에 바로 메시지를 입력하는 방법도 있습니다. $ git commit --amend -m "메시지" 2. 이전 Commit 메시지 ..

React Router 우선 라우팅의 개념을 간단하게 알아보면 사용자가 요청한 링크주소 즉, URL에 맞는 페이지를 찾아서 보여주는 것이라고 할 수 있습니다. MPA 방식에서는 여러페이지를 분리해두고 페이지간의 이동으로 이 라우트 시스템을 구축을 하지만, 그러나 SPA 방식의 리액트에서 라우트 시스템을 구축하기위해 React Router를 사용을 하는 것 입니다. React Router 이 라이브러리는 리액트의 라우팅 관련 라이브러리들 중에서 가장 오래됐고, 가장 많이 사용되고 있습니다. 이 라이브러리는 컴포넌트 기반으로 라우팅 시스템을 설정할 수 있습니다. 신규페이지를 불러오지 않는 SPA에서 각각의 URL에 따라 선택된 페이지를 렌더링 해주는 라이브러리 라고 볼 수 있습니다. 사용하기 1. 설치 np..

0. 소개 프로젝트 작업을 하면서 checkbox가 필요하게 되었고, 다양한 방법중에 Set과 useState를 이용한 방법으로 작업을 해보았습니다. Set과 useState를 이용한 방법을 예제와 함께 정리해보겠습니다 1. Checkbox 컴포넌트 분리 우선 checkbox가 하나가 담겨져 있는 컴포넌트와, 그 checkbox들을 담고있는 list 컴포넌트를 분리해서 파일을 만듭니다. 예제 파일의 구조는 다음과 같습니다. // CheckBox import React from "react"; export default function CheckBox() { return ( checkHandled(e)} /> {text} ) } // CheckBoxList import React, { useState } ..

Bullet bullet은 총알을 담당하는 class 입니다. 1. 기존 코드 class Bullet { constructor() { this.x = 0; this.y = 0; } init(spaceShip) { this.x = spaceShip.x + 12.5; this.y = spaceShip.y; this.alive = true; bulletList.push(this); } update() { this.y -= 7; if (this.y < 0) { this.alive = false; } } checkHit() { for (let i = 0; i < meteorList.length; i++) { if ( this.y = meteorList[i].x && this.x + 16 = spaceShip.x ..

Narrowing '축소'라는 뜻으로 타입가드를 통해서 정확한 타입이 아닐시에 해당 코드가 잘못 실행이 되지 않도록 사전에 방지해주는 방식이라고 생각해주시면 됩니다! 오늘 해볼 것은 DOM에 조작에 대한 Narrowing방법입니다. 다음의 코드를 Narrowing 해보겠습니다. const $startScreen = document.querySelector("#start_screen") $startScreen.style.display = "flex"; // '$startScreen' is possibly 'null'. // '$startScreen'가 'null'일 수 있다라는 에러메세지 1. 조건문 const $startScreen = document.querySelector("#start_screen"..

타입스크립트로 변환하기! // 기존 코드 loadImage() { this.backgroundImage = new Image(); this.backgroundImage.src = "./images/background.gif"; this.bulletImage = new Image(); this.bulletImage.src = "./images/bullet.png"; this.spaceShipImage = new Image(); this.spaceShipImage.src = "./images/space-ship.png"; this.monsterImage = new Image(); this.monsterImage.src = `./images/meteor.png`; this.gameOverImage = new ..

start() & SpaceShip 이번에 TypeScript로 변환할 부분은 Game안에 start 함수와 SpaceShip부분 입니다. Game안의 start함수에 사용자가 조종을 할 spaceShip가 인스턴스 되기 때문에 start와 함께 spaceShip를 같이 묶어서 변환을 해보겠습니다. 우선 기존 JavaScript 코드 먼저 봐보겠습니다. 1. spaceShip class SpaceShip { constructor(game, x, y) { this.game = game; this.lev = 1; this.x = x; this.y = y; } update() { if (score >= this.lev * 15) { this.lev += 1; } } } spaceShip의 자바스크립트 코드는 ..