Daniel's Note

[Group Study, 모던 자바스크립트 Deep Dive] - 47 에러처리

Daniel(빡일) — Sun, 9 Apr 2023 17:05:02 +0900

47.4 throw문

Group study background

나만 그런건지는 모르겠지만, 실무를 하다보면 잊어버리는 개념들이 있다.

가끔 FE 뉴비인분들에게 질문을 받는데, 아리송 할때만큼 쪽팔릴때가 없었다.

인간은 망각의 동물이라고 교수님께서 말씀하셨지만 반복 학습의 힘을 믿는다. React 오픈카톡방에서 모집한 스터디원분들과 함께 "모던 자바스크립트 Deep Dive" 1권 톺아보기를 시작한다!

정보 전달용이 아닌 개인 스터디 레코딩용 포스트입니다.

47.1 에러 처리의 필요성

개발자라면 비지니스 로직을 잘 짜는 것도 중요하지만 에러를 잘 핸들링 하는 것도 능력이라고 생각한다. 에러가 발생하지 않는 코드는 없기 때문인데, 에러를 "잘" 파악하기 위한 처리가 필요하다. 발생한 에러에 대해 대처하지 않으면 프로그램이 종료될 수 있다. 사실 이것보다 무서운건 "그냥" 지나가는 것인데, 파급 효과를 알 수 없기 때문에 그 중요성이 더 크다.

47.2 try... catch... finally문

기본적으로 에러 처리를 구현하는 방법은 크게 두 가지가 있다.

querySelector나 Array#find 메서드처럼 예외적인 상황이 발생하면 반환하는 값(Null || -1)을 if 문이나 단축 평가 또는 옵셔널 체이닝 연산자를 통해 확인해서 처리하는 방법
에러 처리 코드를 미리 등록해 두고 에러가 발생하면 에러 처리 코드로 점프하도록 하는 방법 (try...catch..finally가 해당)

47.3 Error 객체

Error 생성자 함수는 에러를 상세히 설명하는 에러 메세지를 인수로 전달하는 에러 객체를 생성한다.

Error 생성자 함수가 생성한 에러 객체는 message 프로퍼티와 stack 프로퍼티를 갖는다. message 프로퍼티의 값은 Error 생성자 함수에 인수로 전달한 에러메세지이고, stack 프로퍼티 값은 에러를 발생시킨 콜스택의 호출 정보를 나타내는 문자열이다(디버깅 목적).

생성자 함수	인스턴스
Error	일반적 에러 객체
SyntaxError	자바스크립트 문법에 맞지 않는 문을 해석할 떄
ReferenceError	참조할 수 없는 식별자를 참조했을때
TypeError	피연산자 또는 인수의 데이터 타입이 유요하지 않을 때
RangeError	숫자값의 허용 범위를 벗어났을 때
URIError	encodeURI 또는 decodeURI 함수에 부적절한 인수를 전달했을 때
EvalError	eval 함수에서 발생

47.4 throw문

에러를 발생시키려면 try 코드 블록에서 throw 문으로 에러 객체를 던져야 한다.

throw 문의 표현식은 어떤 값이라도 상관없지만 일반적으로 에러 객체를 지정한다. 에러를 던지면 catch 문의 에러 변수가 생성되고 던져진 에러 객체가 할당되어 catch 코드 블록이 실행되기 시작한다.

[예제 47-01]

try {
 throw new Error('something wrong')
} catch(error) {
 console.log(error)
}

47.5 에러의 전파

45장 "프로미스"의 45.1.2절 "에러 처리의 한계"에서 살펴본 것처럼 에러는 호출자(caller) 방향으로 전파된다. 즉, 콜 스택의 아래 방향(실행 중인 실행 컨택스트가 푸시되기 직전에 푸시된 실행 컨택스트 방향)으로 전파된다.

[예제 47-02]

const foo = () => {
 throw Error('foo')  //4
}

const bar = () => {
 foo(); //3
}

const baz = () => {
 bar(); //2
}

try {
 baz(); //1
} catch(err) {
 console.error(err)
}

1에서 baz 함수를 호출하면 2에서 bar 함수 3에서 foo 그리고 4에서 에러를 throw한다. 이때 foo 함수가 throw한 에러는 다음과 같이 호출자에게 전파되어 전역에서 캐치된다.

throw된 에러를 캐치하지 않으면 호출자 방향으로 전파된다. 따라서 throw된 에러를 캐치하여 적절히 대응해야 프로그램에 타격을 줄이면서 코드의 실행 흐름을 복구할 수 있다.

setTimeout이나 프로미스 후속 처리 메서드의 콜백 함수는 호출자가 없기 때문에 주의가 필요하다. 이 두 가지 함수들은 태스크 큐나 마이크로태스크 큐에 일시 저장되었다가 콜 스택이 비면 이벤트 루프에 의해 콜 스택으로 푸시되어 실행된다. 이때 콜 스택에 푸시된 콜백 함수의 실행 컨택스트는 콜 스택의 가장 하부에 존재하게 되기 때문에 에러를 전파할 호출자가 존재하지 않는다.

[Group Study, 모던 자바스크립트 Deep Dive] - 45 Promise

Daniel(빡일) — Sun, 9 Apr 2023 16:26:22 +0900

Group study background

나만 그런건지는 모르겠지만, 실무를 하다보면 잊어버리는 개념들이 있다.

가끔 FE 뉴비인분들에게 질문을 받는데, 아리송 할때만큼 쪽팔릴때가 없었다.

정보 전달용이 아닌 개인 스터디 레코딩용 포스트입니다.

45.0 Preface

JS는 비동기 처리를 위해 콜백 함수를 사용한다. 하지만 Callback Hell로 가독성이 지옥으로 가버리거나 에러 핸들링의 어려움이 있다. 이 단점을 극복하기 위해 ES6에서는 비동기 처리를 위해 Promise (약속)을 도입했다. 비동기 처리 시점을 명확하게 표현하게 되면서 코드의 가독성을 끌어올릴 수 있게 되었다.

45.1 비동기 처리를 위한 콜백 패턴의 단점

45.1.1 Callback Hell

"비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다 하더라도 기다리지 않고 즉시 종료된다. 즉, 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료된다. 따라서 비동기 함수 내부의 코드에서 처리 결과를 외부로 반환하거나 상위 스코프의 변수에 할당하면 기대한 대로 동작하지 않는다."

[예제 45-01]

const get = url => {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.send();
  
  xhr.onload = () => {
    if (xhr.status === 200) {
     return JSON.parse(xhr.response)
    } else {
     console.log(`${xhr.status} ${xhr.statusText}`)
    }
  }
}


const response = get('https://jsonplaceholder.typicode.com/posts/1');
console.log(response)

위의 예시는 JS를 배우는 단계에서 꽤나 헷갈려하기도 하고 찾아보는 부분이 아닐까 싶다. console.log에 반환 값을 찍으면 undefined가 찍힌다. get 함수 내부의 onload 이벤트 핸들러가 비동기로 동작하기 때문이다.

get 함수는 반환문이 생략되었으므로 암묵적으로 undefined를 반환하게 된다.

비동기 함수 get이 호출되면 함수 코드를 평가하는 과정에서 get 함수의 실행 컨텍스트 생성, 실행 컨택스트 스택에 푸시
함수 코드 실행 과정에서 xhr.onload 이벤트 핸들러 프로퍼티에 이벤트 핸들러 바인딩
get 함수 종료시 get 함수의 실행 컨텍스트가 콜 스택에서 팝
곧바로 console.log(response) 출력
console.log 실행 컨텍스트가 생성되어 실행 컨텍스트 스택에 푸시
1. console.log가 호출되기 직전에 load 이벤트가 발생했더라도 xhr.onload 이벤트 핸들러 프로퍼티에 바인딩한 이벤트 핸들러는 먼저 실행되지 않음
서버로부터 응답이 도착해야 xhr 객체에서 load 이벤트 발생
1. xhr.onload 핸들러 프로퍼티에 바인딩한 이벤트 핸들러는 load 이벤트가 발생하면 태스크 큐에 저장되어 대기하다가, 콜 스택이 비면 이벤트 루프에 의해 콜 스택으로 푸시되어 실행.

따라서 비동기 함수는 처리 결과를 외부에 반환할 수 없고, 상위 스코프의 변수에 할당할 수 없다. 처리 결과에 대한 후속 처리는 비동기 함수 내부에서 수행해야 하는데 콜백 함수를 전달하는 것이 일반적이다.

[예제 45-02] 진정한 callback hell

const get = (url, callback) => {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.send();
  
  xhr.onload = () => {
    if (xhr.status === 200) {
     callback(JSON.parse(xhr.response))
    } else {
     console.log(`${xhr.status} ${xhr.statusText}`)
    }
  }
}


const url = get('https://jsonplaceholder.typicode.com/');


// 그나마 귀여운...
get(`${url}/posts/1`, ({userId}) => {
  console.log(userId);
  
  get(`${url}/users/${userId}`, userInfo => {
   console.log(userInfo)
  })
})

// going to the hell
get('/step1', a => {
 get(`/step2/${a}`, b => {
  get(`/step3/${b}`, c => {
   get(`/step4/${c}`, d => {
    console.log(d)
   })
  })
 })
})

45.1.2 에러 처리의 한계

[예제 45-03]

try {
 setTimeout(() => { throw new Error('Error!'); }, 1000)
} catch (e) {
 // 캐치 불가
 console.error('캐치한 에러', e)
}

비동기 함수인 setTimeout이 호출되면

setTimeout 함수의 실행 컨택스트 생성되어 콜스택에 푸시
setTimeout은 비동기 함수이므로 콜백 함수 호출을 기다리지 않고 즉시 종료되어 콜 스택에서 제거
타이머가 만료되면 setTimeout 함수의 콜백 함수는 태스크 큐로 푸시되고 콜 스택이 비어졌을 때 이벤트 루프에 의해 콜 스택으로 푸시되어 실행

즉, setTimeout 함수의 콜백 함수가 실행될 때 setTimeout 함수는 이미 콜 스택에서 제거된 상태이다. setTimeout 함수의 콜백 함수를 호출한 caller가 setTimeout 함수가 아님을 의미한다.

에러는 호출자(caller) 방향으로 전파된다. 다시 말하면, 콜 스택의 아래 방향(실행 중인 실행 컨텍스트가 푸시되기 직전에 푸시된 실행 컨택스트 방향)으로 전파된다. 하지만 위의 예시와 같이 setTimeout 함수의 콜백 함수를 호출한 것은 setTimeout이 아니기 때문에, catch 블록에서 잡을 수 없다.

45.2 Promise 생성

