탄탄한 기본기!

자바스크립트에는 Promise라는 아주 중요한 객체가 있다. 내부적으로 비동기적인 로직을 처리할 때 이 Promise객체를 통해서 callback hell이나 에러 처리 등 여러 가지 문제점들을 해결해주고 있다. // callback hell get('/step1', a => { get(`/step2/${a}`, b => { get(`/step3/${b}`, c => { get(`/step4/${c}`, d => { console.log(d); }); }); }); }); 이러한 코드를 Promise를 사용해 바꾸면 다음과 같다. promiseGet(`/step/1`) .then(a => promiseGet(`/step/${a}`)) .then(b => promiseGet(`/step/${b}`)) .t..

Ajax란 Asynchronous Javascript And XML이라는 뜻으로, 자바스크립트를 사용해 서버에 비동기적인 방식으로 데이터를 요청해 동적으로 웹페이지를 갱신하는 방식을 의미한다. 1. Ajax Ajax는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. 그리고 XMLHttpRequest는 비동기적인 HTTP 통신을 위해서 여러 메서드와 프로퍼티 등을 제공한다 이전의 웹페이지의 경우에는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 전송받아 웹페이지 전체를 렌더링하는 방식으로 동작했다. 그렇기 때문에 화면이 전환되면 웹페이지 전체를 처음부터 다시 렌더링해야했기 때문에 화면이 깜빡거리는 현상이 발생했다. 이러한 방식은 매번 완전한 HTML파일을 항상 전송..

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

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의 경우에는 서버를 개발하는 등의 환경에서 사용되기..