전체 글 (75) 썸네일형 리스트형 [모던 JS] CH41. 타이머, CH43. Ajax CH41. 타이머 41.1 호출 스케줄링 - 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이루에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용 : 호출 스케줄링 ! 타이머를 생성할 수 있는 함수 : setTimeout / setInterval ! 타이머를 제거할 수 있는 함수 : clearTimeout / clearInterval -> 타이머 함수는 비동기 처리 방식으로 동작함 41.2 타이머 함수 41.2.1 setTimeout / clearTimeout - setTimeout 함수는 두 번째 인수로 전달받은 시간으로 단 한 번 동작하는 타이머를 생성함 - 타이머가 만료되면 첫 번째 인수로 전달받은 콜백 함수가 호출됨 - setTimeout 함수가 반환한 타이머 id를 clearTimeo.. [모던 JS] CH40. 이벤트 CH40. 이벤트 40.1 이벤트 드리븐 프로그래밍 - 처리해야 할 특정 사건이 발생하면 이벤트를 발생시킴 - 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러 - 이벤트가 발생했을 때 브라우저에게 이벤트 핸들어의 호출을 위임하는 것을 이벤트 핸들러 등록 40.2 이벤트 타입 - 이벤트의 종료를 나타내는 문자열 - 교재 p. 755~ 757 40.3 이벤트 핸들러 등록 40.3.1 이벤트 핸들러 어트리뷰트 방식 - 이벤트 핸들러 어트리뷰트 값은 암묵적으로 생성될 이벤트 핸들러의 함수 몸체 - 알아둘 필요는 있지만 사용하지 않는 것이 좋음 40.3.2 이벤트 핸들러 프로퍼티 방식 - 이벤트 핸들러는 이벤트 타깃 또는 전파된 이벤트를 캐치할 DOM 노드 객체에 바인딩함 - 이벤트 핸들러 어트리뷰트 방식의 H.. [모던 JS] CH37. Set과 Map, CH42. 비동기 프로그래밍 CH37. Set과 Map 37.1 Set - Set: 중복되지 않는 유일한 값들의 집합 - 배열과 유사하지만 차이가 있음 - 수학적 집합의 특성과 일치함 (수학적 집합을 구현하기 위한 자료구조) 37.1.1 Set 객체의 생성 - Set 생성자 함수로 생성 - 인수를 전달하지 않으면 빈 Set 객체 생성 - 이터러블을 인수로 전달받아 Set 객체를 생성함 - 이터러블의 중복된 값은 Set 객체에 요소로 저장되지 않음 const set = new Set(); console.log(set); // Set(0) {} conset set2 = new Set('hello'); console.log(set2); // Set(4) {"h", "e", "l", "o"} 37.1.2 요소 개수 확인 - Set.prot.. [모던 JS] CH 34. 이터러블, CH 35. 스프레드 문법, CH 36. 디스트럭처링 할당 # 20 CH 34. 이터러블 34.1 이터레이션 프로토콜 34.1.1 이터러블 - 이터러블 프로토콜을 준수한 객체 - Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체 - 이터러블은 for ... of 문으로 순회할 수 있으며 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용 const arr = [1, 2, 3]; console.log(Symbol.iterator in arr); // true // for ... of 문으로 순회 가능 for (const item of arr) { console.log(item); } // 스프레드 사용 console.log([...arr]); // [1, 2, 3] 34.1.2 이터레이터 - 이터레이터 프.. [모던 JS] CH 39. DOM CH 39. DOM DOM? HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API(프로퍼티와 메서드)를 제공하는 트리 자료구조 39.1 노드 39.1.1 HTML 요소와 노드 객체 - HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미함 - HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환됨 - HTML 요소의 어트리뷰트는 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환됨 39.1.2 노트 객체의 타입 문서노드, 요소노드, 어트리뷰트 노드, 텍스트 노드 예시) 다음 HTML 문서를 렌더링 엔진이 파싱 -- DOM 트리 생성 39.1.3 노드 객체의 상속 구조 - DOM은 HTML 문서의 계층적 구조와 정보를 표현 - 노드 타.. [모던 JS] CH 38. 브라우저의 렌더링 과정 CH 38. 브라우저의 렌더링 과정 렌더링? - HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것 38.1 요청과 응답 - 브라우저의 핵심 기능 : 필요한 리소스(HTML, CSS 등)를 서버에 요청하고 서버로부터 응답 받아 브라우저에 시각적으로 렌더링하는 것 - 브라우저의 주소창에 URL을 입력하고 엔터를 누르면 URL의 호스트 이름이 DNS를 통해 IP주소로 변환 - 이 IP 주소를 갖는 서버에게 요청을 전송 38.2 HTTP 1.1과 HTTP 2.0 - HTTP는 웹에서 브라우저와 서버가 통신하기 위한 프로토콜(규약) HTTP1.1 - 기본적으로 커넥션 당 하나의 요청과 응답만 처리 - 리소스의 동시 전송이 불가능한 구조 - 요청할 리소스의 개수에 비례하여 응답 시.. [모던 JS] CH 32. String, CH33. 7번째 데이터 타입 Symbol CH 32. String 32.1 String 생성자 함수 - 각 문자를 프로퍼티 값으로 갖는 유사 배열 객체이면서 이터러블 - 문자열은 원시 값이므로 변경 불가, 이때 에러는 발생하지 않음 - 생성자 함수의 인수로 문자열이 아닌 값을 전달하면 인수를 문자열로 강제 변환 후 객체 생성함 const strObj = new String('Lee'); strObj[0] = 'S'; console.log(strObj); // 'Lee' let strObj = new String(123); console.log(strObj); // String {0:"1", 1:"2", 2:"3", length:3, [[PrimitiveValue]]:"123"} strObj = new String(null); console.lo.. [모던 JS] CH 28. Number, CH 29. Math, CH 30. Date, CH 31. RegExp (#16) CH 28. Number 28.1 Number 생성자 함수 - new 연산자와 함께 호출하면 [[NumberData]] 내부 슬롯에 0을 할당한 Number 래퍼 객체를 생성함 const nobj = new Number(); console.log(nobj); // Number {[[PrimitiveValue]]: 0} - new 연산자를 사용하지 않고 Number 생성자 함수를 호출하면 Number 인스턴스가 아닌 숫자를 반환함. 이를 이용해 명시적으로 타입 변환 (9장) 28.2 Number 프로퍼티 28.2.1 Number.EPSILON - 1과 1보다 큰 숫자 중에서 가장 작은 숫자와의 차이 - 부동소수점으로 인해 발생하는 오차 해결을 위해 사용 function isEqual(a, b) { retu.. 이전 1 2 3 4 5 6 7 ··· 10 다음
