모던 Javascript 튜토리얼 - 파트1

11.1 콜백

알아둘만한 지식

let script = document.createElement('script') script.onload = ()=> callback() script의 onload 속성은 --> 스크립트 로딩이 끝난 후 속성에 할당한 함수를 실행하게 한다!

에러 처리 패턴: '오류 우선 콜백' (error-first-callback) - callback의 첫번째 인수를 에러를 위해 남겨두고, 두번째 인수는 에러가 발생하지 않았을 때를 위해 남겨둔다. ex) loadScript('test.js', function(error, script){     if(error) ...     else .... }) script.onload = ()=> callback(null, script) script.onerror = ()=> callback(new Error(..))

 

11.2 프라미스

- 프라미스의 구성   - executor(실행자, 실행함수): Promise 에 전달되는 함수, 결과를 최종적으로 만들어냄(이행할지, 거부할지 등)   - executor의 인수인 resolv, reject: 자바스크립트에서 자체 제공하는 콜백   - 거부하는 경우, Error 객체를 reject 인수로 사용하는 것을 추천한다!   - new Promise 객체는 state, result 프로퍼티를 갖는다.     - state: pending | fulfilled | rejected     - result: undefined | resolve 의 인수 or reject의 인수     - 해당 속성은 .then, .catch, .finally 메서드를 이용해 접근 가능하다. - then   - 첫번째 인자: 프라미스가 이행됐을 때 실행되는 함수   - 두번째 인자: 프라미스가 거부됐을 때 실행되는 함수 - catch: 에러만 다루는 메서드이며, .then(null, ()=>{ ... }) 과 동일하게 동작한다!!

 

11.3 프라미스 체이닝

프라미스 체이닝은 result가 .then 핸들러의 체인(사슬)을 통해 전달된다!

프라미스 체이닝이 가능한 이유는 promise.then을 호출하면 프라미스가 반환되기 때문입니다. 반환된 프라미스엔 당연히 .then을 호출할 수 있습니다.

 

11.4 프라미스와 에러 핸들링

- 프라미스가 거부되면 -> 가장 가까운 rejection 핸들러로 넘어간다. - 프라미스 실행자(executor)와 핸들러 코드 주위에는 '보이지 않는(암시적) try...catch'가 있다.   - 실행자: 프라미스에 전달되는 함수(resolve, reject) / 핸들러: .catch(), .finally() 등 - 프라미스에서 1) 예외 발생, 2) throw 로 에러를 던짐, 3) reject 시키면 가장 가까운 catch 가 실행된다! - 다시 던지기도 가능하다!   - 예를 들어, syntax error 만 에러 처리를 하고, 나머지 에러를 또 다시 throw 한다면, 그 다음 정상코드는 작동하지 않고, 다음 catch가 발동한다. - 처리되지 못한 거부   - catch 를 추가하지 않는 등 에러가 처리되지 못한 경우?   - 스크립트가 죽는다!   - 브라우저 환경에서는 이런 에러를 unhandledrejection 이벤트로 잡을 수 있다!

 

11.5 프라미스 API

Promise 클래스의 5가지 정적 메서드 1) Promise.all([promises]): 모든 프라미스 이행 후 -> 하나라도 실패하면 거부, 성공하면 result 배열을 return     단, 하나가 실패해도 호출은 계속 일어난다. 프라미스에는 '취소'의 개념이 없음. (AbortController는 취소가 가능하다고함) 2) Promise.allSettled([promises]): 최신문법, 성공, 실패한 것 모두 반환, status, value 의 객체로 반환. 3) Promise.race: 가장 빨리 나온 결과가 return 4) Promise.resolve/reject

 

11.7 마이크로태스크 큐

- ECMA 에서는 비동기작업을 처리하기 위해, 'PromiseJobs'라는 <내부 큐>를 활용한다. 이를 '마이크로태스크 큐'라고 부른다.   - 마이크로태스크 큐는 먼저 들어온 작업을 먼저 실행합니다(FIFO, first-in-first-out).   - 실행할 것이 아무것도 남아있지 않을 때만 마이크로태스크 큐에 있는 작업이 실행되기 시작합니다. - 처리되지못한 거부 <unhandledrejection> 이벤트 -> .catch를 추가하는걸 잊은 경우, 엔진은 마이크로태스크 큐가 빈 이후에 un... 이벤트를 트리거한다.

 

11.8 async와 await

- async를 붙인 함수는 항상 프라미스를 반환한다!   - 프라미스가 아닌 값을 반환하더라도, 이행상태의 프라미스로 값을 감싸 반환한다!!   - async function f(){} --> f().then(alert)