Promise 생성자 함수는 비동기 처리를 수행할 콜백 함수를 인수로 resolve, reject 함수를 전달 받는다. 그리고 비동기 처리 상태와 처리 결과를 관리하는 객체이다.

[예제 45-04]

const promise = new Promise((reoslve, reject) => {
 if(성공) {
  resolve('result')
 } else (
  reject('failure')
 )
})

프로미스의 상태 정보	의미	상태 변경 조건
pending	비동기 처리가 아직 수행되지 않은 상태	프로미스가 생성된 직후 기본 상태
fulfilled	비동기 처리가 수행된 상태(성공)	resolve 함수 호출
rejected	비동기 처리가 수행된 상태(실패)	reject 함수 호출

45.3 Promise 후속 처리 메서드

프로미스의 비동기 처리 상태가 변화하면 이에 따른 후속 처리를 해야 한다. 예를 들어 fullfilled 상태가 되면 처리 결과로 어떤 로직을 사용할테고, reject가 되어도 에러 처리를 해야 한다. 이를 then, catch, finally를 통해 실행한다.

45.4 Promise 에러 처리

[예제 45-05]

const wornUrl = 'https://jsonplaceholder.typicode.com/XXX/1'

promiseGet(wrongUrl)
 .then(res => console.log(res))
 .catch(err => console.error(err))
 
 // 내부적으로는 아래와 같이 처리 됨.
 promiseGet(wrongUrl)
 .then(res => console.log(res))
 .then((undefined, err => console.error(err))

45.5 Promise Chainning

비동기 처리를 위한 콜백 패턴에 Callback HEEEEELLL이 발생하는 문제가 있다.

예제 45-02를 아래 예제처럼 프로미스를 연속적으로 호출하는 Promise Chainning을 통해 해결 할 수 있다.

[예제 45-06]

const url = 'https://jsonplaceholder.typicode.com'

promiseGet(`{url}/posts/1`)
 .then(({userId}) => promiseGet(`{url}/users/${userId}`))
 .then(userInfo => console.log(userInfo))
 .catch(err => console.error(err))

만약 후속 처리 메서드의 콜백 함수가 프로미스가 아닌 값을 반환하더라도 그 값을 암묵적으로 resolve, reject하여 프로미스를 생성해 반환한다. Promise Chainning을 통해 비동기 처리 결과를 전달받아 후속 처리를 하므로 비동기 처리를 위한 콜백 패턴에서 발생하던 callback hell이 발생하지 않는다.

45.6 Promise의 정적 메서드

45.6.2 Promise.all

Promise.all은 여러 개의 비동기 처리를 모두 병렬 처리할 때 사용하는데 인수로 전달받은 배열의 모든 프로미스가 모두 fulfilled 상태가 되어야 종료한다. 따라서 Promise.all 메서드가 종료하는 데 걸리는 시간은 가장 늦게 fulfilled 상태가 되는 프로미스의 처리 시간보다 조오금 더 길다.

그리고 모든 프로미스가 fulfilled 상태가 되면 resolve된 처리 결과를 모두 배열에 저장해 새로운 프로미스를 반환한다. 이때 첫 번째 프로미스가 가장 나중에 fulfilled 상태가 되어도 첫 번째 프로미스 처리 결과부터 차례대로 배열에 저장해 그 배열을 resolve하는 새로운 프로미스를 반환한다. 즉, 처리 순서가 보장된다.

인수로 전달받은 배열의 프로미스가 하나라도 reject 상태가 되면 나머지 프로미스가 fulfilled 상태가 되는 것을 기다리지 않고 즉시 종료한다.

45.6.3 Promise.race

Promise.all 메서드처럼 모든 프로미스가 fulfilled 상태가 되는 것을 기다리는 것이 아니라 가장 먼저 fulfilled 상태가 된 처리 결과를 resolve 한다.

45.6.4 Promise.allSettled

Promise.allSettled 메서드는 프로미스를 요소로 갖는 배열 등의 이터러블을 인수로 전달받는다. 그리고 전달받은 프로미스가 모두 setteled 상태가 되면 처리 결과를 배열로 반환한다.

[예제 45-07]

Promise.allSettled([
 new Promise(resolve => setTimeout(() => resolve, 2000)),
 new Promise((_, reject) => setTimeout(() => reject(new Error('ERR')), 1000))
]).then(console.log)

/*
[
 {status: "fulfilled", value:1},
 {status: "rejected", reason: Error: ERR at <anonymous>...},
]
*/

+ Promise.any

ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/any

45.7 마이크로태스크 큐

프로미스의 후속 처리 메서드도 비동기로 동작하므로 1->2->3 순으로 출력될 것처럼 보이지만 2->3->1 순으로 출력된다.

그 이유는 프로미스의 후속 처리 메서드의 콜백 함수는 태크스 큐가 아니라 마이크로태스크 큐에 저장되기 때문이다. 마이크로태스크 큐는 태스크 큐와 별도로 프로미스의 후속 처리 메서드의 콜백 함수가 일시 저장되는 곳이다.

콜백 함수나 이벤트 핸들러를 일시 저장한다는 점에서 태스트 큐와 동일하지만 마이크로 태스크 큐는 태스크큐보다 우선순위가 높다. 즉 이벤트 루프는 콜 스택이 비면 먼저 마이크로태스크 큐에서 대기하고 있는 함수를 가져와 실행한다.

[예제 45-08]

setTimeout(() => console.log(1), 0);

Promise.resolve()
 .then(() => console.log(2))
 .then(() => console.log(3))

45.8 fetch

fetch 함수는 XMLHttpRequest 객체와 마찬가지로 HTTP 요청 전송 기능을 제공하는 클라이언트 사이드 WEB API다. XMLHttpRequest 객체보다 사용법이 간단하고 프로미스를 지원하므로 콜백 패턴에서 자유로워 많이 사용된다.

[Group Study, 모던 자바스크립트 Deep Dive] - 43 Ajax

Daniel(빡일) — Sun, 26 Mar 2023 22:10:32 +0900

Group study background

나만 그런건지는 모르겠지만, 실무를 하다보면 잊어버리는 개념들이 있다.

가끔 FE 뉴비인분들에게 질문을 받는데, 아리송 할때만큼 쪽팔릴때가 없었다.

정보 전달용이 아닌 개인 스터디 레코딩용 포스트입니다.

43.1 Ajax란?

Ajax(Asynchronous Javascript and XML)란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. Ajax는 브라우저에서 제공하는 Web API이며 비동기 통신인 XMLHttpRequest 객체를 기반으로 동작한다.

변경할 부분을 갱신하는 데 필요한 데이터만 서버로부터 전송받으므로 불필요한 데이터 통신 발생 X
변경할 필요가 없는 부분은 다시 렌더링 X, 따라서 화면 깜빡임이 X
클라이언트와 서버가 비동기 통신하므로 서버에게 요청을 보낸 후 블로킹(작업 중단)이 되지 않음

43.2 JSON

JSON(JavaScript Object Notation)은 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷이다. 자바스크립트에 종속되지 않는 언더 독립형 데이터 포맷으로 대부분의 프로그래밍 언어에서 사용할 수 있다.(심지어 sql 데이터 타입도)

43.2.1 JSON 표기 방식

JSON은 자바스크립트의 객체 리터럴과 유사하게 키와 값으로 구성된 순수한 텍스트다.

43.2.2 JSON.stringify

클라이언트가 서버로 객체를 전송하려면 객체를 문자열화해야 하느데 이를 직렬화(Serializing)라 한다. 이 메서드는 객체뿐만 아니라 배열도 JSON 포맷의 문자열로 변환한다.

43.2.3 JSON.parse

서버로부터 클라이언트에게 전송된 JSON 객체 데이터는 문자열이다. 이 문자열을 객체로서 사용하려면 JSON 포맷의 문자열을 객체화해야 하는데 이를 역직렬화(Deserializing)라 한다. 배열이 JSON 포맷의 문자열로 변환되어 있는 경우 배열 객체로 변환한다. 배열의 요소가 객체인 경우 배열의 요소까지 객체로 변환한다.

43.3 XMLHttpRequest

브라우저는 주소창이나 HTML의 form 태그 또는 a 태그를 통해 HTTP 요청 전송 기능을 제공하고, 자바스크립트는 WEB API인 XMLHttpRequest 객체를 사용하여 HTTP 요청을 전송한다.

43.3.2 XMLHttpRequest 객체의 프로퍼티와 메서드

XMLHttpRequest 객체의 프로토타입 프로퍼티

프로토타입 프로퍼티	설명
readyState	HTTP 요청의 현재 상태를 나타내는 정수. 다음과 같은 XMLHttpRequest의 정적 프로퍼티를 값으로 갖는다. - UNSENT: 0 - OPENED: 1 - HEADERS_RECEIVED: 2 - LOADING: 3 - DONE: 4
status	HTTP 요청에 대한 응답 상태(HTTP 상태 코드)를 나타내는 정수(200,404,....)
statusText	HTTP 요청에 대한 응답 메세지를 나타내는 문자열
responseType	HTTP 응답 타입(document, json, text, blob, arraybuffer)
response	HTTP 요청에 대한 response body, responseType에 다라 다르다.
responseText	서버가 전송한 HTTP 요청에 대한 응답 문자열

XMLHttpRequest 객체의 이벤트 핸들러 프로퍼티

이벤트 핸들러 프로퍼티	설명
onreadystatechange	readystate 프로퍼티 값이 변경된 경우
onloadstart	HTTP 요청에 대한 응답을 받기 싲가한 경우
onprogress	HTTP 요청에 대한 응답을 받는 도중 주기적으로 발생
onabort	abort 메서드에 의해 HTTP 요청이 중단된 경우
onerror	HTTP 요청에 에러가 발생한 경우
onload	HTTP 요청이 성공적으로 완료한 경우
ontimeout	HTTP 요청 시간이 초과한 경우
onloaded	HTTP 요청이 완료한 경우, HTTP 요청이 성공 또는 실패하면 발생

43.3.3 HTTP 요청 전송

XMLHttpRequest.prototype.open 메서드로 HTTP 요청을 초기화한다.
필요에 따라 XMLHttpRequest.prototype.setRequestHeader 메서드로 특정 HTTP 요청의 헤더 값을 설정한다.
XMLHttpRequest.prototype.send 메서드로 HTTP 요청을 전송한다.

send 메서드에는 request body에 담아 전송할 데이터(페이로드)를 인수로 전달할 수 있다. 페이로드가 객체인 경우 반드시 JSON.stringify 메서드를 사용하여 직렬화한 다음 전달해야 한다.

[예제 43-01]

// XMLHttpRequest 객체 생성
const xhr = new XMLHttpRequest();

// HTTP 요청 초기화
xhr.open('GET', '/users');

// HTTP 요청 헤더 설정
// 클라이언트가 서버로 전송할 데이터의 MIME 타입 지정: json
xhr.setRequestHeader('content-type', 'application/json');

// 서버가 응답할 데이터의 MIME 타입 지정: json, default: */*
xhr.setRequestHeader('accept', 'application/json');

// HTTP 요청 전송
xhr.send();

xhr.onreadystatechagne = () => {
 if (xhr.readystate !== XMLHttpRequest.DONE) return;
 
 
 // (1)번 방법
  // status 프로퍼티는 응답 상태 코드를 나타낸다.
 if (xhr.status === 200) {
  console.log(JSON.parse(xhr.response));
 } else {
  console.error('Error', xhr.status, xhr.statusText);
 }
 
}

  // (2)번 방법
xhr.onload = () = > {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.response));
  } else {
   console.error('Error', xhr.status, xhr.statusText);
  }
}

