정승현

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

* 구조분해 할당 객체 내부의 속성과 할당하는 변수명이 같을 때 구조분해 할당 을 사용하여 코드를 줄여 사용할 수 있다. 예제를 통해 더 쉽게 이해해보자, 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..