탄탄한 기본기!

디바운스와 스로틀은 scroll, resize, input, mousemove 같은 짧은 간격으로 연속적으로 이벤트를 발생시키는 경우에 과도한 이벤트 발생을 방지하는 기법이다. 1. 디바운스(debounce) 예를 들어서 click 같은 경우에 오토 마우스같은 툴을 사용해서 1초에 10번씩, 혹은 사람의 손으로 소위 말하는 '광클'로 클릭 이벤트를 1초에 1번 이상 발생시킬 수 있다. 하지만 이러한 클릭 이벤트를 조절하고 싶을 때, 디바운스라는 기법을 사용할 수 있다. 디바운스는, 엘리베이터를 생각하면 이해하기 쉽다(https://css-tricks.com/debouncing-throttling-explained-examples/). 엘리베이터를 타고 문이 닫히려고 할 때, 누군가 열림 버튼(이벤트 발생..

BOJ 1079 - 마피아 1079번: 마피아 첫째 줄에 참가자의 수 N이 주어진다. 둘째 줄에는 각 참가자의 유죄 지수가 주어진다. 셋째 줄부터 N개의 줄에는 배열 R이 주어진다. 마지막 줄에는 은진이의 참가자 번호가 주어진다. N은 16보다 www.acmicpc.net 문제 문제 풀이 일단 이 문제는 백트래킹 문제라는 것을 바로 알 수 있었다. 재귀를 구현할 때 낮과 밤을 잘 구분한 다음 조건에 맞도록 낮에는 투표로 살아있는 사람들 중 유죄 지수 배열에서 숫자가 제일 높은 사람을 죽이고 밤이라면 마피아가 무작위로 한 명 골라서 죽인다. 라는 로직에 충실히 구현을 하고자했다. 근데 1시간이 넘도록 계속 "틀렸습니다"가 떠서 테스트 케이스들도 많이 만들어보고 로직도 계속 확인했는데... 문제를 잘못 이해..

DOM(Document Object Model)은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조이다. 1. 노드 Hello 위와 같은 HTML요소는 div 요소 노드를 생성하는데, 이때 어트리뷰트는(class, id 등) 어트리뷰트 노드로, 텍스트 콘텐츠의 경우에는 텍스트 노드로 따로 구분된다. 참고로 HTML의 태그들 사이의 개행이나 공백들은 텍스트 노드가 된다. HTML 문서는 이러한 요소들의 집합으로 이루어지며, 중첩 관계를 통해 트리 구조로 구성된다. 1.1 노드의 종류 노드의 타입은 문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드로 나눌 수 있다. 문서 노드는 DOM 트리의 최상위에 존재하는 루트 노드로서 doc..

Set과 Map은 ES6에 도입된 새로운 자료구조이다. 1. Set Set객체는 중복을 허용하지 않는 자료구조이다. 배열과 유사하지만 중복이 안된다는 점, 요소의 순서가 의미 없다는 점, 인덱스로 요소에 접근할 수 없다는 점에서 차이가 존재한다. 1.1 Set 객체 생성 Set객체는 아래와 같이 생성자 함수로 생성한다. const set = new Set(); console.log(set); // Set(0) {} const set1 = new Set([1, 2, 3, 3]); console.log(set1); // Set(3) {1, 2, 3} const set2 = new Set('hello'); console.log(set2); // Set(4) {"h", "e", "l", "o"} 이 때 만약 인..

이터러블 프로토콜을 준수한 객체를 이터러블이라 하며, 이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 1. 빌트인 이터러블 자바스크립트에는 아래와 같은 이터레이션 프로토콜을 준수한 빌트인 이터러블 객체들이 존재한다. Array String Map Set TypedArray arguments DOM Collection 2. 이터러블과 이터레이터 이터러블은 이터러블 프로토콜을 준수한 객체이며, Symbol.iterator를 프로퍼티 키로 직접 메서드를 구현하거나 상속(프로토타입) 받은 객체를 말한다. 즉, 객체의 프로퍼티로 Symbol.iterator가 존재해야지 이터러블인 것이다. const array = [1, 2, 3]; console.log..

심벌은 자바스크립트의 7가지의 타입들(문자열, 숫자, 불리언, undefined, null, 객체, 심벌) 중 하나이며, ES6에 도입되어 사용되고 있다. 1. Symbol 함수 심벌 값은 Symbol 함수를 호출하여 생성해야 하며 리터럴로 생성이 불가능하다. 생성된 심벌 값은 외부로 노출이 되지 않기 때문에 확인할 수 없으며 다른 어떠한 값들과도 절대로 중복되지 않는 유일한 값이다. 그리고 심벌을 생성할 때, 인수로 문자열을 전달할 수 있는데 이 때 문자열은 해당 심벌을 생성해서 구분하기 위한, 즉 디버깅 용도로 사용되며 심벌 값과는 상관이 없다. const mySymbol = Symbol('hello'); console.log(mySymbol); // Symbol(hello) const mySymbo..

Node.js 는 프레임워크가 아니라 자바스크립트를 실행시킬 수 있는 런타임 환경이다. 자바스크립트의 런타임 환경 예전에는 자바스크립트를 실행할 수 있는 환경이 브라우저에만 한정되어 있었다. 하지만 이러한 자바스크립트를 브라우저에서 꺼내와 그 밖에서도 실행할 수 있도록 만들고 싶어 했다. 그래서 나오게 된 자바스크립트 환경이 Node.js이다. 브라우저와 Node.js 브라우저에서는 자바스크립트가 File을 읽을 수는 있지만, update나 write(delete)을 하면 안 된다. 웹 사이트에서 파일을 조작한다는 것은 결국 해킹이다. 즉, 이러한 기능을 제공할 필요가 없기 때문에 원척적으로 파일 컨트롤을 보안 문제 때문에 불허한다. 반면에 Node.js의 경우에는 서버를 개발하는 등의 환경에서 사용되기..

leetcode Monthly Challenge - N-Queens II N-Queens II - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 문제 문제 풀이 해당 문제 역시 leetcode의 5월 Daily Challenge 문제였다. 문제를 풀이한 후에 난이도가 Hard인 것을 확인했는데, 사실 N-Queen 문제는 워낙 유명하기도 하고 예전에 백준에서 비슷한 문제를 한 번 풀어본 적 있었기 때문에 어렵지 않게 풀이할 수 있었던 것 같다. 사실 이 문제는 ..