*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다. 1. 호출 스케줄링 일정시간이 지나고 나서 함수가 호출되도록 하려면 타이머 함수를 사용해야한다. 이를 호출 스케줄링이라 한다. 자바스크립트에서는 타이머를 생성할 수 있는 setTimeout과 setInterval, 타이머를 제거할 수 있는 clearTimeout과 clearInterval을 제공한다. 여기서 setTimeout과 setInterval은 비동기 처리방식으로 동작한다. 2. 타이머 함수 setTimeout / clearTimeout setTimeout 함수는 ms단위로 받은 두번째 인수의 시간으로 첫번째 함수를 단 한번 실행하는 타이머를 생성한다. 첫 번째 매개변수 : 타이머가 만료된 뒤 호출될 콜백 함수 두 번째 매개변수 : 타이머 ..
*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다. 1. 이벤트 드리븐 프로그래밍 브라우저는 처리해야할 특정 사건(클릭, 스크롤 등)이 발생했을 때 이를 감지해 이벤트를 발생시킨다. 이러한 이벤트에 대응해서 호출하고 싶은 함수가 있을 것이다. 이런 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라고 한다. 그리고 브라우저에게 이벤트 핸들러가 호출될 수 있게 하는것을 이벤트 핸들러 등록이라고 한다. Click me! 위에서 보았듯이, 이벤트 핸들러 프로퍼티에 함수를 할당하면 해당 이벤트가 발생했을 때 할당한 함수가 호출된다. 이와 같이 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식을 이벤트 드리븐 프로그래밍이라 한다. 2. 이벤트 타입 이벤트 타입은 이벤트의 종류를 나타내는 문자열이다...
*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다. DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 프로퍼티와 메서드들은 제공하는 API이다. 1. 노드란 HTML요소는 HTML 문서를 구성하는 개별적인 요소를 말한다. 이 HTML 요소가 엔진에 의해 DOM을 구성하는 노드 객체로 변환된다. 이때 HTML 요소 간의 부자 관계를 반영해 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성한다. 이렇게 노드 객체들로 구성된 트리 자료구조를 DOM이라 한다. 이렇게해서 노드 타입에 따라 필요한 기능을 모은 DOM api가 있고 이 DOM api를 통해 HTML의 구조나 내용 또는 스타일 등을 동적으로 조작할 수 있다. 2. 요소 노드 얻기 우선 HTML의 구조나 내용, 스타일을 조..
*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다. 디스트럭처링 할당은 배열이나 이터러블 객체등을 비구조화해서 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 간단히 말해서 배열의 요소나 객체의 프로퍼티 값같은걸 다른 변수에 저장하는 것이다. 1. 배열 디스트럭처링 할당 const arr = [1, 2, 3]; // ES5 var one = arr[0]; var two = arr[1]; var three = arr[2]; console.log(one, two, three); // 1 2 3 // ES6 배열 디스트럭처링 할당 const [one, two, three] = arr; console.log(one, two, three); // 1 2 3 ES6의 배열 디스트럭처링 할당은 배열의 각 ..
*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다. 스프레드 문법, ... 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. *이터러블 한정으로만 쓸 수 있다. console.log(...[1, 2, 3]); // [1, 2, 3] -> 1, 2, 3 console.log(...'Hello'); // H e l l o console.log(...{ a: 1, b: 2}); // 일반 객체는 스프레드 문법의 대상이 될 수 없다. 이 예제처럼 ...[1, 2, 3]은 개별적인 값들의 목록 1 2 3으로 만든다. 즉, 스프레드 문법의 결과는 값이 아니다. 그래서 이 문법은 다음과 같이 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다. 함수 호출문의 인수 목록..
*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다. 1. 이터레이션 프로토콜 ES6에서 순회가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일해 for ... of, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 했다. 이러한 이터레이션 프로토콜은 두 가지로 나뉜다. 이터러블 프로토콜 : 이터러블 프로토콜을 준수한 객체를 이터러블이라고 한다. 이터레이터 프로토콜 : 이터레이터 프로토콜을 준수한 객체를 이터레이터라 한다. 이터레이터는 이터러블의 요소를 탐색하기 위한 포인터 역할을 한다. 이터러블 이터러블 프로토콜을 준수한 객체를 이터러블이라고 한다. 즉, Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은..
*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다. 1. 심벌이란? ES6에서 도입된 변경 불가능한 원시 타입의 값이다. 이 값은 절대적으로 유일무이한 값이라고 한다. 따라서 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용한다. 2. 심벌 값의 생성 Symbol 함수 심벌 값은 Symbol 함수를 호출해서 생성해야한다. // Symbol 함수를 호출해서 유일무이한 심벌 값을 생성한다. const mySymbol = Symbol(); console.log(typeof mySymbol); // symbol // 심벌 값은 외부로 노출되지 않아 확인할 수 없다. console.log(mySymbol); // Symbol() Symbol.for / Symbol.keyFor 메서드 Sy..
*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다. 1. 함수의 구분 ES6 이전에는 동일한 함수라도 다양한 형태로 호출할 수 있었다. var foo = function () { return 1; }; // 일반적인 함수 foo(); // -> 1 // 생성자 함수 new foo(); // -> foo {} // 메서드 var obj = { foo: foo}; obj.foo(); // -> 1 이 처럼 ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있느 것은 물론 생성자 함수로서 호출할 수 있다. 그래서 혼란스럽고 실수를 유발할 가능성이 있고 성능에도 좋지않다. 그래서 ES6에서는 함수를 사용 목적에 따라 세 가지 종류로 명확히 구분했다. ES6 함수의 구분 constructor prototy..
