전체 글
-
41_Timer모던 자바스크립트 딥 다이브 독학 2023. 12. 25. 12:29
호출 스케줄링 함수를 명시적으로 호출하면 함수가 즉시 실행됨. 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용 → 호출 스케줄링 타이머 생성: setTimeout, setInterval 타이머 제거: clearTimeout, clearInterval 타이머 함수는 ECMAScript 빌트인 함수가 아닌 브라우저 환경, Node.js 환경의 전역 객체 메서드이면서 호스트 객체다. 자바스크립트 엔진은 싱글 스레드로 동작하기 때문에 타이머함수는 비동기 처리 방식으로 동작 타이머 함수 setTimeout/clearTimeout → 생성된 타이머를 식별할 수 있는 고유한 타이머 id 반환 setTimeout(() => console.log('..
-
40_Event모던 자바스크립트 딥 다이브 독학 2023. 12. 20. 19:44
이벤트 드리븐 프로그래밍 이벤트와 그에 대응하는 이벤트 핸들러(함수)를 통해 사용자와 애플리케이션의 상호작용, 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식 이벤트 핸들러: 이벤트가 발생했을 때 호출될 함수 이벤트 핸들러 등록: 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것 이벤트 타입 마우스 이벤트 키보드 이벤트 포커스 이벤트 폼 이벤트 값 변경 이벤트 DOM 뮤테이션 이벤트 뷰 이벤트 리소스 이벤트 이벤트 핸들러 등록 3가지 방법 이벤트 핸들러 어트리뷰트 방식(on 접두사와 이벤트 타입) Click me! 이벤트 핸들러 어트리뷰트 값으로 함수 참조가 아닌 함수 호출문 등의 문을 할당 이벤트 핸들러 어트리뷰트 값은 암묵적으로 생성될 이벤트 핸들러의 함수 몸체를 의미한..
-
39_Dom모던 자바스크립트 딥 다이브 독학 2023. 12. 14. 09:24
HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조 DOM API(DOM이 제공하는 프로퍼티와 메서드)를 사용하여 노드에 접근하고 HTML의 구조, 내용, 스타일 등을 동적으로 변경하는 방법을 익혀야 한다! 노드(문서, 요소, 어트리뷰트, 텍스트 노드) HTML 요소의 어트리뷰트 → 어트리뷰트 노드 HTML 요소의 텍스트 콘텐츠 → 텍스트 노드 트리 자료구조(중첩 관계에 의한 계층적인 부모-자식 관계를 형성하는 비선형 자료구조) 노드 객체들로 구성된 트리 자료구조를 DOM이라 한다! 모든 노드 객체는 Object, EventTarget, Node 인터페이스를 상속받는다. 요소 노드 취득 document.getElementById → ..
-
38_Rendering모던 자바스크립트 딥 다이브 독학 2023. 12. 12. 09:21
파싱(구문 분석): 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해(어휘 분석)하고 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정. 파싱이 완료된 이후 파스 트리를 기반으로 중간 언어인 바이트코드를 생성하고 실행. 렌더링: HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것 브라우저의 렌더링 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트, 파일 등 렌더링에 필요한 리소스를 서버에 요청하고 서버로부터 응답받는다. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML 과 CSS 를 파싱하여 DOM과 CSSOM을 생성, 이들을 결합하여 렌더 트리를..
-
37_Set & Map모던 자바스크립트 딥 다이브 독학 2023. 12. 11. 10:44
Set 객체는 중복되지 않는 유일한 값들의 집합! 배열과 다르게 요소 순서에 의미가 없고 인덱스로 요소에 접근할 수 없다 수학적 집합을 구현하기 위한 자료구조! Set set객체 생성 → set 생성자 함수(인수 전달하지 않으면 빈 set 객체 생성) const set = new Set(); console.log(set); // set(0) {} const set1 = new Set([1, 2, 3, 4]); console.log(set1); // Set(3) {1, 2, 3} const set2 = new Set('hello'); console.log(set2); // Set(4) {"h", "e", "l", "o"} 요소 개수 확인 → Set.prototype.size(getter 함수..
-
36_Destructuring모던 자바스크립트 딥 다이브 독학 2023. 12. 8. 17:36
구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당하는 것! 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다! 배열 디스트럭처링 할당 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 한다. 할당 기준은 배열의 인덱스다.(순서대로 할당) const arr = [1, 2, 3]; const [one, two, three] = arr; console.log(one, two, three); // 1 2 3 //왼쪽에 값을 할당받을 변수를 선언해야 한다. 배열 리터럴 형태로 선언 const [x, y] = [1, 2]; //우변에 이터러블을 할당하지 않으면 에러 발생 const [x, y]; // SyntaxError..
-
35_Spread Syntax모던 자바스크립트 딥 다이브 독학 2023. 12. 7. 10:22
하나로 뭉쳐 있는 여러 값들의 집합을 펼처서 개별적인 값들의 목록으로 만든다! 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments 와 같이 for…of 문으로 순회할 수 있는 이터러블에 한정된다! 스프레드 문법의 결과는 값이 아닌 값들의 목록이기 때문에 변수에 할당할 수 없다! 함수 호출문의 인수 목록 배열 리터럴의 요소 목록 객체 리터럴의 프로퍼티 목록 Rest 파라미터와 스프레드 문법 혼동 주의! 서로 반대 개념이다. 함수 호출문의 인수 목록 const arr = [1, 2, 3]; const max = Math.max(arr); // NaN const max = Math.max(...ar..
-
34_Iterable모던 자바스크립트 딥 다이브 독학 2023. 12. 3. 15:29
이터러블 프로토콜을 준수한 객체를 이터러블이라 한다. 이터러블은 for…of 문으로 순회할 수 있으며 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있다. (배열, 문자열, Map, Set 등) 이터레이터 프로토콜을 준수한 객체를 이터레이터라 한다. 이터레이터는 이터러블의 요소를 탐색하기 위한 포인터 역할을 한다. 이터러블의 Symbol.iterator 메서드가 반환한 이터레이터는 next 메서드를 갖는다. const array = [1, 2, 3]; const iterator = array[Symbol.iterator](); // Symbol.iterator 메서드는 이터레이트를 반환 console.log('next' in iterator); // true 일반 객체는 fo..