40-43장

40장. 이벤트

•

이벤트 핸들러 : 이벤트 발생시 호출될 함수 → 콜백함수

•

이벤트 핸들러 등록 : 이벤트 발생시 브라우저에게 이벤트 핸들러의 호출을 위임하는 것 → 애이리

이벤트 드리븐 프로그래밍

프로그램 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식

이벤트 타입

: 이벤트 종류 나타내는 ‘문자열’

•

마우스 이벤트 - 

•

키보드 이벤트 - 

•

포커스 이벤트 - 

•

폼 이벤트 - 

•

값 변경 이벤트 - 

•

DOM 뮤테이션 이벤트

•

뷰 이벤트 - 

•

리소스 이벤트 - 

이벤트 핸들러 등록

이벤트 핸들러 어트리뷰트 → 사용하지맙시다

<HTML태그 on접두사+이벤트타입 = “함수호출문” />

이벤트 핸들러 프로퍼티 → 이벤트핸들러 하나만 가능, 재할당됨

DOMElement.on접두사+이벤트타입 = 함수 (이벤트타깃) (이벤트핸들러)

== 자스로 DOM 객체의 프로퍼티로 넣는거랑 마찬가지

addEventListener 메서드 → 하나 이상 가능, 순서대로 호출됨

EventTarget.prototype.addEventListener(이벤트타입, 이벤트핸들러, 캡처여부)

•

true: 캡처링 / false: 버블링 (기본값)

이벤트 핸들러 삭제2. 는 프로퍼티에 null 할당

프로퍼티 = null;

3. EventTarget.prototype.removeEventListener(이벤트타입, 이벤트핸들러, 캡처여부)

이벤트 객체

이벤트 발생시 이벤트 객체가 동적 생성됨 브라우저가 이벤트핸들러의 첫 번째 인수(e)로 전달함 (단, 1. 이벤트 핸들러 어트리뷰트 방식에서는 반드시 ‘event’로 사용)

이것도 객체니까 상속구조가 있겠죠 ~

•

(상위) Event 인터페이스

◦

DOM내에서 발생한 이벤트에 의해 생성되는 이벤트 객체

◦

모든 이벤트 객체의 공통 프로퍼티 정의

→ type, target, currentTarget, …

•

(하위) 하위 인터페이스

◦

이벤트 타입에 따라 고유한 프로퍼티 정의

◦

종류: FocustEvent, MouseEvent, KeyboardEvent, WheelEvent

이벤트 전파

DOM 트리상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM트리를 통해 전파됨

캡처링 단계 : window → 타깃

타깃 단계 : event.target

버블링 단계 : 타깃 → window

이벤트 핸들러 등록에서 1.2.방식은 - 2.타깃단계,3.버블링단계 만 캐치 가능
이벤트 핸들러 등록에서 3.방식 - 세번째 인수로 true주면 1.캡처링 단계도 캐치 가능함
JavaScript
복사

+ 버블링 전파 안되는 이벤트 (event.bubbles = false)

•

포커스 이벤트의 focus / blur → 

•

리소스 이벤트의 load / unload / absort / error → 

•

마우스 이벤트의 mouseenter / mouseleave

이벤트 위임

여러개의 하위 DOM요소에 각각 이벤트 핸들러를 등록하는 대신, 하나의 상위 DOM 요소에 이벤트 핸들러를 등록하는 방법

동적 추가한 요소에 일일이 추가하지 않아도 됨

Element.prototype.matches() : 인수로 전달된 선택자에 의해 특정 노드를 검색가능한지 확인

DOM요소의 기본동작 조작

•

중단 : e.preventDefault()

ex. check, radio 요소 클릭 → 체크해제 / a 요소 클릭 → 링크이동

•

전파 방지 : e.stopPropagation()

◦

하위 DOM 요소의 이벤트를 개별적으로 처리할때 

◦

상위 요소가 캐치하지 않게 전파 막고, 자신에게 바인딩 된 이벤트핸들러만 실행

이벤트 핸들러 내부의 this

1.은 window 전역객체
2.3.은 이벤트를 바인딩한 DOM요소 (=currentTarget)
	-> 화살표함수로 정의한 이벤트핸들러는 ! 상위 스코프 this
	-> 클래스에서도 ! (인스턴스가 아니라) DOM요소라는 점 주의
	-> 클래스의 필드로 화살표함수(메서드) 쓰면 인스턴스 메서드이고, this는 인스턴스 가리킴
JavaScript
복사

이벤트 핸들러에 인수 전달

커스텀 이벤트

이벤트 생성자 함수를 호출하여 명시적으로 생성한 이벤트 객체에 이벤트 타입을 지정하는 것

new 이벤트생성자함수(’타입’)

•

bubbles = false, cancelable = false

•

고유 프로퍼티 값 지정 가능

•

isTrusted = false

디스패치: e.dispatchEvent(커스텀이벤트) 이벤트를 발생시키는 행위 (동기 처리됨) (일반적 이벤트핸들러는 비동기 동작)

41장. 타이머

호출 스케줄링

함수를 명시적으로 호출하지 않고, 일정시간이 경과된 이후에 호출되도록 함수 호출을 예약하려고 타이머 함수를 사용하는 것을 말함

타이머 함수

ECMAScript 빌트인 객체 x, 호스트 객체 o

•

타이머 생성 함수

◦

setTimeout( 콜백함수, 지연시간, 콜백함수에 전달할 인수들 ) → return 타이머 고유 id (숫자 or 객체)

◦

setInterval( ,, )

