개발자 지망생의 블로그

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

프로그래머스 1단계 문제인 '숫자 문자열과 영단어'를 자바스크립트로 풀어보았다. [문제 설명] 네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다. 다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다. 1478 → "one4seveneight" 234567 → "23four5six7" 10203 → "1zerotwozero3" 이렇게 숫자의 일부 자릿수가 영단어로 바뀌어졌거나, 혹은 바뀌지 않고 그대로인 문자열 s가 매개변수로 주어집니다. s가 의미하는 원래 숫자를 return 하도록 solution 함수를 완성해주세요. function solution(s) { const NUM_MAP = { ..

프로그래머스 1단계 문제인 '소수 만들기'를 자바스크립트로 풀어보았다. [문제 설명] 주어진 숫자 중 3개의 수를 더했을 때 소수가 되는 경우의 개수를 구하려고 합니다. 숫자들이 들어있는 배열 nums가 매개변수로 주어질 때, nums에 있는 숫자들 중 서로 다른 3개를 골라 더했을 때 소수가 되는 경우의 개수를 return 하도록 solution 함수를 완성해주세요. function isPrime(num) { if (num === 1) { return false; } for (let i=2; i acc + cur, 0)); return; } if (idx === nums.length) return; combination(idx+1, chosen, nums, sums); chosen = [...chose..

프로그래머스 1단계 문제인 'K번째수'를 자바스크립트로 풀어보았다. [문제 설명] 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작..

[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] 객체 프로퍼티 접근법과 식별자 네이밍 규칙 객체 프로퍼티 접근법과 식별자 네이밍 규칙에 대해 정리하려고 한다. 객체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를 각각 추가해주도록 구현했기 때문이다. 겉보기에는 문제가 없어보이지만, 현재 프로그램의 경..