43.3.4 HTTP 응답 처리

서버의 응답을 처리하려면 XMLHttpRequest 객체가 발생시키는 이벤트(readyState 프로퍼티 값이 변경된 경우 발생하는 readystatechange)를 캐치해야 한다.

(위의 코드 참고)

onreadystate 이벤트 핸들러 프로퍼티에 할당한 이벤트 핸들러는 HTTP 요청의 현재 상태를 나타내는 xhr.readyState가 XML.HttpRequest.DONE인지 확인하여 서버의 응답이 완료되었는지 확인한다.
readystatechange 이벤트 대신 load 이벤트를 캐치해도 좋다. load 이벤트는 HTTP 요청이 성공적으로 완료된 경우 발생한다. 따라서 load 이벤트를 캐치하는 경우 xhr.readyState나 XMLHttpRequest.Done인지 확인 불필요

[Group Study, 모던 자바스크립트 Deep Dive] - 42 비동기 프로그래밍

Daniel(빡일) — Sun, 26 Mar 2023 19:22:26 +0900

Group study background

나만 그런건지는 모르겠지만, 실무를 하다보면 잊어버리는 개념들이 있다.

가끔 FE 뉴비인분들에게 질문을 받는데, 아리송 할때만큼 쪽팔릴때가 없었다.

정보 전달용이 아닌 개인 스터디 레코딩용 포스트입니다.

42.1 동기 처리와 비동기 처리

[예제 42-01]

const foo = () => {};
const bar = () => {};

foo();
bar();

[그림 42-01]

함수가 실행되려면 "함수 코드 평가 과정"에서 생성된 함수 실행 컨텍스트가 실행 컨텍스트에 푸시되어야 한다. 즉, 실행 컨택스트 스택에 함수 실행 컨택스트가 푸시되는 것은 바로 함수 실행의 시작을 의미한다. 함수가 호출된 순서대로 순차적으로 실행되는 이유는 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되기 때문이다.

JS 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. "실행 중인 실행 컨텍스트"를 제외한 모든 실행 컨텍스트는 모두 실행 대기 중인 테스큳링다. 대기 중인 테스크들은 현재 실행 중인 실행 컨텍스트가 팝되어 실행 컨택스트에서 제거되면, 비로소 실행되기 시작한다.

JS 엔진은 하나의 태스크만 실행할 수 있는 싱글 스레드 방식이기 때문에 시간이 걸리는 태스크를 실행하는 경우, 블로킹(blocking -작업 중단)이 발생한다. 예를 들어 sleep(func, 10 * 1000)을 사용하게 되면 약 10초 후에 func 함수를 호출한다. 이때 sleep 이후 코드 라인의 함수들은 10초동안 호출되지 못하고 블로킹(작업 중단)된다.

이렇게 한 태스크가 종료될 때까지 다음 실행될 태스크가 대기하는 방식을 동기처리(synchronous)라 한다. 동기 처리 방식은 태스크를 순서대로 하나씩 처리하므로 실행 순서가 보장되는 장점이 있지만 블로킹되는 단점이 있다.

42.2 이벤트 루프와 태스크 큐

JS 엔진은 "싱글 스레드"이기 때문에 하나씩 태스크를 처리해야 하는데, 우리가 사용하는 브라우저는 그렇지 않은듯 하다. 자바스크립트의 동시성(concurrecny)를 지원하기 위해 사용되는 것이 이벤트 루프(event loop)이다. 이 개념 또한 FE 개발자라면 꼭 알아야 할 개념 중 하나이며, 테크 인터뷰에서 등장하는 단골 토픽 중 하나이다.

[그림 42-02]

구글의 V8 JS 엔진을 비롯한 대부분의 엔진은 크게 2개의 영역으로 구분할 수 있다.

콜 스택(call stack)
- 소스코드(전역 코드나 함수 코드 등) 평가 과정에서 생성된 실행 컨택스트가 추가되고 제거되는 스택 자료구조인 실행 컨택스트 스택
- 함수를 호출하면 함수 실행 컨택스트가 순차적으로 콜 스택에 푸시되어 순차적으로 실행 됨. 하나의 콜 스택을 사용하기 때문에 최상위 실행 컨택스트가 종료되어 콜스택에서 제거되기 전까지는 다른 태스크들은 기다려야 한다.
힙(heap)
- 객체가 저장되는 메모리 공간. 콜 스택의 요소인 실행 컨택스트는 힙에 저장된 객체를 참조
- 메모리에 값을 저장하려면 먼저 값을 저장할 메모리 공간의 크기를 결정해야 한다. 객체는 원시 값과는 달리 크기가 정해져 있지 않으므로 할당해야 할 메모리 공간의 크기를 런타임에 결정(동적 할당)해야 한다. 따라서 객체가 저장되는 메모리 공간의 힙은 구조화되어 있지 않다.

비동기 처리에서 소스코드 평가와 실행을 제외한 모든 처리는 JS엔진을 구동하는 환경인 브라우저 또는 Node.js가 담당한다. 예를 들어, 비동기 방식으로 동작하는 setTimeout의 콜백 함수의 평가와 실행은 JS엔진이 담당하지만 호출 스케줄링을 위한 타이머 설정과 콜백 함수의 등록은 브라우저 또는 Node.js가 담당한다.

태스크 큐(task queue/event queue/callback queue)
- setTimout이나 setInterval와 같은 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역. 태스크 큐와는 별도로 프로미스의 후속 처리 메서드의 콜백 함수가 일시적으로 보관되는 Microstack queue도 존재한다.
이벤트 루프(event loop)
- 이벤트 루프는 콜 스택에 현재 실행 중인 실행 컨택스트가 있는지, 그리고 태스크 큐에 대기 중인 함수(콜백 함수, 이벤트 핸들러 등)가 있는지 반복해서 확인.
- If(콜 스택이 빔 && 대기 중인 함수 존재) -> 이벤트 루프는 순차적으로(FIFO) 태스크 큐에 대기 중인 함수를 콜 스택으로 이동

[예제 42-02]

function foo() {
  console.log('foo')
}

function bar() {
  console.log('bar')
}

setTimeout(foo, 0); // 0초(실제는 4ms) 후에 foo 함수 호출
bar();

코드 실행 순서

전역 코드가 평가되어 전역 실행 컨텍스트가 생성되고 콜 스택에 push
전역 코드가 실행되기 시작하여 setTimeout 함수 호출
1. setTimout 함수의 함수 실행 컨텍스트가 생성되고 콜 스택에 푸시되어 현재 실행 중인 실핸 컨텍스트가 됨. 브라우저의 WEB API인 타이머 함수도 함수이므로 함수 실행 컨텍스트 생성
setTimemout 함수라 실행되면 콜백 함수를 호출 스케줄링하고 종료되어 콜 스택에서 pop. 타이머 설정과 타이머가 만료되면 콜백 함수를 task queue에 푸시하는 것은 브라우저의 몫
브라우저가 수행하는 4-1과 js엔진이 수행하는 4-2는 병행 처리 됨.
1. 브라우저는 타이머를 설정하고 타이머의 만료를 기다림. 이후 타이머가 만료되면 콜백 함수 foo가 태스크 큐에 push. 위 예제의 경우 지연시간(delay)이 0이지만 지연 시간이 4ms 이하인 경우 최소 지연 시간 4ms가 지정 됨. 따라서 4ms 호에 콜백 함수 foo가 task queue에 push되어 대기하게 됨. 이 예시처럼 setTimeout 함수로 호출 스케줄링한 콜백 함수는 정확히 지연 시간 이후에 콜백 함수가 호출된다는 보장이 없음. 지연 시간 이후에 콜백 함수가 task queue에 push되어 대기하게 되지만 콜 스텍이 비어야 호출되므로 실제로는 약간의 시간차가 발생
2. bar 함수가 호출되어 bar 함수의 함수 실행 컨텍스트가 생성되고 콜 스택에 push되어 현재 실행 중인 실행 컨텍스트가 된다. 이후 bar 함수가 종료되어 콜 스택에서 pop 되고, 타이머를 설정한 후 약 4ms가 결과했다면 foo 함수는 아직 태스크 큐에서 대기 중
전역 코드 실행이 종료되고 전역 실행 컨텍스트가 콜 스택에서 pop 된다. 이로서 콜 스텍에는 아무런 실행 컨텍스트도 존재X
이벤트 루프에 의해 콜 스텍이 비어 있음이 감지되고 테스크 큐에서 대기 중인 콜백 함수 foo가 이벤트 루프에 의해 콜 스택에 push 된다. 즉, 콜백 함수 foo의 함수 실행 컨텍스트가 생성되고 콜 스택에 push되어 현재 실행 중인 실행 컨켁스트가 됨.

Summary

비동기 함수인 setTimeout의 콜백 함수는 태스크 큐에 푸시되어 대기하다가 콜 스택이 비게 되면, 전역 코드 및 명시적으로 호출된 함수가 모두 종료하면 콜 스택에 푸시되어 실행 됨.
JS 엔진은 싱글 스레드 방식 동작
브라우저는 멀티 스레드 방식 동작

[Group Study, 모던 자바스크립트 Deep Dive] - 41 타이머

Daniel(빡일) — Sun, 26 Mar 2023 18:44:12 +0900

Group study background

나만 그런건지는 모르겠지만, 실무를 하다보면 잊어버리는 개념들이 있다.

가끔 FE 뉴비인분들에게 질문을 받는데, 아리송 할때만큼 쪽팔릴때가 없었다.

정보 전달용이 아닌 개인 스터디 레코딩용 포스트입니다.

41.1 호출 스케줄링

함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하는데 이를 호출 스케줄링이라 한다.