→ 타이머 함수의 콜백함수는 호출 스케줄링되고, 호출 스케줄링은 자바스크립트 엔진이 아니라 브라우저 환경에서 동작하므로, 정확히 지연 시간후에 호출된다는 보장이 없음. 지연 시간 이후에 콜백 함수가 태스크 큐에 푸시되어 대기하게 도지만, 콜 스택이 비어야 호출되기 때문. (지연 시간 4ms이하인 경우, 최소 지연시간 4ms 지정됨) 814page

•

타이머 제거 함수

◦

clearTimeout( 타이머id )

◦

clearInterval( 타이머id )

(== 호출 스케줄링 취소)

디바운스 & 스로틀

짧은 시간 간격으로 연속으로 발생하는 이벤트를 “그룹화”해서 과도한 이벤트 핸들러의 호출을 방지하는 프로그래밍 기법

ex. scroll, resize, input, mousemove

(Underscore, Lodash의 함수 권장)

디바운스 (debouce)

: 일정시간이 경과한 이후에 마지막에 이벤트 핸들러가 한 번만 호출되도록 함

debounce( 콜백함수, 지연시간 )

→ 지연시간보다 짧은 간격으로 이벤트 발생하면, 이전 타이머 취소하고, 새로운 타이머 재설정

→ 이 시간 내로 이벤트가 더 이상 발생하지 않으면 콜백함수 실행

*** 활용) 입력 필드 자동완성 UI 구현 / 버튼 중복 클릭 방지 처리

스로틀 (throttle)

: 이벤트가 연속 발생해도, 일정시간 간격으로 이벤트 핸들러가 최대 한 번만 호출 일정시간 단위로 이벤트 핸들러가 호출되도록 호출 주기를 만드는 것

throttle( 콜백함수, 호출주기 )

→ 일정시간 사이에 이벤트 발생하면 무시함

*** 활용) scroll 이벤트 처리 / 무한 스크롤 UI 구현

42장. 비동기 프로그래밍

함수 호출 → 함수 코드 평가 + 함수 실행컨텍스트 생성 → 실행컨텍스트 스택 push = 함수 코드 실행 → 종료 → 스택 pop
JavaScript
복사

자스는 ‘단 하나의 실행 컨텍스트’ 가짐 (→ “실행 중인 실행 컨텍스트”를 제외한 모든 실행 컨텍스트는 모두 ‘실행 대기중인 태스크’다)

한 번에 하나의 태스크만 실행할 수 있는 “싱글 스레드” (→ 블로킹(작업중단) 발생)

동기 처리

: 현재 실행중인 태스크가 종료할 때까지. 다음에 실행될 태스크가 대기하는 방식

•

순서보장

•

블로킹

비동기 처리

: 현재 실행중인 태스크가 종료하지 않은 상태라 해도. 다음 태스크 곧바로 실행하는 방식

•

논블로킹

•

순서보장 x, 콜백 헬

ex. 타이머 함수, HTTP 요청, 이벤트 핸들러

이벤트 루프 & 큐

자스의 ‘동시성’지원하는 브라우저 내장 기능

•

자스엔진

콜백함수 평가, 실행

◦

콜 스택 (=== 실행 컨텍스트)

◦

힙 : 객체 저장되는 메모리 공간 

•

브라우저 or Node.js

호출 스케줄링

◦

태스크 큐 : 비동기 함수의 콜백함수 or 이벤트 핸들러를 임시 보관 영역

+ 마이크로 태스크 큐 : 프로미스 후속 처리 메서드의 콜백함수를 임시 보관 영역

◦

이벤트 루프 : 콜 스택과 태스크 큐 상태 어떤지 계속 확인, 태스크 큐에 있는 함수 순차적으로 콜 스택으로 이동

815page…

43장. Ajax

: 자스를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여, 웹 페이지를 동적으로 갱신하는 프로그래밍 방식

브라우저가 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작

구글 맵스를 기점으로 확 바뀜

•

전통

완전한 HTML을 서버로부터 전송받아 웹 페이지 전체를 처음부터 다시 렌더링 변경없어도 불필요한 데이터 통신 발생, 화면 깜빡임, 동기 방식 통신으로 블로킹됨

•

Ajax

필요한 데이터만 서버로부터 전송받음, 변경요소만 다시 렌더링, 비동기 통신

JSON

: 클라이언트와 서버 간의 HTTP통신을 위한 텍스트 데이터 포맷 자스x, 언어 독립형 데이터 포맷 → 대부분 프로그래밍 언어에서 사용 가능

키와 값으로 구성된 순수한 텍스트

키 - 큰따옴표

값 - 객체 리터럴같은 표기법 or 문자열은 큰따옴표

•

JSON.stringify() : 객체/배열 → 문자열 === 직렬화

•

JSON.parse() : 문자열 → 객체/배열객체 === 역직렬화

XMLHttpRequest

브라우저가 제공하는 Web API이므로 브라우저 환경에서만 정상 실행

•

프로토타입 프로퍼티 : readyState, status, …

•

이벤트 핸들러 프로퍼티 : onreadystatechange, onerror, onload, …

•

메서드 : open, send, setRequestHeader, …

•

정적 프로퍼티 : DONE, …

HTTP 요청 메서드

클라이언트가 서버에게 요청의 종류와 목적을 알리는 방법

CRUD = create, read, update, delete

HTTP 요청 메서드	목적	멱등성	페이로드(=데이터)	CRUD
GET	모든/특정 리소스 취득	o	x → URL 쿼리스트링	read
POST	리소스 생성	x	o → body	create
PUT	리소스 전체 교체	o	o	update
PATCH	리소스 일부 수정	x	o	update
DELETE	모든/특정 리소스 삭세	o	x	delete

•

멱등성 : 