전체 글

TIL - 20220813

오늘은 모던 JavaScript 튜토리얼에서 async 이터레이터와 제너레이터에 대해 공부했다. 작성한 질문은 다음과 같다. 비동기 이터레이터를 사용하면 비동기적으로 들어오는 데이터를 필요에 따라 처리할 수 있어서 네트워크를 통해 데이터가 여러 번에 걸쳐 들어오는 상황을 처리할 수 있게 된다. 더욱이 비동기 이터레이터에 비동기 제너레이터를 더하면 데이터를 편하게 처리할 수 있게 되는 것이다. 이터러블 객체를 비동기적으로 만들려면 다음과 같은 작업을 거치면 된다. Symbol.iterator 대신 Symbol.asyncIterator를 사용해야 한다. next()는 프라미스를 반환해야 한다. 비동기 어터러블 객체를 대상으로 하는 반복문 작업은 for await (let item of iterable) 반복..

TIL - 20220812

오늘은 모던 JavaScript 튜토리얼에서 제너레이터에 대해 공부했다. 작성한 질문은 다음과 같다. 일반 함수는 하나(혹은 0개)의 값을 반환하지만 제너레이터를 사용하면 여러 개의 값을 반환할 수 있다. 제너레이터를 만들려면 function에 *을 붙여서 만들 수 있다. 앞서 말한 차이점도 있지만, 가장 큰 차이점은 제너레이터 함수를 호출하면 코드가 실행되는 것이 아닌 재너레이터 객체가 반환된다. next()는 제너레이터에서 주로 사용하는 메서드이다. next()를 호출하면 가장 가까운 yield문을 만날 때까지 실행이 지속되며 yield문을 만나면 실행을 멈추고 산출하고자 하는 value가 바깥 코드에 반환된다. next()는 항상 두 프로퍼티를 가진 객체를 반환한다. 두 프로퍼티는 다음과 같다. v..

TIL - 20220811

오늘은 모던 JavaScript 튜토리얼에서 async와 await에 대해 공부했다. 작성한 질문은 다음과 같다. async는 function 앞에 붙여줌으로써 사용할 수 있고, async를 사용하면 다음과 같은 변화가 일어난다. 함수가 promise를 반환할 수 있게 된다. await를 사용할 수 있게 된다. await는 오직 async 함수 안에서만 작동하며 자바스크립트에서 await를 만나면 프라미스가 끝날 때까지 기다린다. 결과는 프라미스가 끝나게 된 이후에 변하게 되는 것이다.

TIL - 20220810

오늘은 모던 JavaScript 튜토리얼에서 마이크로태스크에 대해 공부했다. 작성한 질문은 다음과 같다. 마이크로태스크 큐란 비동기 작업 처리를 관리하기 위해 ECMA에서 PromiseJobs라는 내부 큐를 명시하고 V8 엔진에서 이를 마이크로태스크 큐라고 부른다. 마이크로태스크 큐는 어떤 프라미스가 준비됐을 때, 이 프라미스의 .then/catch/finally 핸들러가 큐에 들어간다. 이때, 핸들러는 실행되지 않고, 스크립트 실행이 끝나고 나서야 큐에 저장된 핸들러가 실행된다. '처리되지 못한 거부'는 마이크로태스크 큐 끝에 프라미스가 처리되지 못할 때 발생한다.

TIL - 20220809

오늘은 모던 JavaScript 튜토리얼에서 프라미스화에 대해 공부했다. 작성한 질문은 다음과 같다. 프라미스화란 콜백을 받는 함수를 프라미스를 반환하는 함수로 변경하는 것이다. 예를 들어, 경로를 인자로 받아 script를 호출해주는 콜백 함수가 있다고 가정해보자. function loadScript(src, callback) { let script = document.createElement('script'); script.src = src; script.onload = () => callback(null, script); script.onerror = () => callback(new Error(`${src}를 불러오는 도중에 에러가 발생했습니다!`); document.head.append(scri..

TIL - 20220808

오늘은 모던 JavaScript 튜토리얼에서 프라미스 API에 대해 공부했다. 작성한 질문은 다음과 같다. Promise.all이란 프라미스 여러 개를 동시에 요청하고 요청에 대한 응답이 모든 프라미스로부터 올 때까지 기다리는 Promise 클래스의 정적 메서드이다. Promise.all은 요소 전체가 프라미스인 배열(정확힌 이터러블 객체)로 받아 새로운 프라미스를 반환한다. 배열 안 프라미스가 모두 처리되면 새로운 프라미스를 반환하면서 배열 안 프라미스의 결괏값을 담은 배열이 새로운 프라미스의 결괏값이 된다. 만약, 프라미스 여러 개 중 하나라도 거절된다면 전체가 거절된다. Promise.allSettled란 모든 프라미스가 처리될 때까지 대기하며 프라미스 하나가 거절되더라도 다른 프라미스 요청에 대한..

TIL - 20220807

오늘은 모던 JavaScript 튜토리얼에서 프라미스와 에러 핸들링에 대해 공부했다. 작성한 질문은 다음과 같다. 프라미스 실행자와 핸들러 안에는 보이지 않는(암시적) try...catch가 존재한다. 예외가 발생하면 프라미스 안에 있는 암시적 try...catch에서 예외를 잡고 이를 reject처럼 다룬다. 프라미스에서 에러를 다시 던지는 방법은 간단하다. .catch를 통해 잡은 에러가 내가 다룰 수 있는 에러 거나 예상외의 에러가 아니라면 그 에러를 다시 던지면 된다. 그 다음 .catch문을 하나 더 만들어서 다시 던진 에러에 대한 코드를 작성하면 된다. 프라미스에서 에러를 처리하지 않으면 절대 안 된다. 프라미스에서 에러가 발생하면 상태는 거부가 되고 실행 흐름은 가장 가까이 위치한 rejec..

TIL - 20220806

오늘은 모던 JavaScript 튜토리얼에서 프라미스 체이닝에 대해 공부했다. 작성한 질문은 다음과 같다. 프라미스 체이닝은 순차적으로 처리해야 하는 비동기 작업이 여러 개 있을 때 사용하면 좋다. 프라미스 체이닝이 가능한 이유는 결국 new Promise도 프라미스를 반환하고, promise.then 또한 프라미스를 반환하기 때문이다. 프론트엔드에서 네트워크 요청 시 주로 사용하는 fetch 메서드는 url에 네트워크 요청을 보내 프라미스를 반환한다.