타이머는 빌트인 함수가 아닌 호스트 객체이며 생성하기 위한 setTimeout, setInterval, 제거를 위한 clearTimeout, clearInterval을 제공한다.

JS 엔진은 단 하나의 실행 컨텍스트(싱글 스레드)를 갖기 때문에 두 가지 이상의 태스크를 동시에 실행할 수 없다. 따라서 setTimeout, setInterval은 비동기 처리 방식으로 동작한다.

41.2 타이머 함수

41.2.1 setTimeout/clearTimeout

세번째 매개변수에 전달해야 할 인수가 있는 경우 param을 전달할 수 있다. 또한 setTimeout은 고유 타이머 id을 반환한다. 따라서 변수에 저장하여 clearTimeout의 input으로 사용되고 타이머를 취소한다.

매개변수	설명
func	타이머가 만료된 뒤 호출될 콜백 함수 * 콜백 함수 대신 코드를 문자열로 전달 가능하지만 권장 x
delay	타이머 만료 시간(밀리초ms 단위). setTimeout 함수는 delay 시간으로 단 한 번 동작하는 타이머를 생성한다. 인수 전달을 생략한 경우 기본값 0이 지정된다.
param	호출 스케줄링된 콜백 함수에 전달해야 할 인수가 존재하는 경우 세 번째 이후의 인수로 전달 가능.

41.2.2 setInterval/clearInterval

interval 함수는 인수로 전달 받은 시간마다 반복 동작하는 타이머이다. setInterval 전달 인수는 setTimeout과 동일하다.

41.3 Debounce & Throttle

어쩌면 이 챕터에서 가장 중요한 개념 중 하나로 보인다. Debounce와 Throttle은 면접에서도 단골 질문이며, 현생의 프로젝트에서도 꼭 사용되는 기법 중 하나이다.

마우스 scroll || mousemove, 브라우저 resize, input 이벤트 등 같은 이벤트들은 짧은 시간 간격으로 연속해서 발생한다. 이러한 연속적인 이벤트들에 바인딩한 이벤트 핸들러(함수)는 과도하게 호출되어 성능 문제를 발생시킬 확률이 아주아주아주 높다.

예를 들어 구글 검색 input tag에 찾고 싶은 문장의 검색어(20~30자)를 타이핑 한다고 가정해보자. input 메서드에 이벤트 핸들러가 바인딩 되어 있다면, 모든 단어를 타이핑하고 때로는 백스페이스로 지울때마다 자동 검색을 위한 api를 호출하게 된다. 자 이렇게 되면 FE 성능은 두 번째 치고, BE engineer에게 쿠사리를 먹지 않을 자신이 있을까....?

이런 불상사를 피하고 아름다운 세상(?)을 만들기 위해 사용되는 기법이 Debounce와 Throttle이다.

[예제 41-01]

