개발자 지망생의 블로그

안녕하세요~ 회사 다니느라 오랜만에 포스팅하네요. 준비하던 자바스크립트 게임 개발 강의가 오픈되어 홍보차 글을 씁니다 🥳 여러분은 '뱀파이어 서바이벌'이 자바스크립트로 개발된 게임이라는 것을 아시나요? 심지어 뱀파이어 서바이벌의 경우 게임 개발자는 단 한 분이라는 것..! 유명한 게임 엔진인 유니티, 언리얼을 쓰지 않더라도 충분히 게임을 개발할 수 있습니다! 비전공자에 웹 프론트엔드만 공부하던 저도 일주일만에 뱀파이어 서바이벌을 간단히 클론코딩할 수 있었기 때문이죠 😎 제 강의에서 뱀파이어 서바이벌을 함께 클론해보며 HTML5 게임엔진인 Phaser 3와 JavaScript를 활용해 게임을 개발하는 과정을 배우실 수 있습니다. 웹 프론트엔드, 백엔드 또는 다른 개발 분야를 공부하며 JavaScript(E..

자바스크립트 비동기를 제대로 이해해보자 | async, await 💡 다음 코드를 실행하면 콘솔에 출력이 어떤 순서대로 나올지 예측해보자. const test = async () => { console.log("hello"); const result2 = test2(); const result3 = test3(); console.log("world"); await sleep(2500); console.log(result2); console.log(result3); }; const test2 = async () => { console.log("a"); await sleep(2000); console.log("b"); return "test2"; }; const test3 = async () => { con..

[JS] 파일과 데이터를 모두 body에 넣어 API 요청하기 | form 태그 활용기 (2) React로 쇼핑몰 프로젝트를 짜다가 파일(이미지)과 데이터(문자열, 숫자)를 모두 body에 넣어 API를 요청해야 하는 경우가 생겼다. 상품 판매자가 상품을 등록할 때 위와 같은 기능이 필요했다. React에서 바로 하려니 어려워서, (1) pure HTML로 먼저 짜보고 (2) pure HTML+JavaScript로 짜보고 (3) React에 적용하는 과정을 거쳤다. HTML form 태그에 대해 잘 몰랐는데, pure HTML로 먼저 짜보면서 HTML form을 구성하는 방법에 대해서 공부할 수 있었다. pure HTML로 짠 내용은 이전 포스팅을 참고하시면 된다. [HTML] 파일과 데이터를 모두 bo..

React 프로젝트를 하다가 다음과 같은 오류가 있었다. 동영상을 재생해보면 사이드바(왼쪽)와 내용(오른쪽)의 연결이 이상한 것을 확인할 수 있다. 페이지 구조는 위와 같다. chosenIndex는 DashBoard 컴포넌트의 state이다. SideBar의 메뉴를 클릭하면 setChosenIndex가 작동하도록 되어 있어, 그 메뉴에 해당하는 내용을 보여주는 getSideBarContent(chosenIndex)의 리턴값이 적절히 바뀌어야 하는데, 적절히 바뀌지 않았다. 맨 처음에만 상품 목록이 제대로 표시되었고, 메뉴 버튼을 누르면 각각에 맞는 내용이 표시되어야 했는데 흰 화면만 떴다. 수정 전 코드를 살펴보자. (관련 있는 코드만 남겨두었다.) // DashBoard.js export const D..

[JS] Array 내장 메소드 reduce를 직접 구현해보자 모 기업 면접 질문으로 나온 reduce 직접 구현해보기... 헷갈려서 제대로 풀지 못했다. 너무 아쉽다. 지금 풀어보니 그렇게 어렵지 않아서 더욱 아쉽다. 왜 이걸 못 풀었을까? 🤔 패인 분석 'reduce가 원본 배열을 변경하는지 / 하지 않는지'가 헷갈렸다. (하지 않는다.) 지금 생각해보면 면접관분들한테 질문을 할 수도 있었던 부분인데, 당황해서 그냥 못했다. 원본 배열을 변경한다고 생각하고 풀면서 열심히 삽질만 했다. 하하! 🔨 console.log(reduce([1, 2, 3, 4], (acc, curr) => acc + curr, 0)); // 10 console.log(reduce([1, 2, 3, 4], (acc, curr) ..

[JS, Phaser 3] 자바스크립트로 게임 개발하기 | 뱀파이어 서바이벌 클론코딩 2022 제주 웹 컨퍼런스에서 발표한 내용을 포스팅으로 정리합니다. 발표 자료는 해당 링크에서 확인하실 수 있습니다. 해당 컨퍼런스는 2022년 6월 2일~4일 동안 진행되었습니다. 저는 'JavaScript로 게임 만들어서 부자되기'라는 세션을 다음과 같은 내용으로 진행했습니다. 개발로 부수입 창출하기 Phaser 3 소개 및 주요 개념 뱀파이어 서바이벌(Vampire Survivors) 클론코딩 앞의 내용은 생략하고, 뱀파이어 서바이벌 클론코딩에 대해 자세히 정리해보려고 합니다. 뱀파이어 서바이벌 클론코딩 일단 제가 클론코딩해서 개발한 Meow Meow Fuzzyface를 한번 플레이해보고 오시면 좋을 것 같습니다...

[JS] 객체 프로퍼티 접근법과 식별자 네이밍 규칙 객체 프로퍼티 접근법과 식별자 네이밍 규칙에 대해 정리하려고 한다. 객체object는 프로퍼티와 메서드로 구성된 집합체이다. 프로퍼티property란 객체의 상태를 나타내는 값(data)이고, 메서드method는 프로퍼티를 참조 및 조작할 수 있는 동작(behavior)이다. 메서드도 결국 프로퍼티인데, 프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위하여 메서드라고 일컫는다. 객체 프로퍼티에 접근하는 방법은 크게 두 가지가 있다. 1. 마침표 표기법dot notation : 마침표 프로퍼티 접근 연산자(.) 사용 2. 대괄호 표기법bracket notation : 대괄호 프로퍼티 접근 연산자([ ... ]) 사용 오늘은 이 중 대괄호 표기법에 대해 ..

[JS] 이벤트 객체의 target, currentTarget 차이 자바스크립트 Event 객체의 프로퍼티인 target, currentTarget의 차이에 대해 알아보자. target은 이벤트가 처음 발생한 DOM 요소, currentTarget은 발생한 이벤트가 등록된(이벤트 핸들러가 바인딩된) DOM 요소를 가리킨다. 가장 쉬운 click 이벤트를 예로 들면, target은 클릭이 일어난 바로 그 요소를 가리키며 currentTarget은 클릭이 일어난 요소부터 상위로 올라가며 이벤트 핸들러가 등록된 요소를 찾아 가리킨다. 이해를 돕기 위해 간단한 HTML 문서를 작성해보았다. 실행 화면과 코드는 다음과 같다. item1 item2two item3 ul { background-color: pink;..

[JS] 얕은 복사, 깊은 복사 차이 쉽게 이해하기 자바스크립트의 얕은 복사(shallow copy), 깊은 복사(deep copy)에 대해 쉽게 이해해보자. 이에 대해 이해하려면 먼저 자바스크립트의 원시 타입(primitive type)과 객체 타입(object/reference type)에 대해 이해해야 한다. 자바스크립트에서 데이터 타입은 크게 원시 타입과 객체 타입으로 나뉜다. 원시 타입에는 Number, BigInt, String, Boolean, Null, Undefined, Symbol 7개의 타입이 있고, 그 외 모든 데이터는 객체 타입이다. 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 반면에, 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값..

[자바스크립트] 이벤트 위임을 활용한 Event Listener 중복 해결 드림코딩에서 '프론트엔드 필수 브라우저 101' 강의를 듣다가, 쇼핑 리스트 만들기 실습 문제를 풀어보았다. input 창에 내용을 입력하고 추가 버튼을 누르거나 엔터 키를 누르면 목록에 아이템이 추가되고, 추가된 목록에서 오른쪽 삭제 버튼을 누르면 해당 아이템이 삭제되는 간단한 웹사이트이다. 추가/삭제 기능은 원하는 대로 이루어지지만, 위와 같이 삭제 버튼에 Event Listener가 여러 개 쌓이는 문제가 있었다. 이는 아이템을 추가할 때마다 document에서 삭제 버튼을 모두 찾고, 찾은 모든 삭제 버튼에 Event Listener를 각각 추가해주도록 구현했기 때문이다. 겉보기에는 문제가 없어보이지만, 현재 프로그램의 경..