TIL

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 - 20220807

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

TIL - 20220806

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

TIL - 20220805

오늘은 모던 JavaScript 튜토리얼에서 프라미스에 대해 공부했다. 작성한 질문은 다음과 같다. 프라미스란 실행자와 소비자 사이를 연결하는 특별한 자바스크립트 객체이다. 프라미스는 시간의 경과를 신경 쓰지 않으며 실행자가 끝날 때, 소비자가 그 결과를 사용할 수 있도록 도와준다. 실행자란 new Promise에 전달되는 함수이며 new Promise가 만들어질 때, 자동으로 실행된다. 실행자의 인수 resolve, reject는 자바스크립트에서 제공하는 콜백 함수이다. resolve와 reject를 작성하지 않고 실행자만 작성해도 되지만 실행자에서 결과를 시간 소요 상관없이 상황에 따라 인수로 콜백 중 하나를 반드시 호출해야 한다. resolve(value): 일이 문제없이 끝난 경우, 그 결과를 나..

TIL - 20220804

오늘은 모던 JavaScript 튜토리얼에서 콜백에 대해 공부했다. 작성한 질문은 다음과 같다. 콜백 기반 비동기 프로그래밍이란 무언가를 비동기적으로 처리해야 하는 함수가 함수 내 동작이 모두 처리된 후에 실행되어야 하는 함수일 경우 콜백을 인수로 반드시 제공해야 하는 프로그래밍이다. 스크립트가 여러 개 있는 경우 순차적으로 불러오려면 콜백 함수 안에 콜백 함수를 또 한 번 호출하면 된다. 중첩 콜백을 만들면, 바깥쪽 콜백 함수가 완료된 후 안쪽 콜백 함수가 실행되기 때문이다. 오류 우선 콜백은 다음 관례를 따른다. callback의 첫 번째 인수는 에러를 위해 남겨둔다. 에러가 발생하면 해당 인수를 이용해 callback(err)이 호출된다. 두 번째 인수(필요한 경우 추가 가능)는 에러가 발생하지 않..

TIL - 20220803

오늘은 모던 JavaScript 튜토리얼에서 커스텀 에러와 에러 확장에 대해 공부했다. 작성한 질문은 다음과 같다. throw 인수엔 제약이 없기 때문에 커스텀 에러 클래스는 반드시 Error를 상속받지 않아도 된다. 하지만, Error를 상속받아 커스텀 에러 클래스를 만들게 되면 obj instanceof Error를 이용하여 에러가 어떤 에러에 해당하는지 구분 지을 수 있게 된다.