2022-2 웹개발 스터디 (28) 썸네일형 리스트형 [모던 JS] CH47. 에러 처리, CH48. 모듈 CH47. 에러 처리 47.1 에러 처리의 필요성 - 프로그램이 강제 종료되지 않고 계속해서 코드를 실행시킬 수 있음 ! 직접적으로 에러를 발생하지는 않는 예외적인 상황이 발생할 수도 있음 : 이 경우 예외적인 상황에 적절하게 대응하지 않으면 에러로 이어질 가능성 const $elem = document.querySelector('#1'); // DOMException // 인수로 전달한 CSS 선택자 문자열로 DOM에서 요소 노드를 찾을 수 없는 경우 // 에러를 발생시키지 않고 null을 반환함 47.2 try...catch...finally 문 에러 처리를 구현하는 방법 1. querySelector나 Array#find 메서드처럼 예외적인 상황이 발생하면 반환값을 if 문이나 단축 평가 또는 옵셔.. [모던 JS] CH46. 제너레이터와 async/await CH46. 제너레이터와 async/await 46.1 제너레이터란? : 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 함수 // 일반 함수와의 차이 1. 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있음 (yield) 2. 제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있음 3. 제너레이터 함수를 호출하면 제너레이터 객체를 반환함 46.2 제너레이터 함수의 정의 - function* 키워드로 선언 - 하나 이상의 yield 표현식 포함 - *의 위치는 function 키워드와 함수 이름 사이라면 어디든지 상관없음 : 하지만, 일관성을 유지하기 위해 function 키워드 바로 뒤에 붙이는 것을 권장함 - 제너레이터 함수는 화살표 함수로 정의할 수 없음.. [모던 JS] CH45. 프로미스 CH45. 프로미스 - 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있음 45.1 비동기 처리를 위한 콜백 패턴의 단점 45.1.1 콜백 헬 - 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료됨 : 비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결과를 외부로 반환하거나 상위 스코프의 변수에 할당하면 기대한 대로 동작하지 않음 - 비동기 함수는 비동기 처리 결과를 외부에 반환할 수 없고, 상위 스코프의 변수에 할당할 수도 없음 : 비동기 함수의 처리 결과에 대한 후속 처리는 비동기 함수 내부에서 수행해야 함! - 필요에 따라 비동기 처리가 성공하면 호출될 콜백 함수와 비동기 처리가 실패하면 호출될 콜백 함수를 전달할 수 있음 콜백 헬.. [모던 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 문서의 계층적 구조와 정보를 표현 - 노드 타.. 이전 1 2 3 4 다음
