DH의 개발 공부로그

Children Props? 리액트 모든 컴포넌트에서 children props를 사용할 수 있습니다. children props란 컴포넌트의 여는 태그와 닫는 태그 사이의 내용입니다. 예를 들면, function App() { return Hello world! } 이 태그에서 Hello world! 문자열이 Welcome 컴포넌트의 children props로 전달이 되어 접근할 수 있습니다. function Welcome(props) { return {props.children}; } Children Props Type 타입스크립트에서는 Children Props를 전달을 할 때 타입을 지정을 해주어야 합니다. 그렇다면 어떤 타입으로 지정을 해주어야 하는지 알아보겠습니다. 1. JSX.Element..

FC란? Function Component 타입의 줄임말로, React + Typescript 조합으로 개발할 때 사용하는 타입입니다. 함수형 컴포넌트 사용 시 타입 선언에 쓸 수 있도록 React에서 제공하는 타입입니다. React.FC 사용 타입스크립트를 이용해서 리액트로 작업을 하다보면 아래의 형태로 작업을 하는 경우가 많습니다. import React from 'react'; type GreetingsProps = { name: string; }; const Greetings: React.FC = ({ name }) => ( Hello, {name} ); export default Greetings; React.FC를 사용하는 경우에는 다음과 같이 props의 타입을 Generics으로 넣어서 사..

상대 경로로 파일 import 우선 절대 경로를 설정하기 이전에 상대 경로로 import 했을 때의 방식은 다음과 같습니다. import Home from './pages/Home' import Detail from './pages/Detail' import ToDoLIst from '../components/ToDoLIst';위의 경우와 같이 ./ 또는 ../을 이용하여 경로를 찾아가서 import 해야 합니다. 지금의 같은 경우는 어렵지 않게 찾아가기도 하고, 크게 가독성을 떨어뜨리지는 않는다고 볼 수 있지만, 뎁스가 깊어지고, 폴더가 다양해지면 나중에는 ../../../../파일명의 형태처럼 복잡하고 가독성이 떨어지게 됩니다. 그래서 이 문제를 해결하기 위..

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 === ..

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의 자바스크립트 코드는 ..