정승현

60초 0점 3목숨 시작 * 누적 확률 이 게임에서는 두더지가 등장할 확률을 0.3% 폭탄이 등장할 확률을 0.2%, 그리고 아무것도 등장하지 않을 확률을 0.5%로 하려고 한다. 근데 위 코드에서는 두더지가 등장할 확률을 0.3%, 폭탄이 등장할 확률을 0.5%로 선언해놓았는데, 그 이유는 아래와 같다. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 가 있다고 가정했을 때, randomValue는 0~9 사이의 랜덤한 수를 뽑게 되고, if의 특성상 randomValue가 0, 1, 2면 위 조건에 합당해 두더지가 등장하게 되고, randomValue가 3~4 라면 else if로 내려가 폭탄이 등장하게 되기 때문에 사실상 폭탄은 3~4에만 반응하게 되고, 두더지는 0, 1, 2에 반응해 30%가..

0 되돌리기 * DocumentFragment 화면에 태그를 추가하고자 할 때, createElement로 태그를 생성하여 실제 태그에 바로 추가 ( append ) 하는 방식은 잘 사용하지 않는다. 왜냐하면, append 할 때마다 화면은 그려지게 되는데, 그에 따라 append하는 태그의 양이 많아질수록 화면에는 렉이 걸린 것 처럼 지연 시간이 길어지게 되므로 성능상의 문제가 생기기 때문이다. 그래서 이를 해결하기 위해서는 document.createDocumentFragment 메서드를 통해 메모리 안에서만 존재하는 documentFragment를 생성하여, documentFragment 안에 필요한 태그를 추가 ( append ) 한 뒤, 마지막으로 $table에 한 번에 documentFragm..

생성 0초 * ContextMenu Event 지금까지 클릭 이벤트를 받을 때는 모두 마우스 좌클릭을 통해 발생한 이벤트를 다루었다. 하지만, 마우스 우클릭을 통해 발생한 이벤트는 contextmenu를 사용하면 된다. 하지만 이 때, contextmenu 이벤트는 기본적으로 브라우저 메뉴를 띄우므로 이를 막기 위해서는 submit에서 기본 동작을 막았던 것처럼 event.preventDefault(); 메서드를 호출해주어야 한다. # Optional Chaining ?.는 Optional Chaining(옵셔널 체이닝) 이라는 문법이다. 앞에 있는것이 참이라면 뒤의 코드를 실행하고, 거짓인 값이라면 코드를 통째로 undefined를 만들어 null이 발생해 에러날 수 있는 코드를 null safety하..

* Event Loop & Call Stack Call Stack(호출 스택)은 동기 코드를 담당하고, Event Loop(이벤트 루프)는 비동기 코드를 담당한다. 여기서, 백그라운드와 태스크 큐의 개념을 알아야 하는데, 백그라운드는 타이머를 처리하고, 이벤트 리스너를 저장하는 공간이다. 예시로, setTimeout 같은 함수가 실행되면 백그라운드에서 시간을 재고 시간이 되면 setTimeout에 정의 해놓은 콜백 함수를 태스크 큐로 보내게 된다. 즉, 이 시점에서는 백그라운드에서 코드가 실행되는 것이 아니라 실행될 콜백 함수들이 태스크 큐로 들어간다는 것이다. 태스크 큐는 실행되어야 할 콜백 함수들이 대기하고 있는 공간이다. 태스크 큐에 먼저 들어온 함수부터 실행되기 시작하지만 이 때, 태스크 큐가 함..

