Today I Learned (74) 썸네일형 리스트형 모던 자바스크립트 Deep Dive 44장~46장 REST API/프로미스/AJAX 44장 REST API REST : HTTP 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처 (자원, 행위, 표현으로 구성된다.) REST API : REST 기반으로 서비스 API를 구현한 것 RESTful : REST의 기본 원칙을 성실히 지킨 서비스 디자인 45장 프로미스 : 비동기 처리를 위한 패턴 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료된다! 그래서 비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결과를 외부로 반환하면 의도대로 동작하지 않는다!! 에러 처리가 곤란해진다!!! 그래서 프로미스를 사용하면 콜백 지옥을 벗어나서 에러처리를 보다 효율적으로 할 수 있다. 마이크로태스크 큐에는 프로미스의 후속 처리 메서드의 콜백 함수가 일시 .. 모던 자바스크립트 Deep Dive 41장~43장 타이머/비동기/AJAX 41장. 타이머 호스트 객체인 타이머 함수. setTimeout 함수는 생성된 타이머를 식별하는 id를 반환한다. 디바운스과 스로틀 디바운싱 debouncing : 짧은 시간 간격으로 발생하는 이벤트를 그룹화하여 마지막 한 번만 호출되도록 한다. (예) 인풋 입력 쓰로틀링 throttling : 일정 시간 간격으로 발생하는 이벤트를 그룹화하여 간격 안에서 최대 한 번만 호출되도록 한다. (예) 스크롤 42장. 비동기 프로그래밍 동기 처리 : 현재 실행 중인 태스크가 종료할 때까지 다음 태스크가 대기하는 방식. 다음 태스크가 블로킹된다. 비동기 처리 : 현재 실행 중인 태스크가 종료되지 않은 상태라도 다음 태스크를 곧바로 실행하는 방식 자바스크립트는 싱글 스레드로 동작한다. 한 번에 하나의 태스크만 처리할.. 모던 자바스크립트 Deep Dive 40장 이벤트 이벤트 핸들러 : 이벤트가 발생했을 때 호출될 함수 이벤트 핸들러 등록 : 브라우저에 이벤트 핸들러의 호출을 위임하는 것 이벤트 중심으로 프로그램의 흐름을 제거하는 것을 이벤트 드리븐 프로그래밍이라고 한다! 이벤트 핸들러 제거 addEventListener 메서드에 전달한 인수와 removeEventListener 메서드에 전달한 인수가 일치하지 않으면 이벤트 핸들러가 제거되지 않는다. Click me! 이벤트 객체의 공통 프로퍼티 target 이벤트를 발생시킨 DOM 요소 currentTarget 이벤트 핸들러가 바인딩된 DOM 요소 eventPhase 이벤트 전파 단계 0: 이벤트 없음 1: 캡처링 단계, 2: 타깃 단계 3: 버블링 단계 clientX, clientY : 웹페이지의 가시 영역(뷰포트.. 모던 자바스크립트 Deep Dive 39장 DOM DOM (Document Object Model) 프로퍼티와 메서드를 제공하는 트리 자료구조 Document.prototype 에 정의된 메서드 DOM 전체에서 요소 노드를 탐색 Element.prototype 에 정의된 메서드 특정 요소 노드의 자손 노드 중에서 요소 노드를 탐색 요소 노드 취득 HTML 요소에 id 어트리뷰트를 부여하면 id 값과 동일한 이름의 전역 변수가 암묵적으로 선언되고 노드 객체가 할당된다. querySelector, querySelectorAll 메서드는 getElementById, getElementBy** 메서드보다 다소 느리다. 그렇기 때문에 id 어트리뷰트가 있는 요소 노드를 취득하는 경우에는 getElementById를 사용하고, 그 외의 경우에는 querySelec.. 모던 자바스크립트 Deep Dive 38장 브라우저의 렌더링 과정 파싱? 구문 분석 syntax analysis. 텍스트 문서를 토큰으로 분해하여 트리 구조의 자료구조의 파스 트리를 생성하는 과정을 말한다. 렌더링? 브라우에 시각적으로 출력하는 것을 말한다. 브라우저의 렌더링 과정 HTML, CSS, 자바스크립트, 이미지, 폰트 등... 필요한 리소스를 서버로부터 응답 받는다. HTML과 CSS를 파싱하여서 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다. AST 생성하고 이를 바이트코드로 변환한다. DOM API를 통해서 DOM이나 CSSOM을 변경할 수 있다. 렌더 트리를 기반으로 레이아웃을 계산(리플로우)하고 화면에 HTML 요소를 페인팅한다. (리플로우와 리페인팅은 성능에 악영향을 주는 작업) HTTP 1.1 : 커넥션당 하나의 요청과 응답만.. 모던 자바스크립트 Deep Dive 37장 Set과 Map Set 객체는 중복되지 않는 유일한 값들의 집합으로서, 수학적 집합을 구현하기 위한 자료구조이다. 요소 개수 확인 : Set.prototype.size 프로퍼티 이용 add 메서드는 연속적으로 호출 가능하다. const set = new Set(); set.add(1).add(2); console.log(set); // Set(2) {1, 2} NaN === NaN은 다르다고 평가되지만, Set객체는 둘을 같다고 평가한다.(Map도 마찬가지) const set = new Set(); console.log(NaN === NaN); // false console.log(0 === -0); // true // NaN과 NaN을 같다고 평가하여 중복 추가를 허용하지 않는다. set.add(NaN).add(NaN.. 이전 1 2 3 4 ··· 13 다음