<body>
 <button>click me</button>
 <pre>일반 클릭 이벤트 카운터 <span class="normal-msg">0</span></pre>
 <pre>디바운스 클릭 이벤트 카운터 <span class="debounce-msg">0</span></pre>
 <pre>스로틀 클릭 이벤트 카운터 <span class="throttle-msg">0</span></pre>
 <script>
  const $button = document.querySelector('button');
  const $normalMsg = document.querySelector('.normal-msg');
  const $debuonceMsg = document.querySelector('.debounce-msg');
  const $throttleMsg = document.querySelector('.throttle-msg');
  
  const debounce = (callback, delay) => {
   let timerId;
   return event => {
    if (timerId) clearTimeout(timerId);
    timerId = setTimeout(callback, delay, event)
   }
  }
  
  const throttle = (callback, delay) => {
   let timerId;
   return event => {
    if (timerId) return;
    timerId = setTimeout(() => {
     callback(event)
     timerId = null;
    }, delay, event);
   }
   
  $button.addEvnetListener('click', () => {
  	$normalMsg.textContent = +$normalMsg.textContent + 1;
  )}
  $button.addEvnetListener('click', decounce() => {
  	$debuonceMsg.textContent = +$debuonceMsg.textContent + 1;
  )}
  $button.addEvnetListener('click', throttle() => {
  	$throttleMsg.textContent = +$throttleMsg.textContent + 1;
  )}
</body>

41.3.1 디바운스

디바운스(debounce)는 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출되도록 한다. 즉, 디바운스는 짧은 시간 간격으로 ㅂ라생하는 이벤트를 그룹화해서 마지막에 한 번만 이벤트 핸들러가 호출되도록 한다.

위의 코드에서 보이는 것처럼 decounce가 반환한 함수는 debounce 함수에 두번째 인수로 전달한 시간(delay)보다 짧은 간격으로 이벤트가 발생하면 이전 타이머를 취소하고 새로운 타이머를 재설정한다. 따라서 delay보다 짧은 간격으로 이벤트가 연속해서 발생하면 debounce 함수의 첫 번째 인수로 전달한 콜백 함수는 호출되지 않다가 delay동안 이벤트가 더 이상 발생하지 않으면 한번만 호출된다.

위의 예시인 구글 검색 창의 input tag 이벤트에 적합하다고 할 수 있다.

적합한 적용 예시: input event

ref https://llu.is/throttle-and-debounce-visualized/

41.3.2 쓰로틀

쓰로틀(throttle)은 짧은 시간 간격으로 이벤트가 연속해서 발생하더라도 일정 시간 간격으로 이벤트 핸들러가 최대 한 번만 호출되도록 한다. 즉, 스로틀은 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 일정 시간 단위로 이벤트 핸들러가 호출되도록 호출 주기를 만든다.

적합한 적용 예시: scroll event

[그림 41-02]

ref https://llu.is/throttle-and-debounce-visualized/

[Group Study, 모던 자바스크립트 Deep Dive] - 40 이벤트

Daniel(빡일) — Sun, 5 Mar 2023 22:16:46 +0900

Group study background

나만 그런건지는 모르겠지만, 실무를 하다보면 잊어버리는 개념들이 있다.

가끔 FE 뉴비인분들에게 질문을 받는데, 아리송 할때만큼 쪽팔릴때가 없었다.

정보 전달용이 아닌 개인 스터디 레코딩용 포스트입니다.

40.1 이벤트 드리븐 프로그래밍

브라우저는 처리해야 할 특정 사건(클릭, 키보드 입력, 마우스 이동, 포커스...)이 발생하면 이를 감지하여 이벤트를 발생시킨다. 우리가 만드는 애플리케이션은 특정 이벤트 타입에 대해 반응하여 어떤 일(function, logic,...)을 하길 원하면 그 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임한다. 호출될 함수를 이벤트 핸들러 라 하고, 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라 한다. 이벤트와 이벤트 핸들러를 통해 사용자와 애플리케이션은 상호작용을 하게 된다. 이처럼 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식을 이벤트 드리븐 프로그래밍이라 한다.

40.3 이벤트 핸들러 등록

40.3.1 이벤트 핸들러 어트리뷰트 방식

HTML element의 attribute 중에는 이벤트에 대응하는 이벤트 핸들러 attribute가 있다. onclick과 같이 on + 이벤트 종류 처럼 이루어져 있는데 함수 참조가 아닌 함수 호출문을 할당하여 호출문의 평가 결과가 이벤트 핸들러로 등록된다. 만약 이벤트 핸들러 attribute 값으로 함수 참조를 할당해야 한다면 이벤트 핸들러에 paramteter을 전달하기 곤란하다.

[예제 40-01]

예시
<button onclick="sayHi('Park')"> </button>

변환되는 이벤트 핸들러
function onclick(event) { sayHi('Park') }

40.3.2 이벤트 핸들러 프로퍼티 방식

window 객체와 Document, HTMLElement 타입의 DOM 노드 객체는 이벤트에 대응하는 이벤트 핸들러 프로퍼티를 가지고 있다. 이벤트 핸들러 프로퍼티의 키는 이벤트 핸들러 attribute와 마찬가지로 on + 이벤트 종류로 이루어져 있다. "이벤트 핸들러 프토퍼티 방식"은 "이벤트 핸들러 어트리뷰트 방식"의 HTML과 자바스크립트가 해결할 수 있다. CBD(Component Based Development)에선 어쩔 수 없기도 하지만... 하지만, 이벤트 핸들러 프로퍼티 에 하나의 이벤트 핸들러만 바인딩 가능하다는 단점이 있다.

[예제 40-02]

...
const $button = document.querySelector('button');

$button.onclick = function () { console.log('button clicked') }
...

40.3.3 addEventListener 방식

"이벤트 핸들러 프로퍼티" 방식과는 다르게 하나 이상의 이벤트 핸들러를 등록할 수 있다. 이때 이벤트 핸들러는 등록된 순서대로 호출된다.

[예제 40-03]

...
$button.addEventListner('click', function() { console.log('button clicked') })
...

40.4 이벤트 핸들러 제거

1. addEventListener 메서드에 전달한 인수와 removeEventListener 메서드에 전달한 인수가 일치하지 않으면 제거되지 않는다.

2. 기명 이벤트 핸들러 내부에서 removeEventListener 메서드를 호출하여 이벤트 핸들러를 제거하는 것도 가능하다. 이때 이벤트 핸들러는 단 한 번만 호출된다.

3. 함수 자신을 가리키는 arguments.callee를 사용할 수도 있지만 strict mode에서 사용이 금지된다.

4. 이벤트 핸들러 프로퍼티 방식으로 등록한 이벤트 핸들러는 removeEventListener 메서드로 제거할 수 없기 때문에 null을 할당한다.

40.5 이벤트 객체

이벤트가 발생하면 이벤트에 관련한 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성된다. 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다.

[예제 40-04]

...

// 클릭 이벤트에 의해 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다.
function showCoords(e) {
 $msg.textContent = `clientX: ${e.clientX}, clientY: ${e.clientY}`
}


document.onclick = showCoords;

...

[예제 40-05]

...
<!-- 이벤트 핸들러 어트리뷰트 방식의 경우 event가 아닌 다른 이름으로는 이벤트 객체를 전달받지 못한다. -->
<body onclick="showCoords(event)">
</body>
...

40.5.1 이벤트 객체의 상속 구조

이벤트가 발생하면 이벤트 타입에 따라 다양한 타입의 이벤트 객체가 생성되고 아래처럼 상속 구조를 갖는다.

40.5.2 이벤트 객체의 공통 프로퍼티

Event 인터페이스, 즉 Event, prototype에 정의되어 있는 이벤트 관련 프로퍼티는 UIEvent, CustomEvent, MouseEvent 등 모든 파생 이벤트 객체에 상속된다. 즉, Event 인터페이스의 이벤트 관련 프로퍼티는 모든 이벤트 객체가 상속받는 공통 프로퍼티다.

공통 프로퍼티	설명	타입
type	이벤트 타입	string
target	이벤트를 발생시킨 DOM 요소	DOM 요소 노드
currentTarget	이벤트를 핸들러가 바인딩된 DOM 요소	DOM 요소 노드
eventPhase	이벤트 전파 단계 0: 이벤트 없음 1: 캡처링 2: 타깃 3: 버블링	number
bubbles	이벤트 버블링 전파 여부 다음 이벤트는 bubbles: false로 버블링하지 않는다. - 포커스: focus/blur - 리소스: load/unload/abor/error - 마우스: mouseenter/mouseleave	boolean
cancelable	preventDefault 메서드를 호출하여 이벤트의 기본 동작을 취소할 수 있는지 여부. 다음 이벤트는 cancelable: false로 취소할 수 없다. - 포커스: focus/blur - 리소스: load/unload/abor/error - 마우스: dbclick/mouseenter/mouseleave	boolean
defaultPrevented	preventDefault 메서드를 호출하여 이벤트를 취소했는지 여부	boolean
isTrusted	사용자의 행위에 의해 발생된 이벤트인지 여부. 예를 들어 click 메서드 또는 dispatchEvent 메서드를 통해 인위적으로 발생시킨 이벤트인 경우 false	boolean
timeStmap	이벤트가 발생한 시각(1970/01/01/00:00:0부터 경과한 밀리초)	number

40.5.3 마우스 정보 취득

click, dbclick, mousedown, mouseup, mousemove, mouseenter, mouseleave 이벤트가 발생하면 ㅅㅐㅇ성되는 MouseEvent 타입의 이벤트 객체는 다음과 같은 고유의 프로퍼티를 갖는다.

- 마우스 포인터의 좌표 정보를 나타내는 프로퍼티: screenX/screenY, clientX/clientY, pageX/pageY, offestX/offestY

- 버튼 정보를 나타내는 프로퍼티: altKey, ctrlKey, shiftKey, button

40.5.4 키보드 정보 취득

keydown, keyup, keypress 이벤트가 발생하면 생성되는 KeyboardEvent 타입의 이벤트 객체는 altKEy, ctrlKey, shiftKey, metaKey, key, keyCode 같은 고유의 프로퍼티를 갖는다.

40.6 이벤트 전파

DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다. 이를 이벤트 전파(event propogation)라고 한다.

[예제 40-06]

<html>
<body>
 <ul id="fruits">
   <li id="apple">Apple</li>
   <li id="banana">Banana</li>
   <li id="orange">Orange</li>
</body>
</html>

ul 요소의 두 번째 자식 요소인 li 요소를 클릭하면 클릭 이벤트가 발생한다. 이때 생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타겟을 중심으로 DOM 트리를 통해 전파된다. 이벤트 전파는 이벤트 객체가 전파되는 방향에 따라 3단계로 구분된다.

[예제 40-07]

<html>
<body>
 <ul id="fruits">
   <li id="apple">Apple</li>
   <li id="banana">Banana</li>
   <li id="orange">Orange</li>
  </ul>
  <script>
   const $fruit = document.getElementById('fruits');
   
   //#fruits 요소의 하위 요소인 li 요소를 클릭한 경우
   $fruits.addEventListner('click' e => {
    console.log(`이벤트 단계: ${e.eventPhase}`) //3: 버블링 단계
    console.log(`이벤트 타깃: ${e.target}`) //[object HTMLLIlement]
    console.log(`커런트 타깃: ${e.currentTarget}`) //[object HTMLULListElement]
   })
  </script>
</body>
</html>

li 요소를 클릭하면 클릭 이벤트가 발생하여 클릭 이벤트 객체가 생성되고 클릭된 li 요소가 이벤트 타깃이 된다.

캡처링 단계: 이벤트 객체는 window에서 시작해서 이벤트 타깃 방향으로 전파된다.
타깃 단계: 이벤트 객체는 이벤트를 발생시킨 이벤트 타깃에 도달한다.
버블링 단계: 이벤트 객체는 이벤트 타깃에서 시작해서 window 방향으로 전파된다.

이벤트 핸들러 어트리뷰트/프로퍼티 방식으로 등록한 이벤트 핸들러는 타깃, 버블링 단계의 이벤트만 캐치 가능하다. 하지만 addEventListner 메서드 방식으로 등록한 이벤트 핸들러는 타깃/버블링/캡처링 단계 모두 캐치 가능하다.

[예제 40-08]

<html>
<body>
 <ul id="fruits">
   <li id="apple">Apple</li>
   <li id="banana">Banana</li>
   <li id="orange">Orange</li>
  </ul>
  <script>
   const $fruit = document.getElementById('fruits');
   const $banana = document.getElementById('banana');
  
  
   //캡처링 단계
   $fruits.addEventListner('click', e => {
    console.log(`이벤트 단계: ${e.eventPhase}`) //1: 캡처링 단계
    console.log(`이벤트 타깃: ${e.target}`) //[object HTMLLIlement]
    console.log(`커런트 타깃: ${e.currentTarget}`) //[object HTMLULListElement]
   }, true)
   
   //버블링 단계
   $fruits.addEventListner('click', e => {
    console.log(`이벤트 단계: ${e.eventPhase}`) //2: 타깃 단계
    console.log(`이벤트 타깃: ${e.target}`) //[object HTMLLIlement]
    console.log(`커런트 타깃: ${e.currentTarget}`) //[object HTMLULListElement]
   })

   //버블링 단계
   $fruits.addEventListner('click', e => {
    console.log(`이벤트 단계: ${e.eventPhase}`) //3: 버블링 단계
    console.log(`이벤트 타깃: ${e.target}`) //[object HTMLLIlement]
    console.log(`커런트 타깃: ${e.currentTarget}`) //[object HTMLULListElement]
   })
  </script>
</body>
</html>

40.7 이벤트 위임

이벤트 위임(event delegation)은 여러 개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 DOM 요소에 이벤트 핸들러를 등록하는 방법 이다.

모든 li에 eventListener을 등록하면 퍼포먼스 이슈가 생기기 때문에 이벤트 위임을 적용하는 것이 낫다. 하지만, DOM 요소가 아닌 상위 요소에 이벤트 핸들러를 등록하기 때문에 이벤트 타깃이 아닐 가능성도 있다.

[예제 40-09]

<html>
<body>
  <nav>
    <ul id="fruits">
     <li id="apple">Apple</li>
     <li id="banana">Banana</li>
     <li id="orange">Orange</li>
    </ul>
  </nav>
  <div>선택된 네비게이션 아에팀: <em class="msg">apple</em></div>
  
  <script>
   const $fruit = document.getElementById('fruits');
   const $msg = document.getElementById('.msg');
  
  
   // 사용자 클릭에 의해 선택된 네비게이션 아이템(li 요소)에 active 클래스를 추가하고
   // 그 외의 모든 내비게이션 아이템의 active 클래스를 제거한다.
   function activate({ target }) {
    if (!target.matches('#fruits > li')) return;
    
    [...$fruits.children].forEach($fruit => {
     $fruit.classList.toggle('active', $fruite === target)
     $msg.textContent = target.id;
    })
   }
   
   $fruits.onclick = activate
  </script>
</body>
</html>

40.8 DOM 요소의 기본 동작 조작

40.8.1 DOM 요소의 기본 동작 중단

이벤트 객체의 preventDefault 메서드는 DOM 요소의 기본 동작을 중단시킨다.

40.8.2 이벤트 전파 동지

이벤트 객체의 stopDefault 메서드는이벤트 전파를 중단시킨다.

40.9 이벤트 핸들러 내부의 this

40.9.1 이벤트 핸들러 어트리뷰트 방식

일반 함수로서 호출되는 함수 내부의 this는 전역 객체를 가리킨다. 따라서 handleClick 함수 내부의 this는 전역 객체 window를 가리킨다.

단, 이벤트 핸들러로 호출할 때 인수로 전달한 this는 이벤트를 바인딩한 DOM 요소를 가리킨다.

[예제 40-10]

<button onclick="handleClick(this)">CLick me</button>
</body>
<script>
function handleClick(button) {
 console.log(button) // 이벤트를 바인딩한 button 요소
 console.log(this) // window
 
}
</script>

40.9.2 이벤트 핸들러 프로퍼티 방식과 addEvenetListener 메서드 방식

1. 이벤트 핸들러 프로퍼티 방식과 addEventListener 메서드 방식 모두 이벤트 핸들러 내부의 this는 이벤트를 바인딩한 DOM 요소를 가리킨다. 즉, 이벤트 핸들러 내부의 this는 이벤트 객체의 currentTarget 프로퍼티와 같다.

2. 화살표 함수로 정의한 이벤트 핸들러 내부의 this는 상위 스코프의 this를 가리킨다. 화사표 함수는 함수 자체의 this를 갖지 않는다.

3. 클래스에서 이벤트 핸들러를 바인딩하는 경우 this에 주의해야 한다.

[예제 40-11]

<html>

<body>
  <button class="btn">0</button>

  <script>
    class App {
      this.$button = document.querySelector('.btn")
      this.count = 0;
      
      // increase 메서드를 이벤트 핸들러로 등록
      // 아래처럼할 경우 increase내부에서 this.$button.$button이 됨.
      // this.$button.onclick = this.increase
      
      // increase 메서드 내부의 this가 인스턴스를 가리키도록 한다.
      this.$button.onclick =  this.increase.bind(this)
      
    }
    
    // 이벤트 핸들러 내부의 this는 이벤트를 바인딩한 DOM 요소를 가리키기 때문에 
    // increase 메서드 내부의 this는 this.$button을 가리킨다. 
    increase() {
      this.$button.textContent = ++this.count;
    }
    
    new App()
  </script>


</html>

클래스 필드에 할당한 화살표 함수를 이벤트 핸들러로 등록하여 이벤트 핸들러 내부의 this가 인스턴스를 가리키도록 할 수도 있음.

[예제 40-12]

<html>

<body>
  <button class="btn">0</button>

  <script>
    class App {
      this.$button = document.querySelector('.btn")
      this.count = 0;
      
      // increase 메서드를 이벤트 핸들러로 등록
      // 아래처럼할 경우 increase내부에서 this.$button.$button이 됨.
      // this.$button.onclick = this.increase
      
      // increase 메서드 내부의 this가 인스턴스를 가리키도록 한다.
      this.$button.onclick =  this.increase.bind(this)
      
    }
    
    // 클래스 필드 정의
    // increase는 인스턴스 메서드이며 this는 인스턴스를 가리킨다.
    increase() = () =>  this.$button.textContent = ++this.count;


    new App()
  </script>


</html>

40.10 이벤트 핸들러에 인수 전달

이벤트 핸들러 프로퍼티 방식과 addEventListener 메서드 방식의 경우 이벤트 핸들러를 브라우저가 호출하기 때문에 함수 호출문이 아닌 함수 자체를 등록해야 하기 때문에 인수를 전달할 수 없다. 그러나 이벤트 핸들러 내부에서 함수를 호출하면서 인수를 전달할 수 있다.

이벤트 핸들러를 반환하는 함수를 호출하면서 인수를 전달할 수도 있다.

[예제 40-13]

<html>
<body>
  <label>User name <input type='text'></label>
  <em class="message"></em>
  <script>
   const MIN_USER_NAME_LENGTH = 5;
   const $input = document.querySelector('input[type=text]');
   const $msg = document.querySelector('.message');
   
   const checkUserNameLength = min => e => {
    $msg.textContent 
     = $input.value.length < min ? `이름음 ${min}자 이상 입력해 주세요` : '';
   }
   
   $input.onblur = checkUserNameLength(MIN_USER_NAME_LENGTH)
  </script>
</body>
</html>

40.11 커스텀 이벤트

40.11.1 커스텀 이벤트 생성

Event, UIEvent, MouseEvent 같은 이벤트 생성자 함수를 호출하여 명시적으로 생성한 이벤트 객체는 임의의 이벤트 객체를 커스텀 이벤트로 지정할 수 있다.

[예제 40-14]

const keyboradEvent = new KeyboardEvent('keyup')
console.log(keyboardEvent.type) //keyup

const customEvent = new CustomEvent('foo')
console.log(customEvent.type) //foo

생성된 커스텀 이벤트 객체는 버블링되지 않으며 preventDefault메서드로 취소할 수 없다. 즉 bubbles, cancelable 프로퍼티의 값이 false로 기본 설정된다. 설정이 필요할 경우 두 번째 인수로 bubbles, 또는 cancelable 프로퍼티를 갖는 객체를 전달하면 된다.

[예제 40-15]

const customEvent = new MouseEvent('click', {
 bubbles: true,
 cancelable: true,
 // 이벤트 고유의 프로퍼티 값도 지정 가능
 // clientX: 50,
 // clientY: 100
})

40.11.1 커스텀 이벤트 디스패치

생성된 커스텀 이벤트는 dispatchEvent 메서드로 디스패치(dispatch)할 수 있다. dispatchEvent 메서드에 이벤트 객체를 인수로 전달하면서 호출하면 인수로 전달한 이벤트 타입의 이벤트가 발생한다.

이벤트 핸들러는 비동기 처리 방식으로 동작하지만 dispatchEvent 메서드는 이벤트 핸들러를 동기적으로 호출한다. 따라서 dispatchEvent 메서드를 이벤트로 디스패치하기 이전에 커스텀 이벤트를 처리할 이벤트 핸들러를 등록해야 한다.

[예제 40-16]

<html>
<body>
  <button class="btn">Click me</button>
  <script>
    const $button = document.querySelector('.btn');
    
    // 버튼 요소에 click 커스텀 이벤트 핸들러를 등록
    //커스텀 이벤트를 티스패치하기 전에 이벤트 핸들러를 등록해야 한다.
    $button.addEventListner('click', e => {
     console.log(e) // MouseEvent {isTrusted: false, screenX: 0, ...}
     alert(`${e} Clicked`);
    })
    
    const customEvent = new MouseEvent('click');
    
    $button.dispatchEvent(customEvent)
  </script>
</body>
</html>

기존 이벤트 타입이 아닌 임의의 이벤트 타입을 지정하여 커스텀 이벤트 객체를 생성한 경우 반드시 addEventListener 메서드 방식으로 이벤트 핸들러를 등록해야 한다. element node에 on + 이벤트 핸들러 어트리뷰트/프로퍼티가 존재하지 않기 때문.

[예제 40-17]

<html>
<body>
  <button class="btn">Click me</button>
  <script>
    const $button = document.querySelector('.btn');
    
    // 버튼 요소에 foo 커스텀 이벤트 핸들러를 등록
    // 커스텀 이벤트를 티스패치하기 전에 이벤트 핸들러를 등록해야 한다.
    $button.addEventListner('foo', e => {
     alert(e.detail.message);
    })
    
    const customEvent = new CustomEvent('foo', {
      detail: { message: 'Hello' }
    });
    
    $button.dispatchEvent(customEvent)
  </script>
</body>
</html>

[Group Study, 모던 자바스크립트 Deep Dive] - 39 DOM

Daniel(빡일) — Mon, 20 Feb 2023 02:25:23 +0900

Group study background

나만 그런건지는 모르겠지만, 실무를 하다보면 잊어버리는 개념들이 있다.

가끔 FE 뉴비인분들에게 질문을 받는데, 아리송 할때만큼 쪽팔릴때가 없었다.

정보 전달용이 아닌 개인 스터디 레코딩용 포스트입니다.

39.0 Preface

DOM, Browser Rendering, ... 등 어쩌면 FE 개발자의 정석이라고 해도 과언이 아니다.

DOM(Document Object Model)은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다.

39.1 노드

39.1.1 HTML 요소와 노드 객체

HTML element는 HTML 문서를 구성하는 개별적인 요소이며 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 element Node 객체로 변환된다.

[그림 39-01]

HTML 문서는 HTML element들의 집합으로 이뤄지며, element와 중첩 관계에 의해 계층적인 parent-child 관계가 형성된다. HTML element 간의 관계를 바녕ㅇ하여 HTML 요소를 개체화한 모든 노드 객체들을 트리 자료 구조로 구성한다. 노드 객체들로 구성된 트리 자료구조를 DOM 또는 DOM Tree라 한다.

39.1.2 노드 객체의 타입

[그림 39-02]

[그림 39-03]

그림 39-02의 HTML 문서를 렌더링 엔진이 파싱하면 그림 39-03처럼 파싱하여 DOM을 생성한다.

DOM의 중요한 노드 타입 4가지

- Document Node

DOM 트리의 최상위에 존재하는 루트 노드로 document 객체 자체, 브라우저가 렌더링한 HTML 문서 자체를 가리키는 객체이며 전역 객체 window의 document 프로퍼티에 바인딩되어 있다. (window.document or document)

브라우저 환경의 모든 JS 코드는 script 태그에 분리되어 있어도 하나의 전역 객체 window를 공유한다. 따라서 모든 JS 코드는 전역 객체 window의 document 프로퍼티에 바인딩 되어 있는 하나의 document 객체를 바라본다. 즉, document 객체는 HTML에 하나만 존재하며 DOM 트리의 노드들에 접근하기 위한 entry point 역할을 담당한다.

- Element Node

HTML element를 가리키는 객체, 이 element 간의 중첩에 의해 부자 관계를 가지며, 이 부자 관계를 통해 정보를 구조화한다. 따라서 문서의 구조를 표현한다고 할 수 있다.

- Attribute Node

말 그대로, HTML element의 attribute를 가리키는 객체. 당연한 이야기지만, 부모 element node에 연결이 되지 않고, 관련된 element node에 직접 연결되어 있음.

- Text Node

HTML element의 텍스트를 가리키는 객체. child node를 가질 수 없는 leaf node이므로 dom 트리의 최종단.

39.1.3 노드 객체의 상속 구조

DOM을 구성하는 노드 객체는 자신의 구조와 정보를 제어할 수 있는 DOM API를 사용할 수 있다. 이를 통해 자신의 부모, 형제, 자식을 탐색할 수 있으며 attribute와 텍스트를 조작할 수도 있다.

[그림 39-04] 우측 방향으로의 상하 관계

[그림 39-05]

예를 들어, Input 요소 노드 객체는 프로토타입 체인에 있는 모든 프로토타입의 프로퍼티나 메서드를 상속받아 사용할 수 있다. 노드 객체의 상속 구조는 아래처럼 개발자 도구의 Elements 패널 오축의 Properties 패널에서 확인할 수 있음.

[그림 39-06]

노드 객체에는 노드 객체의 종류(타입)에 상관없이 공통으로 갖는 기능도 있고, 노드 타입에 따라 고유한 기능도 있다. EventTarget interface(EventTarget.addEventListener, EventTarget.removeEventListener ... 등), Node interface(Node.nodeType, node.nodeName, Node.parentNode, Node.childNodes, ...등)

정리하자면 DOM은 HTML 문서의 계층적 구조와 정보를 표현하는 것은 물론 노드 객체의 종류, 즉 노드 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집합인 DOM API로 제공한다. 이 DOM API를 통해 HTML의 구조나 내용 또는 스타일 등을 동적으로 조작할 수 있다.

39.2 Element Node 취득

HTML의 구조나 내용 또는 스타일 등을 동적으로 조작하려면 먼저 Element Node를 취득해야 한다.

39.2.1 id를 이용한 Element Node 취득

Document.prototype.getElementByID 메서드는 인수로 전달한 id attribute 값을 갖는 하나의 element node를 탐색해 반환한다. document.getEelementById('${id}')를 통해서 얻을 수 있다. HTML 요소에 id attribute를 부여하면 id 값과 동일한 이름의 전역 변수가 암묵적으로 선언되고 해당 노드 객체가 할당되는 부수 효과가 있다.

39.2.2 Tag 이름을 이용한 Element Node 취득

Document.prototype/Element.prototype.getElementsByTagName 메서드는 인수로 전달한 태그 이름을 갖는 모든 요소 노드들을 탐색하여 유사 배열 객체이면서 이터러블인 HTML Collecion 객체로 반환한다.

39.2.3 Class를 이용한 Element Node 취득

Document.prototype/Element.prototype.getElementsByClassName 메서드는 인수로 전달한 class attribute 값을 갖는 모든 요소 노드들을 탐색하여 반환한다. 인수로 전달할 class 값은 공백으로 구분하여 여러 개의 class를 지정할 수 있다.

39.2.4 CSS selector을 이용한 Element Node 취득

CSS Selector는 스타일을 적용하고자 하는 HTML element를 특정할 때 사용하는 문법이다.

[그림 39-07]

Document.prototype/Element.prototype.querySelectorAll 메서드는 인수로 전달한 CSS 선택자를 만족시키는 모든 요소 노드를 탐색하여 반환한다. e.g(document.querySelectorAll('ul > li')

39.2.5 특정 element 노드를 취득할 수 있는지 확인

Element.prototype.matches 메서드는 인수로 전달한 CSS 선택자를 통해 특정 요소 노드를 취득 할 수 있는지 확인하여 Boolean 값으로 반환한다.

39.2.6 HTMLCollection과 NodeList

HTML Collection은 언제나 live 객체로 동작하여 노드 객체의 상태 변화를 실시간으로 반영하지만, NodeList는 대부분 과거의 정적 상태를 유지하는 None-live 객체로 동작한다.

HTMLCollection

HTMLCollection 객체는 실시간으로 노드 객체의 상태 변경을 반영하여 요소를 제거할 수 있기 때문에 HTML Collection 객체를 for 문으로 순회하면서 노드 객체의 상태를 변경해야 할 때 주의해야 한다.

[예제 39-18]

...(생략)
<body>
  <ul>
    <li class="red">A</li>
    <li class="red">B</li>
    <li class="red">C</li>
  </ul>
  <script>
   const $elems = document.getElementByClassName('red')
   console.log($elems) //HTMLCollection(3) [li.red, li.red, li.red]
   
   // not intended
   for (let i = 0; i < $elems.lenght; i++) $elems[i].className = 'blue'
   
   console.log($elems) //HTMLCollection(1) [li.red]
   
   
   // solution1 역방향 순회
   for (let i = $elems.length - 1; i >= 0; i--) $elems[i].className = 'blue'
   
   // solution2 while을 이용해 노드 객체 length
   let i = 0;
   while($elems.length > i)  $elems[i].className = 'blue'
  </script>
</body>
...(생략)

NodeList

HTMLCollection 객체의 부작용을 해결하기 위해 NodeList를 반환하는 querySelectorAll 메서드를 사용할 수 있다. 하지만 childNodes 프로퍼티가 반환하는 NodeList 객체는 HTMLCollection 객체와 같이 실시간으로 노드 객체의 상태 변경을 반영하는 Live 객체로 동작하므로 주의가 필요하다.

이처럼 상태 변경과 상관없이 안전하게 DOM 컬렉션을 사용하려면 Spread 문법이나 Array.from 메서드를 사용하여 배열로 변환하여 사용하는 것이 낫다.

39.3 Element 탐색

DOM은 트리 상의 노드를 탐색 할 수 있도록 Node, Element 인터페이스는 트리 탐색 프로퍼티를 제공한다.

node 탐색 프로퍼티는 모두 접근자 프로퍼티로 getter만 존재하는 읽기 전용 접근자 프로퍼티다.

[그림 39-08]

39.3.1 공백 텍스트 노드

HTML element 사이의 스페이스, 탭, 줄바꿈(개행) 등의 공백 문자는 공백 텍스트 노드를 생성한다.

39.3.2 자식 노드 탐색

[그림 39-09]

39.3.3 자식 노드 확인

자식 노드가 존해하는지 확인하려면 Node.prototype.hasChildNodes 메서드를 사용한다.

39.4 노드 정보 취득

노드 객체에 대한 정보를 취득하기 위해선 다음과 같은 노드 정보 프로퍼티를 사용한다.

[그림 39-10]

39.5 Element 노드의 텍스트 조작

39.5.1 nodeValue

Node.prototype.nodeValue 프로퍼티는 setter와 getter 모두 존재하는 접근자 프로퍼티다 따라서 nodeValue 프로퍼티는 참조와 할당 모두 가능하다.

[예제 39-20]

...(생략)
<body>
 <div id="foo">Hello</div>
</body>
 const $foo = docuemnt.getEelementById('foo')
 console.log($foo.nodeValue)//null
 
 const $textNode = $foo.firstChild
 console.log($textNode.nodeValue)
 
 
 $textNode.nodeValue = 'World'
 
...(생략)

39.5.2 textContent

textContent를 참조하면 Element Node의 HTML 마크업은 무시하고 콘텐츠 영역의 텍스트를 모두 반환한다.

39.6 DOM 조작

DOM 조작은 새로운 노드를 생성하여 DOM에 추가하거나 기존 노드를 삭제 || 교체하는 것이기 떄문에 reflow && repaint가 발생한다. 따라서 성능에 영향을 주게 되어 성능 최적화를 위해 주의해 다루어야 한다.

39.6.1 innerHTML

element node의 innerHTML 프로퍼티를 참조하면 컨텐츠 영역 내에 포함한 모든 HTML 마크업을 문자열로 반환한다.(getter/setter)

사용자로부터 입력받은 데이터를 그대로 innerHTML에 할당하는것은 XSS에 취약하므로 위험하지만 HTML5는 innerHTML 프로퍼티로 삽인된 script 요소 내의 자바스크립트 코드를 실행하지 않는다.

innerHTML 프로퍼티를 조작하는 경우 모든 자식 노드를 제거하고 할당한 HTML 마크업 문자열을 파싱하여 DOM을 변경하는 것이다.

39.6.2 insertAdjacentHTML

innerHTML과 달리 기존 요소를 제거하지 않으면서 위치를 지정해 새로운 요소를 삽입한다.

하지만 XSS에 취약한 것은 동일하다.

[그림 39-11]

[예제 39-21]

(생략)
<!-- beforebegin -->
<div id="foo">
  <!-- afterbegin -->
  text
  <!-- beforeend -->
</div>
<!-- afterend -->


<script>
 const $foo = document.getElementById('foo')
 $foo.insertAdjacentHTML('beforebegin', <p>beforebegin</p>')
 $foo.insertAdjacentHTML('afterbegin', <p>afterbegin</p>')
 $foo.insertAdjacentHTML('beforeend', <p>beforeend</p>')
 $foo.insertAdjacentHTML('afterend', <p>afterend</p>')
</script>
(생략)

39.6.3 노드 생성과 추가

[예제 39-22]

(생략)
<ul id="fruits">
 <li>Apple</li>
</ul>


<script>
 const $fruits = document.getElementById('fruits')

 // 1. 요소 노드 생성
 const $li = document.createEelement('li');
 
 // 2. 텍스트 노드 생성
 const textNode = document.createTextNode('Banana');
 
 // 3.텍스트 노드를 $li 요소 노드의 자식 노드로 추가
 $li.appendChild(textNode);
 
 // 4. $li 요소 노드를 #fruits 요소 노드의 마지막 자식 노드로 추가
 $fruits.appendChild($li)
</script>
(생략)

39.6.4 복수의 노드 생성과 추가

forEach로 복수의 노드를 생성해 붙이는 경우는 dom의 N번 변경으로 비효율적이며 div를 만들어 붙이는 것은 불필요한 노드를 생성한다.

따라서 DocumentFragment 노드를 사용할 수 있는데, 기존 DOM과는 별도로 존재한다. DocumentFragment 노드에 자식 노드를 추가해도 DOM에는 어떤 변경도 발생하지 않고 자신만 제거되고 자식의 노드만 DOM에 추가된다. 아래 예제와 같이 하면 reflow, repaint 모두 한 번만 실행된다.

[예제 39-23]

(생략)
<body>
 <ul id="fruits"></ul>
</body>
<scripts>
 const $fruits = document.getElementById('fruits');
 
 //DocumentFragment
 const $fragment = document.createDocumentFragment()
 ['A, 'B', 'C'].foreEach(text => {
  // 1. 요소 노드 생성
  const $li = document.createElement('li')
  
  // 2.텍스트 노드 생성
  const textNode = document.createTextNode(text)
  
  // 3 텍스트 노드를 $li 요소 노드의 자식 노드로 추가
  $li.appendChild(textNode)
  
  // 4 $li요소 노드를 DocumentFragment 노드의 마지막 자식 노드로 추가
   $fragment.appendChild($li)

 })
  //5 DocumentFragment 노드를 #fruits 요소 노드의 마지막 자식 노드로 추가
  $fruits.appendChild($fragment)
(생략)

[그림 39-12]

39.6.6 노드 이동

DOM에 이미 존재하는 노드를 appendChild 또는 insertBefore 메서드를 사용하여 DOM에 다시 추가하면 현재 위치에서 노드를 제거하고 새로운 위치에 노드를 추가하므로 노드가 이동한다.

39.6.7 노드 복사

Node.prototype.clondNode([deep: true | false]) 메서드는 노드의 사본을 생성하여 반환한다. 얀튼 복사로 생성된 요소 노드는 자손 노드를 복하자이 않으므로 텍스트 노드도 없다.

39.6.7 노드 교체

Node.prototype.replaceChild(newChild, oldChild) 메서드는 자신을 호출한 노드의 자식 노드를 다른 노드로 교체한다

39.6.7 노드 삭제

Node.prototype.removeChild(newChild, oldChild)메서드는 child 매개변수에 인수로 전달한 노드를 DOM에 삭제한다.

39.7 Attribute

39.7.3 HTML attribute vs DOM property

element 노드 객체에는 HTML attribute에 대응하는 프로퍼티가 존재한다. 이 DOM 프로퍼티들은 HTML attribute 값을 초기값으로 갖고 있다.

HTML attribute는 다음과 같이 DOM에서 중복 관리되고 있는 것처럼 보인다.

element 노드의 attribute property에서 관리하는 attribute 노드
html attriute에 대응하는 element node의 property

HTML attribute의 역할은 HTML 요소의 초기 상태를 지정하는 것이다. 즉, HTML attribute 값은 HTML element의 초기 상태를 의미하며 이는 변하지 않는다.

첫 렌더링 이후 사용자가 input element에 무언가를 입력하기 시작하면 달라진다.

element node는 사용자가 입력 필드에 입력한 값을 state로 가지고 있다. HTML attriute로 지정한 초기 상태 "ilgwon"도 관리해야하는데, 웹페이지를 처음 표시하거나 새로고침할 경우 필요하기 때문이다.

즉 element node는 2개의 상태, 즉 초기 상태와 최신 상태를 관리해야 한다. element node의 초기 상태는 attribute node가 관리하고 최신 상태는 DOM property가 관리한다.

39.7.4 data attribute와 dataset property

data attribute와 dataset property를 사용하면 HTML element에 정의한 사용자 정의 attribute와 js간에 데이터를 교환할 수 있다.

data attribute는 data-user-id, data-role과 같이 data-접두사 다음에 임의의 이름을 붙인다.

data attribute값은 HTML.dataset property로 취득 가능하다.

39.8 Style

39.8.1 인라인 스타일 조작

HTMLElement.property.style property는 setter, getter 모두 존재하는 접근자 property로 element node의 inline style을 취득하거나 추가, 변경한다.

[예제 39-24]

const $style = document.querySelector('div')

console.log($div.style) //CSSStyleDeclaration { 0: "color", ...}

$div.style.color = 'blue'

$div.style.width = '100px'
$div.style.height = '100px'
$div.style.backgroundColor = 'yellow'

39.8.2 클래스 조작

[예제 39-25]

const $box = document.querySelector('.box')
console.log($box.className)

$box.className = $box.className.replace('red' , 'blue')

[예제 39-26]

Element.prototype.classList property는 class attribute 정보를 담은 DOMTokenList 객체를 반환한다.

const $box = document.querySelector('.box')
console.log($box.classList)
// DOMTokenList(2) [length: 2, value: "box blue", 0: "box", 1: "blue"]

$box.classList.replace('red' , 'blue')

DOMTokenList 객체는 class attribute 정보를 나타내는 collection 객체로 유사 배열 객체이면서 이터러블이다.

add(...className)
replace(...clasName)
item(index)
contains(className)
replace(oldClassName, newClassName)
toggle(className[, force])
- class attribute에 인수로 전달한 문자열과 일치하는 클래스가 존재하면 제거, 존재하지 않으면 추가
- 두 번째 인수로 boolean 값으로 평가되는 조건식 전달 가능. true이면 class attribute에 강제로 첫 번째 인수로 전달받은 문자열을 추가하고 false면 강제로 제거.

[Group Study, 모던 자바스크립트 Deep Dive] - 37 Map

Daniel(빡일) — Tue, 31 Jan 2023 22:39:31 +0900

Group study background

나만 그런건지는 모르겠지만, 실무를 하다보면 잊어버리는 개념들이 있다.

가끔 FE 뉴비인분들에게 질문을 받는데, 아리송 할때만큼 쪽팔릴때가 없었다.

정보 전달용이 아닌 개인 스터디 레코딩용 포스트입니다.

37.2 Map

Map 객체는키와 값의 쌍으로 이루어진 컬렉션이다. 객체와 유사하지만 다음과 같은 차이가 있다.

구분	객체	Map 객체
키로 사용할 수 있는 값	문자열 또는 심벌 값	객체를 포함한 모든 값
이터러블	X	O
요소 개수 확인	Object.keys(obj).length	map.size

37.2.1 Map 객체 생성

Map 생성자 함수는 이터러블을 인수로 전달받아 Map 객체를 생성한다. 이때 인수로 전달되는 이터럽ㄹ은 키와 값의 쌍으로 이루어진 요소로 구성되어야 한다.

[예제 37-01]

const map = new Map(['k1', 'v1'], ['k2', 'v2'])

const ma2 = new Map(['k1', 'v1'], ['k1', 'v1']) // Map(1) {"k1" => "v1"}

37.2.2 요소 개수 확인

[예제 37-02]

const map = new Map(['k1', 'v1'], ['k2', 'v2'])

map.size

37.2.3 요소 추가

[예제 37-02]

const map = new Map()

const daniel = {name: 'daniel'}

//chaining도 가능, 중복 추가 불가
map
.set('k1', 'v1')
.set('k2', 'v2')

// 키로 저장도 가능
.set(daniel, 'developer')

37.2.4 요소 취득

[예제 37-03]

const map = new Map([["k1", "v1"]])
map.get("k1")

37.2.6 요소 삭제

[예제 37-04]

const map = new Map([["k1", "v1"]])

map.has("k1")

37.2.6 요소 삭제

[예제 37-05]

const map = new Map([["k1", "v1"]])
map.delete("k1")

// 없는 키이므로 무시
map.delete("k2")

37.2.7 요소 일괄 삭제

[예제 37-06]

const map = new Map([["k1", "v1"]])
map.clear()

[Group Study, 모던 자바스크립트 Deep Dive] - 37 Set

Daniel(빡일) — Tue, 31 Jan 2023 21:56:12 +0900

Group study background

나만 그런건지는 모르겠지만, 실무를 하다보면 잊어버리는 개념들이 있다.

가끔 FE 뉴비인분들에게 질문을 받는데, 아리송 할때만큼 쪽팔릴때가 없었다.

정보 전달용이 아닌 개인 스터디 레코딩용 포스트입니다.

37.1 Set

Set은 수학적 집합을 구현하기 위한 자료구조로 중복되지 않는 유일한 값들의 집합이다. 따라서 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있다.

Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다.

구분	배열	Set
동일한 값을 중복하여 포함 가능	O	X
요소 순서에 의미가 있음	O	X
인덱스로 요소에 접근 가능	O	X

37.1.1 Set 객체 생성

Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다. 당연한 말이지만, 이터러블의 중복된 값은 Set 객체에 저장되지 않는다.

[예제 37-01]

const set1 = new Set([1,2,3,3]) // Set(3) {1,2,3}

const set2 = new Set('hello') // set(4) {"h", "e", "l", "o"}

// 배열의 중복 요소 제거
const uniq = array => array.filter((v, i, self) => self.indexOf(v) === i)

// Set을 사용한 배열의 중복 요소 제거
const uniq = array => [...new Set(array)]

37.1.2 요소 개수 확인

[예제 37-02]

const {size} = new Set([1,2,3,3])

const set = new Set([1,2,3,3])

console.log(set.size) //3

37.1.3 요소 추가

[예제 37-03]

const set = new Set()
set.add(1)
set.add(2).add(3)
// 모든 값 저장 가능
set.add(NaN).add(null).add(true).add('a').add({}).add([]).add(() => {})

37.1.4 요소 존재 여부 확인

[예제 37-04]

const set = new Set([1,2,3])

console.log(set.has(2))
console.log(set.has(4))

37.1.5 요소 삭제

[예제 37-05]

const set = new Set([1,2,3])

set.delete(2)

// 에러 없이 무시
set.delete(4)

37.1.6 요소 일괄 삭제(비우기)

[예제 37-06]

const set = new Set([1,2,3])
set.clear()

37.1.7 요소 순회

Set 객체의 요소를 순회하려면 Set.prototype.forEach 메서드를 사용한다.

인수

현재 순회 중인 요소 값
현재 순회중인 요소 값
현재 순회 중인 Set 객체 자체

[예제 37-07]

const set = new Set([1,2,3])

ser.forEach((v, v2, set) => console.log(v,v2,set));

/*
1 1 Set(3) {1,2,3}
2 2 Set(3) {1,2,3}
3 3 Set(3) {1,2,3}
*/

Set 또한 이터러블이므로 for ... of 문으로 순회 가능하다.
Set 또한 이터러블이므로 디스트럭처링 할당의 대상이 될 수 있다.

37.1.8 집합 연산

[예제 37-08] 교집합

Set.prototype.intersection = function(set) {
 return new Set([...this].filter(v => set.has(v)));
}

const setA = new Set([1,2,3,4,])
const setB = new Set([2,4,])

setA.intersection(setA.intersection(setB))

[예제 37-09] 합집합

Set.prototype.union = function(set) {
 return new Set([...this], ...set);
}

const setA = new Set([1,2,3,4])
const setB = new Set([2,4])

console.log(setA.union(setB))

[예제 37-10] 차집합

Set.prototype.difference = function (set) {
 return new Set([...this].filter(v => !set.has(v)))
}

const setA = new Set([1,2,3,4])
const setB =  new Set([2,4])

console.log(setA.difference(setB))

[예제 37-11] 상위 집합 & 부분집합

Set.prototype.isSuperset = function (subset) {
 for (const value of subset) {
  if (!this.has(value)) return false
 }
 
 return true
}

const setA = new Set([1,2,3,4])
const setB = new Set([2,4])

console.log(setA.isSuperSet(setB))

[Group Study, 모던 자바스크립트 Deep Dive] - 36 디스트럭처링 할당

Daniel(빡일) — Tue, 17 Jan 2023 19:07:06 +0900

Group study background

나만 그런건지는 모르겠지만, 실무를 하다보면 잊어버리는 개념들이 있다.

가끔 FE 뉴비인분들에게 질문을 받는데, 아리송 할때만큼 쪽팔릴때가 없었다.

정보 전달용이 아닌 개인 스터디 레코딩용 포스트입니다.

36.0 디스트럭처링 할당(destructuring assignment)

디스트럭처링 할당(destructuriing assignment-구조 분해 할당은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열과 같은 이터러블 또는 객체 리터럴에 필요한 값만 추출하여 변수에 할당할 때 유용하다.

36.1 배열 디스트럭처링 할당

ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법이다.

ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당한다. 배열 디스트럭처링 할당의 대상은 이터러블이어야 하고, 할당 기준은 배열의 인덱스다.

[예제 36-01]

//ES5

var arr = [1, 2, 3]

var one = arr[0]
var two = arr[1]
var three = arr[2]




//ES6

const [one, two, three] = arr

// 기본값
const [a, b, c = 3] = [1, 2]
console.log(a,b,c) //1 2 3

// 기본값보다 할당된 값이 우선
const [e, f=10, g=3] = [1, 2]
consoel.log(e,f,g) // 1,2,3

36.2 객체 디스트럭처링 할당

ES5에서 객체의 각 프로퍼티를 객체로부터 디스트럭처링하여 변수에 할당하기 위해서는 프로퍼티 키를 사용해야 한다.

[예제 36-02]

//ES5
var user = { firstName: 'ilgwon', lastName: 'Park' }

var firstName = user.firstName
var lastName = user.lastName


//ES6
const {lastName, firstName } = user

// 프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어진다.
// 프로퍼티 키가 lastName인 프로퍼티 값을 ln에 할당,
// 프로퍼티 키가 firstName인 프로퍼티 값을 fn에 할당.
const {lastName: ln, firstName: fn} = user
consle.log(ln, fn)

// 기본값 설정
const { firstName = 'ilgwon', lastName } = {lastName: 'Park'}

const { firstName: fn = 'ilgwon', lastName: ln} =  {lastName: 'Park'}
console.log(fn, ln)

객체 디스트럭처링 할당은 객체에서 프로퍼티 키로 필요한 프로퍼티 값만 추출하여 변수에 할당하고 싶을 때 유용하다.

[예제 36-03]

const str = 'Hello'

const {length} = str
console.log(length) //5


const todo = { id: 1, content: 'HTML', completed: true ,} 
const { id } = todo



function printTodo({ content, completed }) {
 console.log(`할일 ${content}은 ${complted ? '완료' : '비완료'} 상태입니다.`)
}

printTodo({id: 1, content: 'HTML', complted: true})



// 배열의 요소각 객체인 경우 배열 디스트럭처링 할당과 객체 디스트럭처링 할당 혼용 가능

const todos = [
 { id: 1, content: 'HTML', completed: true },
 { id: 2, content: 'CSS', completed: false },
 { id: 3, content: 'JS', completed: false },
]

const[, {id}] = todos


//중첩 객체인 경우

const user = {
 name: 'ilgwon',
 address: {
  zipCode: '12345',
  city: 'Seoul',
 },
}

const { address: { city } } = user
console.log(city)


//Rest
const {x, ...rest} = {x:1, y:2, z:3}
console.log(x, rest) // 1 {y:2, z:3}

ㅇ