시작 1. 모험 2. 휴식 3. 종료 입력 1.공격 2.회복 3.도망 입력 * 얕은복사 & 깊은 복사 & 참조 const a = []; const b = 'hi'; const c = {}; const arr = [a, b, c]; 다음과 같은 코드가 있다고 가정해보자, 여기서 arr 배열을 참조하는것은 아래 코드와 같다. const arr1 = arr; 하지만 이렇게 배열을 참조 할 경우, 아래 그림과 같이 하나가 변경되게 되면 둘은 참조 관계이기 때문에, 둘 모두가 영향을 받게 된다. 그래서 기존 값에 영향을 주지 않고 arr1의 값을 바꾸고 싶다면 참조가 아닌, 복사를 해야 하는데 이 때 복사하는 방법은 얕은 복사와 깊은 복사 두 가지로 나뉜다. 얕은 복사는 다음과 같은 방법으로 할 수 있고, ( c..

* 구조분해 할당 객체 내부의 속성과 할당하는 변수명이 같을 때 구조분해 할당 을 사용하여 코드를 줄여 사용할 수 있다. 예제를 통해 더 쉽게 이해해보자, const body = document.body; 라는 코드가 있을 때, 이를 구조분해 할당하면 const { body } = document; 로 사용할 수 있다. 또한, 여러 개의 속성을 변수에 넣는 경우에도 위 코드처럼 사용한다면, const a = obj.a; const b = obj.b 라는 코드를 한 줄로 사용할 수 있다. 예제 ) 아래 코드를 구조분해 해보기. const obj = { a: 'hello', b: { c: 'hi', d: { e: 'wow' }, }, }; 이렇게 하면, "const a = obj.a", "const c = ..

클릭해서 시작하세요. * classList Tag.classList를 통해 Tag의 Class들을 가져올 수 있다. 일반적으로, Tag.className을 하면 Tag의 className을 가져올 수 있지만, class를 여러 개 가지고 있는 경우에는 아래 그림처럼 문자열로 class들을 다 나열하게 된다. $screen.classList.add('hello', 'hi', 'bye'); console.log($screen.className); ↓ 그렇기 때문에, class를 여러 개 가지고 있는 경우에는 classList를 사용하는것이 더 간편한데, 사용법은 아래와 같다. Tag.classList.contains('#className') 을 통해 true / false 로 해당 class를 가지고 있는지..

가위 바위 보 0 * setInterval 일정시간을 두고, 그 간격마다 해당 코드를 실행하고자 할 때 쓸 수 있는 메소드이다. 사용 방법은 아래 예시와 같다. 이 코드를 실행하게 되면 일정 간격 (1초) 마다 hello를 출력하게 된다. * setTimeout은 일정 시간이 지난 후 특정 동작을 실행하는 반면 setInterval은 일정 시간을 두고 특정 동작을 계속 반복해서 실행한다는 차이점도 있지만, 아래와 같이 실행할 경우 비슷하게 동작하기도 한다. 하지만 이 때, setTimeout은 console.log가 실행된 뒤부터 1초후에 실행이 되는 것으로, 정확하게 1초 간격으로 특정 동작을 수행한다고 보장할 수는 없다. 그렇기 때문에 정확한 시간에 특정 동작이 실행되는 것을 보장하기 위해서는 set..

추첨 결과는 ? 보너스 * Sort 숫자나, 글자 등을 오름차순 혹은 내림차순으로 정렬하고자 할 때 java script의 sort()라는 메서드를 사용할 수 있다. 먼저, 숫자를 오름차순으로 정렬하고자 한다면, 아래와 같이 사용할 수 있다. 1. 숫자의 정렬 하지만, 이 경우 sort를 하고 나면 원본 (arr)이 초기 상태가 아닌, 정렬 된 상태로 바뀌어 버리기 때문에 원본을 유지하면서 sort를 하고 싶다면 다음과 같은 방법으로 사용이 가능하다. 이렇게 사용하면, 원본의 내용이 바뀌지 않으면서 sort된 값을 변수에 담는 등의 방법으로 정렬 된 값을 구할 수 있다. 또한, 그림을 통해 알 수 있듯이, a - b는 숫자를 오름차순으로 정렬할 수 있고, 반대로 b - a를 한다면 숫자를 내림차순으로 정..

확인 * form의 기본 동작 제거하기 ( a태그도 마찬가지로 사용 가능 ) 웹 브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다. 예를 들어, a 태그를 클릭하면 href 속성의 URL로 이동한다던지, form에서 submit 버튼을 누르면 데이터가 전송 되는 동작들이 해당한다. 하지만 form의 경우, DB로 데이터를 전송하고 받아오는 등의 기본 동작들을 진행하면서 페이지가 새로고침 되기 때문에, 이번 예제에서는 숫자 야구를 위해 숫자를 기껏 뽑아놓고 그 숫자들이 새로고침 되는 현상이 발생한다. 그렇기 때문에 form의 기본 동작을 제거해줄 필요가 있고, 제거하는 방법은 다음과 같다. $form.addEventListener('submit', (event) => { event.preven..