DH의 개발 공부로그

Canvas 사용하기 // 기존 코드 class Game { constructor() { this.canvas = document.querySelector("canvas"); this.ctx = this.canvas.getContext("2d"); this.canvas.width = 500; this.canvas.height = window.innerHeight; } } class Game { public canvas: HTMLCanvasElement; public ctx: CanvasRenderingContext2D; constructor() { this.canvas = document.querySelector("canvas") as HTMLCanvasElement; this.ctx = this.can..

이번에는 타입스크립트를 공부한걸 토대로 기존에 작업했었던 JavaScript 슈팅게임을 TypeScript로 변경하는 것을 해보려고 합니다. 물론 제가 작성하는 코드가 최적화된 TypeScript코드가 아닐지는 몰라도 최대한 자료들을 찾아가면서 적용하려고 하는 중입니다. 틀린부분이 있으면 댓글에 남겨주시거나 github에 남겨주시면 적극 반영하겠습니다! 감사합니다! 그럼 시작하겠습니다. :) 게임소개 슈팅게임 바로가기 Github 소스 보러가기 JavaScript 코드가 궁금하신 분들은 github에서 확인 가능합니다. 변수설정 및 DOM 제어 const $startScreen = document.querySelector("#start_screen") const $canvasScreen = documen..

1. SPA (Single Page Application) 개념 SPA란? Single Page Application의 줄임말로 뜻 그대로 하나의 페이지로 구성이 되어있는 어플리케이션을 말합니다. SPA의 핵심 가치는 사용자 경험(UX) 향상에 있고, 부가적으로 애플리케이션 속도의 향상도 기대할 수 있어서 모바일 퍼스트(Mobile First) 전략에 부합합니다. 작동방식 SPA는 웹 에플리케이션에 필요한 모든 정적 리소스를 최초 접근 시 단 한번만 다운로드하고, 이후 새로운 페이지 요청 시, 페이지 갱신에 필요한 데이터만 따로 전달받아 페이지를 갱신을 합니다. 기존 페이지의 내부를 수정해서 보여주는 방식이라고 이해하시면 됩니다. 기본적으로 SPA는 클라이언트 사이드 렌더링, CSR 방식의 렌더링입니다...

자바스크립트에서 배열을 다루다보면 자주 사용하게 되는 메서드 중에 이름이 상당히 비슷한 slice()와 splice()가 있습니다. 두 메서드는 언뜻 보기에 비슷한 기능을 하고 이름도 비슷해서 헷갈리는 경우가 많은데, 두 메서드에는 큰 차이점이 있습니다. 1. slice() slice() 메서드는 어떤 배열의 시작점 부터 끝 까지(끝 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 여기서 중요한 점은 slice()는 원본 배열은 바뀌지 않는 새로운 배열을 반환한다는 점입니다. 구문 arr.slice([begin [, end]]) begin 0을 시작으로 하는 추출 시작점에 대한 인덱스를 의미합니다. 만약 undefined인 경우에는 0번 인덱스부터 slice 합니다. 음수는 배열의 끝에서부..

원시 값? 참조 값? 자바스크립트의 변수에는 크게 두가지 타입을 저장을 할 수 있으며, 이 두가지 타입에는 원시타입의 값과 참조타입의 값으로 나누어져 있습니다. 원시 값(Primitive values) 원시값, 원시 데이터 타입은 객체가 아닌 데이터 타입을 뜻합니다. 그렇다면 객체가 아닌 데이터가 무엇을 의미하냐면, 변수에 저장된 실제값에 직접적으로 접근할 수 있는 단순한 데이터라는 뜻입니다. 그리고 또한 하나의 값에 대한 정의가 절대 변하지 않는 불변성을 갖고 있습니다. 원시 값의 종류 String (문자) Number (숫자) Boolean (참,거짓) Null Undefined Biglnt Symbol // 예시 let a = 100; let b = 문자; 원시값의 불변성? 원시값의 특징이라고 할 ..

if문 중첩을 줄이는 이유 if문을 이용해 조건을 만들다가 조건에 또 다른 조건이 필요하다고 판단하여, if문 안에 if를 넣고 또 else문 안에 if~else 안의 if 등등... 좋지 않은 코드를 짜게 되고, 그리하여 가독성이 안좋아지며 실행 순서를 이해하는것도 힘들어지게 되는 경우가 있습니다. 이런 경우에는 if문의 중첩들을 제거해서 가독성도 올리고 실행 순서를 한눈에 이해하기 쉽게 만들어 주어야 합니다. if문 중첩 제거 방법 그렇다면 if문의 중첩을 줄일 수 있는 방법은 무엇있까요? 바로 다음과 같습니다. 1. 공통된 절차를 각 분기점 내부에 넣는다 2. 분기점에서 짧은 절차부터 실행하게끔 if문을 작성한다. 3. 짧은 절차가 끝나면 return(함수 내부의 경우)이나 break(반복문 내부의..

env 사용이유 개발을 하다보면 외부로 알려지면 안되는 API_KEY나 db관련 정보 등등 보안이 필요한 값들이 있습니다. 이러한 값들을 보안이나 유지보수를 용이하게 하기 위해 .env 파일에 환경변수로 만들어 변수를 꺼내와 사용하는 것 입니다. .env 파일 .env 파일은 항상 프로젝트의 최상위 루트에 파일을 만들어 놓아야 합니다. 그리고 깃에 .env 파일이 올라가면 안 되기 때문에 꼭! gitIgnore에 .env를 꼭 추가시켜줍니다!! gitIgnore > .env CRA에서 .env 사용하기 1. 환경변수 작성 create-react-app에서는 보안이 필요한 환경변수의 외부 유출을 방지하기 위해 REACT_APP_으로 시작되지 않는 환경변수는 무시하기 때문에 항상 변수명은 REACT_APP_..

useEffect()란? useEffect는 React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말합니다. 이전에 정리한 클래스 컴포넌트에서의 리액트 라이프사이클을 함수 컴포넌트에서 대체할 수 있는 것이 바로 이 리액트 훅인 useEffect입니다. 클래스 컴포넌트에서 라이프사이클 1. 마운트 되고 나서 componentsDidMount 2. 업데이트 되었을 때 componentDidUpdate 3. 언마운트 될 때 componentWillUnmount ※ Tip useEffect Hook을 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋습니다.기본형태 useEffect(function, deps) f..