FE 영화 리뷰 - 비동기 퀴즈 해설지 만들기 | 2024.03.26. #46
Replies: 19 comments
-
라이언, 올리1번
2번for (var i = 0; i < 10; i++) {
setTimeout(() => console.log(i)); // 10이 10번 출력
}
for (var i = 0; i < 10; i++) {
(function (i) {
setTimeout(() => console.log(i)); // 0 1 2 3 4 5 6 7 8 9
})(i);
}
3번function foo() {
getPopularMovies().then((movies) => {
console.log(movies);
});
}
foo();
4번const getPopularMovies = new Promise((resolve, reject) =>
{ setTimeout(resolve, Math.random() * 4000 + 1000, "외부 API 접근한 결괏값"); });
const timeoutPromise = new Promise((resolve, reject) =>
{ setTimeout(reject, 3000, "대기 시간이 오래 걸립니다"); });
Promise.race([getPopularMovies, timeoutPromise])
.then(result => { console.log(result); })
.catch(error => { console.log(error); });
|
Beta Was this translation helpful? Give feedback.
-
치코, 러기Q1. 왜 1->3->2->4 순으로 출력되는지 설명하시오.console.log("1");
setTimeout(() => console.log("2"));
new Promise((resolve) => resolve()).then(() => {
console.log("3");
});
setTimeout(() => console.log("4"));
결과적으로, 출력 순서는 다음과 같습니다:
최종 출력 순서는 "1", "3", "2", "4". Q2. 왜 두 개의 for문의 결과가 다른지 설명하시오.for (var i = 0; i < 10; i++) {
setTimeout(() => console.log(i));// 10이 10번 출력
}for (var i = 0; i < 10; i++) {
(function (i) {
setTimeout(() => console.log(i));// 0 1 2 3 4 5 6 7 8 9
})(i);
}첫 번째 경우, 모든 setTimeout 콜백은 반복문 실행 후 var로 선언된 i 값을 참조한다.(10이 됨). 이때 var 키워드 특성상 가장 가까운 함수 혹은 전역 스코프에 등록된다. 두 번째 경우, 각 setTimeout 콜백은 각자의 IIFE(즉시 실행 함수)로 인해 캡처된, 그 순간의 i 값을 참조한다. (0부터 9까지). 왜냐하면 즉시 실행 함수로 인해 함수 각각의 클로저가 형성되기 때문이다. Q3. foo 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.왜 이렇게 짜서 왜 이렇게 작동하는지 설명도 덧붙여야 합니다. 단, foo 함수는 async 키워드를 붙일 수 없다. async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return ["쿵푸팬더4", "댐즐", "스리 아시", "돼지와 뱀과 비둘기", "듄: 파트 2", "가여운 것들"];
}
function foo() {
getPopularMovies().then(movies => {
console.log(movies);
});
}
foo();
Q4. getPopularMovies 함수가 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔로 출력하시오.왜 이렇게 짜서 왜 이렇게 작동하는지 설명도 덧붙여야 합니다. (단, 3초 이상 지연 시 getPopularMovies는 작업이 중단되거나 결괏값은 무시된다.) console.error("대기 시간이 오래 걸립니다");아래의 영역에 코드를 채워 넣고 왜 해당 코드를 넣으면 해결되는지 설명하시오. const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 1000 + 1000, "외부 API 접근한 결괏값");
});
function foo() {
Promise.race([
getPopularMovies,
new Promise((_, reject) => setTimeout(() => reject("대기 시간이 오래 걸립니다"), 3000))
]).then(movies => {
console.log(movies);
}).catch(error => {
console.error(error);
});
}
foo();Promise.race는 여러 프로미스 중에서 가장 먼저 완료되는 프로미스의 결과나 오류로 해결한다. 위의 코드 같은 경우, getPopularMovies 함수의 프로미스와 3초 후에 거부(reject)되는 프로미스를 Promise.race로 경쟁시켜, getPopularMovies의 작업이 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔에 출력할 수 있다. |
Beta Was this translation helpful? Give feedback.
-
🎯 쿠키, 파슬리의 비동기 문제 해설Q1. 왜 1->3->2->4 순으로 출력되는지 설명하시오.위에서부터 순서대로 코드가 실행됩니다.
이때, 마이크로 테스크 큐의 우선순위가 테스크 큐보다 높으므로 제일 먼저 3이 출력됩니다. 그리고 테스크 큐의 함수들이 실행되는데 먼저 들어간 2가 출력되고 다음으로 4가 출력 되어서 Q2. 왜 두 개의 for문의 결과가 다른지 설명하시오.1번 for문은 반복문을 돌면서 setTimeout 함수가 10번 타이머를 설정하고 안에 있는 함수를 테스크 큐에 넣습니다. 그러나 실행 시점에는 반복문이 종료되어 Q3. foo 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return ["쿵푸팬더4", "댐즐", "스리 아시", "돼지와 뱀과 비둘기", "듄: 파트 2", "가여운 것들"];
}
function foo() {
getPopularMovies().then(console.log);
}
foo();
Q4. getPopularMovies 함수가 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔로 출력하시오.const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, '외부 API 접근한 결괏값');
});
const timeoutPromise = new Promise((resolve, reject) => {
setTimeout(reject, 3000, '대기 시간이 오래 걸립니다');
});
Promise.race([getPopularMovies, timeoutPromise]).then(console.log).catch(console.error);
주어진 코드는 따라서 |
Beta Was this translation helpful? Give feedback.
-
🎯 프룬, 수야의 비동기 문제 해설Q1. 왜 1->3->2->4 순으로 출력되는지 설명하시오.console.log("1");
setTimeout(() => console.log("2"));
new Promise((resolve) => resolve()).then(() => {
console.log("3");
});
setTimeout(() => console.log("4"));
Q2. 왜 두 개의 for문의 결과가 다른지 설명하시오.for (var i = 0; i < 10; i++) {
setTimeout(() => console.log(i)); // 10이 10번 출력
}for (var i = 0; i < 10; i++) {
(function (i) {
setTimeout(() => console.log(i)); // 0 1 2 3 4 5 6 7 8 9
})(i);
}
Q3. foo 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.왜 이렇게 짜서 왜 이렇게 작동하는지 설명도 덧붙여야 합니다. 단, foo 함수는 async 키워드를 붙일 수 없다. async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return ["쿵푸팬더4", "댐즐", "스리 아시", "돼지와 뱀과 비둘기", "듄: 파트 2", "가여운 것들"];
}
function foo() {
//✨✨✨✨✨✨✨✨✨✨✨✨✨✨ 수정 가능 영역//✨✨✨✨✨✨✨✨✨✨✨✨✨✨
getPopularMovies().then((a) => console.log(a)) // 정답! ["쿵푸팬더4", "댐즐", "스리 아시", "돼지와 뱀과 비둘기", "듄: 파트 2", "가여운 것들"]
}
foo();
Q4. getPopularMovies 함수가 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔로 출력하시오.왜 이렇게 짜서 왜 이렇게 작동하는지 설명도 덧붙여야 합니다. 아래의 영역에 코드를 채워 넣고 왜 해당 코드를 넣으면 해결되는지 설명하시오. const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, "외부 API 접근한 결괏값");
});
// 아래에 답안을 작성하세요
const timeoutPromise = new Promise((resolve, reject) => {
setTimeout(reject, 3000, "대기 시간이 오래 걸립니다");
}); // 3초 뒤 reject하는 Promise를 반환
Promise.race([getPopularMovies, timeoutPromise]) // [resolve, reject]
.then(result => console.log(result))
.catch(error => console.log(error));
|
Beta Was this translation helpful? Give feedback.
-
🎯 썬데이, 소파의 비동기 문제 해설1번 문제// a
console.log("1");
// b
setTimeout(() => console.log("2"));
// c
new Promise((resolve) => resolve()).then(() => {
console.log("3");
});
// d
setTimeout(() => console.log("4"));a. 바로실행 마이크로 태스크 큐: console.log('3') 마이크로 태스크 큐: 이벤트 루프가 작동 마이크로 태스크 큐: 이벤트 루프가 작동 2번 문제setTimeOut 내부의 함수가 실행되는 시점은 for문이 돌아가고 나서 호출 스택이 빌 때 실행이 된다. 항상 for 문이 끝나고 차례대로 실행되는 것이다. 3번 문제async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return ["쿵푸팬더4", "댐즐", "스리 아시", "돼지와 뱀과 비둘기", "듄: 파트 2", "가여운 것들"];
}
function foo() {
getPopularMovies().then(result=>console.log(result));
}
foo();async function은 새로운 promise 객체를 반환한다. 4번 문제const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, "외부 API 접근한 결괏값");
});
const getErrorPromiseAfterMs=(ms)=>new Promise((_,reject)=>{setTimeout(()=>reject('대기시간이 오래 걸립니다'),ms)})
Promise.race([getPopularMovies,getErrorPromiseAfterMs(3000)])
.then(result=>console.log(result))
.catch(error=>console.error(error));Promise.race()는 전달된 프로미스들 중 한 개가 이행 또는 거부 될 때까지 대기하다가 가장 먼저 상태가 변화하는 프로미스를 반환한다. |
Beta Was this translation helpful? Give feedback.
-
웨디, 토다리 비동기 퀴즈 해설Q1. 왜 1->3->2->4 순으로 출력되는지 설명하시오.
Q2. 왜 두 개의 for문의 결과가 다른지 설명하시오.
Q3. foo 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.왜 이렇게 짜서 왜 이렇게 작동하는지 설명도 덧붙여야 합니다. 단, foo 함수는 async 키워드를 붙일 수 없다. async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return ["쿵푸팬더4", "댐즐", "스리 아시", "돼지와 뱀과 비둘기", "듄: 파트 2", "가여운 것들"];
}
function foo() {
getPopularMovies().then((movies) => { console.log(movies); });
}
foo();비동기 처리인 Promise를 처리하기 위해서
Q4. getPopularMovies 함수가 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔로 출력하시오.왜 이렇게 짜서 왜 이렇게 작동하는지 설명도 덧붙여야 합니다. (단, 3초 이상 지연 시 getPopularMovies는 작업이 중단되거나 결괏값은 무시된다.) console.error("대기 시간이 오래 걸립니다");아래의 영역에 코드를 채워 넣고 왜 해당 코드를 넣으면 해결되는지 설명하시오. const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, '외부 API 접근한 결괏값');
});
const TIME_OUT = 'timeOut';
const timeoutAfterThreeSeconds = new Promise((resolve) => setTimeout(() => resolve(TIME_OUT), 3000));
const waitResponseOrTimeout = async () => {
const response = await Promise.race([getPopularMovies, timeoutAfterThreeSeconds]);
if (response === TIME_OUT) return console.error('대기 시간이 오래 걸립니다');
console.log(response);
};
// 비동기 결과 처리
waitResponseOrTimeout();
|
Beta Was this translation helpful? Give feedback.
-
🎯 소하, 텐텐의 비동기 문제 해설Q1. 왜 1->3->2->4 순으로 출력되는지 설명하시오.
Q2. 왜 두 개의 for문의 결과가 다른지 설명하시오.for (var i = 0; i < 10; i++) {
setTimeout(() => console.log(i)); // 10이 10번 출력
}
추가) var가 아니라 let이라면 0 1 2 3 4 5 6 7 8 9 로 출력된다.
for (var i = 0; i < 10; i++) {
(function (i) {
setTimeout(() => console.log(i)); // 0 1 2 3 4 5 6 7 8 9
})(i);
}
Q3. foo 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return ["쿵푸팬더4", "댐즐", "스리 아시", "돼지와 뱀과 비둘기", "듄: 파트 2", "가여운 것들"];
}
// 답안 코드
function foo() {
getPopularMovies().then((value) => {
console.log(value);
});
}
foo();
Q4. getPopularMovies 함수가 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔로 출력하시오.const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, "외부 API 접근한 결괏값");
});
// 답안 코드
const timeoutPromise = new Promise((resolve, reject) => {
setTimeout(reject, 3000);
});
Promise.race([getPopularMovies, timeoutPromise])
.then((result) => {
console.log(result);
})
.catch(() => {
console.error("대기 시간이 오래 걸립니다");
});
|
Beta Was this translation helpful? Give feedback.
-
🎯 바다, 헤인의 비동기 문제 해설Q1. 왜 1->3->2->4 순으로 출력되는지 설명하시오.이론console.log 는 동기이고, 다른 setTimeout과 Promise 는 비동기 입니다. 둘은 비동기이지만 들어가는 큐가 서로 다릅니다. setTimeout은 태스트 큐에 들어가고 Promise는 마이크로 태스크 큐에 들어 갑니다. 마이크로 태스크 큐는 실행에 있어서 태스크 큐보다 우선 순위를 가지게 됩니다. 이를 바탕으로 실행 순서를 설명하면 아래와 같습니다. 실행 순서
Q2. 왜 두 개의 for문의 결과가 다른지 설명하시오.이론위의 둘의 차이는 변수의 스코프입니다. 코드설명예시2의 setTimeout을 감싸고 있는 함수는 함수 내부에 선언된 함수로 선언 시 새로운 스코프가 생성되어 i의 스코프가 됩니다. 따라서 setTimeout 실행 시 이를 setTimeout의 콜백함수에 넣어주게 되어서 0,1,2,3,4,5,6,7,8,9가 출력됩니다. 예시1의 setTimeout은 비동기이고 i는 전역 스코프 입니다. 태스크 큐에 console.log가 쌓이게 되고 이게 콜 스택에서 실행 될 때 이미 i는 10이 되어서 10이 출력됩니다. Q3. foo 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.답안코드function foo(){
getPopuplarMovies()
.then(movies => console.log(movies))
.catch(error => console.error(error))
}이론Promise의 동작은 pending → fullfiled/ reject의 순으로 진행됩니다비동기 작업에는 then catch, 콜백함수와 async await가 있고 콜백함수의 경우 콜백 지옥의 문제가 있어서 사용하는 것을 지양 하는 것을 권고하고 있습니다. 코드 설명현재 Q4. getPopularMovies 함수가 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔로 출력하시오.답안 코드const fetchTimeout = (time) =>
new Promise((resolve, reject) => {
setTimeout(() => {
reject("대기 시간이 오래 걸립니다");
}, time);
});
const handleGetPopularMovies =()=> Promise.race([getPopularMovies, fetchTimeout(3000)]);
handleGetPopularMovies()
.then((resolve) => {
console.log(resolve);
})
.catch((reject) => {
console.error(reject);
});이론Promise.race를 사용하면 race의 parameter로 받은 비동기 함수들 중 먼저 fullfiled되는 비동기 함수의 결과값을 반환합니다. 코드 설명Promise.race를 사용해 3초 후에 “대기 시간이 오래 걸립니다” 를 실행하는 setTimeout 비동기 함수와 getPopularMovies 비동기의 실행 시간을 비교해 먼저 실행되는 결과값을 받을 수 있도록 해주었습니다, |
Beta Was this translation helpful? Give feedback.
-
🎯 리버, 아르의 비동기 문제 해설Q1. 왜 1->3->2->4 순으로 출력되는지 설명하시오.console.log("1");
setTimeout(() => console.log("2"));
new Promise((resolve) => resolve()).then(() => {
console.log("3");
});
setTimeout(() => console.log("4"));
여기서 이벤트 루프는 마이크로태스크 큐의 작업을 우선하여 콜 스택으로 옮기므로, Q2. 왜 두 개의 for문의 결과가 다른지 설명하시오.for (var i = 0; i < 10; i++) {
setTimeout(() => console.log(i)); // 10이 10번 출력
}
for (var i = 0; i < 10; i++) {
(function (i) {
setTimeout(() => console.log(i)); // 0 1 2 3 4 5 6 7 8 9
})(i);
}
Q3. foo 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return ["쿵푸팬더4", "댐즐", "스리 아시", "돼지와 뱀과 비둘기", "듄: 파트 2", "가여운 것들"];
}
function foo() {
getPopularMovies()
.then((movies) => {
console.log(movies);
})
.catch((error) => {
console.error(error);
});
}
foo();
Q4. getPopularMovies 함수가 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔로 출력하시오.let timerId;
const getPopularMovies = new Promise((resolve, reject) => {
timerId = setTimeout(resolve, Math.random() * 4000 + 1000, "외부 API 접근한 결괏값");
});
const timeout = new Promise((_, reject) => {
setTimeout(reject, 3000, "대기 시간이 오래 걸립니다");
});
Promise.race([getPopularMovies, timeout])
.then(result => {
console.log(result);
})
.catch(error => {
console.error(error);
clearTimeout(timerId);
});
|
Beta Was this translation helpful? Give feedback.
-
|
월하 리안 Q1. 왜 1->3->2->4 순으로 출력되는지 설명하시오.
Q2. 왜 두 개의 for문의 결과가 다른지 설명하시오.
Q3. foo 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.const myPromise = new Promise((resolve, reject) => {
// 비동기 작업 수행
const success = false; // 실패 상황으로 설정
if (success) {
resolve('작업이 성공했습니다.');
} else {
reject(new Error('작업이 실패했습니다.'));
}
});
myPromise
.then((result) => {
console.log('성공:', result);
})
.catch((error) => {
console.error('실패:', error);
});
4번 Promise.race([getPopularMovies, getTimer])
.then((result) => {
console.log(result);
})
.catch((error) => {
console.log(error);
})
.finally(() => {
process.exit();
});타이머와 getPopularMovies 중 가장 먼저 이행 또는 거부되는 프로미스를 반환하는 |
Beta Was this translation helpful? Give feedback.
-
🎯 버건디, 마스터위의 비동기 문제 해설Q1. 왜 1->3->2->4 순으로 출력되는지 설명하시오.console.log('1')은 콜스택으로 넘어간 다음 바로 실행, call stack이 비고 Microtask 큐가 비면, 이벤트 루프가 Macrotask 큐의 앞에 있는 console.log('2') 를 콜스택으로 넘겨서 실행한다. Q2. 왜 두 개의 for문의 결과가 다른지 설명하시오.setTimeout이 실행되면 콜백 함수가 Macrotask큐로 넘어간다. 이후에 for문이 다 실행된 후 i는 10이 된다. var로 선언한 i는 전역 스코프를 가진다. 동일한 setTimeout 함수이지만 외부에 즉시 실행 함수로 감싸져있기 때문에 실행할 때의 i 값을 보면, 해당 실행 컨텍스트에 따라 i값이 달라진다. for문의 하나의 반복마다 즉시실행함수가 실행되며 그때의 실행 컨텍스트는 그 당시의 i값을 갖는다 Q3. foo 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return ["쿵푸팬더4", "댐즐", "스리 아시", "돼지와 뱀과 비둘기", "듄: 파트 2", "가여운 것들"];
}
function foo() {
const data = getPopularMovies();
data.then((result) => console.log(result)).catch((err) => console.error(err));
}
foo();Promise 객체에서 resolve가 실행된다면, 이는 Promise 객체가 fulfilled된 상태이다. Q4-1. getPopularMovies 함수가 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔로 출력하시오.async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 5000));
return ['쿵푸팬더4', '댐즐', '스리 아시', '돼지와 뱀과 비둘기', '듄: 파트 2', '가여운 것들'];
}
const timeoutPromise = new Promise((resolve, reject) => {
setTimeout(reject, 3000, '대기 시간이 오래 걸립니다');
});
Promise.race([getPopularMovies, timeoutPromise])
.then((item) => console.log(item))
.catch((err) => console.error(err));Promise.race 같은 경우 인자로 Promise 객체들을 받아서 실행시킵니다. Q4-2. 또 다른 풀이let isPass = false;
const getPopularMoviess = async () => {
setTimeout(() => {
console.log('외부 API 접근한 결괏값');
isPass = true;
}, 3000);
setTimeout(() => {
if (!isPass) {
throw new Error('대기 시간이 오래 걸립니다');
}
}, 2000);
};
await getPopularMoviess();Promise의 race 메서드를 모르고, setTimeout 두개를 같이 써서 해결할 방법은 없을까 하다가 생각한 풀이(답만 맞게한 풀이) |
Beta Was this translation helpful? Give feedback.
-
🎯 포메, 렛서의 비동기 문제 해설Q1 왜 1->3->2->4 순으로 출력되는지 설명하시오.자바스크립트는 호출 스택(Call Stack)을 사용해 코드 실행을 관리한다. 한편 자바스크립트는 단일 스레드 언어이기 때문에 단일 호출 스택을 사용한다. 이는 한 번에 하나의 일만 수행할 수 있다는 것을 의미한다. 하지만 이러한 함수 호출이 호출 스택만을 사용해서 관리된다면 어떨까? setTimeout과 같이 반환되기까지 아주 오랜 시간이 걸리는 함수가 포함되어 있다면 다음 함수 실행에 지장을 줄 것이다. 이러한 문제를 해결하는 것이 비동기 콜백이다. 비동기 콜백은 즉시가 아닌, 특수한 시점에 실행되므로 다른 동기 함수와는 다르게 스택 안에 바로 push 될 필요가 없다. 동기 함수가 호출 스택을 통해 관리된다면, API 호출과 같이 비동기적으로 처리해야 하는 로직은 이벤트 루프를 사용해서 처리한다. 이벤트 루프는 Microtask queue, Macrotask queue 두 가지의 task queue를 사용해서 비동기 로직을 관리한다. 만약 call stack이 비면 이 task queue에서 테스트를 가져와 콜스택에 넣어준다. 이때 Microtask는 Macrotask 보다 처리 우선 순위가 높기 때문에 Microtask queue의 task가 모두 없어질때까지 Macrotask queue의 태스크는 콜스택으로 빠지지 않는다. 결과
Q2. 왜 두 개의 for문의 결과가 다른지 설명하시오.첫 번째는 for문이 10번이 콜스택을 통해 처리되는 동안 setTimeout이 macroTask에 누적된다. 콜스택이 모두 실행 된 후 macroTask가 실행될 시점에는 이미 i가 10인 상태이다. 그래서 모든 출력이 10이 된다. 두 번째는 setTimeout 함수를 즉시 실행 함수로 감싼 형태이다. for문이 10번 돌면서 i의 값을 증가 시키지만 즉시 실행 함수를 통해서 i의 값을 전달해주고 있기 때문에 즉시 실행 함수의 스코프에서 i는 0부터 9까지의 값으로 기억된다. 따라서 setTimeout이 macroTask에서 나와 처리될 시점에 i는 0부터 9가 되어 출력된다. Q3. foo 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return ["쿵푸팬더4", "댐즐", "스리 아시", "돼지와 뱀과 비둘기", "듄: 파트 2", "가여운 것들"];
}
function foo() {
getPopularMovies().then((data) => console.log(data));
}
foo();단순히 console.log(getPopularMovies())을 실행하면 Promise는 micro task queue에, 콜백 함수 안에서 실행되는 setTimeout은 macro task queue에 push된다. 그런데 micro task queue는 macro task queue보다 먼저 처리되므로 setTimeout이 반환되기 전에 처리되어 Pending 상태로 반환 된다. Q4. getPopularMovies 함수가 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔로 출력하시오.const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, "외부 API 접근한 결괏값");
});
const timeoutPromise = new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error("대기 시간이 오래 걸립니다"));
}, 3000);
});
Promise.race([getPopularMovies, timeoutPromise])
.then(result => {
console.log(result);
})
.catch(error => {
console.error(error.message);
});Promise.race 함수는 여러 개의 Promise를 받아 먼저 반환된 Promise의 결과를 실행하는 함수다. 3초 뒤에 reject를 반환하는 timeoutPromise와 1초 이상 4초 미만의 시간 뒤 resolve를 반환하는 getPopularMovies 프로미스를 race 시키면, 더 빨리 반환된 Promise의 결과가 실행되므로 getPopularMovies 프로미스가 3초 이상이 소요되면 에러 메세지를 출력할 수 있다. |
Beta Was this translation helpful? Give feedback.
-
✨ 헤일리 지니의 비동기 풀이Q1. 왜 1->3->2->4 순으로 출력 되는지 설명하시오.console.log("1");
setTimeout(() => console.log("2"));
new Promise((resolve) => resolve()).then(() => {
console.log("3");
});
setTimeout(() => console.log("4"));실행 순서는 다음과 같이 전개 됩니다.
따라서 최종 출력 순서는 "1", "3", "2", "4"가 된다. Q2. 왜 두 개의 for문의 결과가 다른지 설명하시오.for (var i = 0; i < 10; i++) {
setTimeout(() => console.log(i)); // 10이 10번 출력
}for (var i = 0; i < 10; i++) {
(function (i) {
setTimeout(() => console.log(i)); // 0 1 2 3 4 5 6 7 8 9
})(i);
}1번 case
2번 case
즉, 클로저를 통해 각 i 값의 스냅샷을 유지하는 것에 차이가 있다. Q3. foo 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.왜 이렇게 짜서 왜 이렇게 작동하는지 설명도 덧붙여야 합니다. 단, foo 함수는 async 키워드를 붙일 수 없다. 답 async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return ["쿵푸팬더4", "댐즐", "스리 아시", "돼지와 뱀과 비둘기", "듄: 파트 2", "가여운 것들"];
}
function foo() {
getPopularMovies().then(result => console.log(result))
}
foo();다음과 같이 getPopularMovies가 비동기 함수이기 때문에 반환하는 값은 Promise 타입이 된다. 그러므로 일반적인 함수 호출 방식으로 실행하면 Promise를 콘솔에 출력하게 된다. 즉, Promise를 반환하기 때문에 then 체이닝을 이용해서 resolve 된 데이터를 console에 출력하면 정상적인 데이터가 출력되게 된다 Q4. getPopularMovies 함수가 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔로 출력하시오.왜 이렇게 짜서 왜 이렇게 작동하는지 설명도 덧붙여야 합니다. (단, 3초 이상 지연 시 getPopularMovies는 작업이 중단되거나 결괏값은 무시된다.) console.error("대기 시간이 오래 걸립니다");아래의 영역에 코드를 채워 넣고 왜 해당 코드를 넣으면 해결되는지 설명하시오. Think Point문제를 봤을 때 getPopularMovies과 동일하게 시간을 측정할 수 있는 작업을 만들어 3초가 넘어가는지 확인함으로써 문제를 해결하고 싶었다. 그래서 여러 가지 방법 중 병렬 처리 방식을 떠올려보게 되었다. 병렬 처리
순차적으로 처리할 경우 한 작업이 지연(race condition)될 때 그 작업이 끝날 때 까지 대기해야한다. 즉, 현재 문제에선 동시에 타이머를 잴 수 없다고 생각했다. 하지만, 여러 작업 들을 동시에 실행할 수 있다면 동시에 타이머를 재서 3초 이전에 작업이 끝나면 그 작업에 대한 결과를 출력하고, 3초가 지나가면 시간이 초과되었다는 reject를 걸어주고 싶었다. 이를 위해 Promise.race
// 답
const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, "외부 API 접근한 결괏값");
});
const timeoutPromise = new Promise((resolve, reject) => {
setTimeout(reject, 3000);
});
Promise.race([getPopularMovies, timeoutPromise])
.then(result => {
console.log(result);
})
.catch(error => {
console.error("대기 시간이 오래 걸립니다");
});getPopularMovies와 마찬가지로 timeoutPromise를 만든 후 race 내 두 작업 들을 추가하여 동시에 작업을 실행한다. timeoutPromise이 먼저 실행된다면 reject 되어 catch에 console.error가 실행 되며 그렇지 않다면 then 절에서 console.log가 출력 된다. 또 다른 방법const getPopularMovies = new Promise((resolve, reject) => {
const timeout = setTimeout(() => {
reject();
}, 3000)
setTimeout(() => {
clearTimeout(timeout);
resolve("외부 API 접근한 결괏값");
}, Math.random() * 4000 + 1000);
});
getPopularMovies
.then(result => {
console.log(result);
})
.catch(error => {
console.error("대기 시간이 오래 걸립니다");
});getPopularMovies Promise를 생성할 때 두 개의 setTimeout 함수를 실행하게 한다. 첫 번째 setTimeout은 3초의 시간이 지난 후에 “대기 시간이 오래 걸립니다” 오류 메시지를 콘솔에 출력하고 Promise를 reject하게 한다. 두 번째 setTimeout은 임의의 시간(1초에서 5초 사이) 후에 외부 API로부터 받아온 결과를 resolve한다.
|
Beta Was this translation helpful? Give feedback.
-
🎯 해시, 파란의 비동기 문제 해설Q1. 왜 1->3->2->4 순으로 출력되는지 설명하시오.console.log("1");
setTimeout(() => console.log("2"));
new Promise((resolve) => resolve()).then(() => {
console.log("3");
});
setTimeout(() => console.log("4"));처음에 자바스크립트 코드를 순서대로 읽으면서 일반함수(console.log("1");는 콜스택으로, setTimeout 는 실행 후 내부 콜백함수가 태스크 큐에 이동하고, new Promise 의 내부 함수는 콜스택으로 이동한다. 이때 콜스택에 있는 함수들을 실행시켜주고, 프로미스의 내부함수 실행이 이행되면 .then 에 있는 콜백함수가 마이크로태스크큐에 들어간다. 이벤트 루프가 콜스택에 실행할게 없다는것을 확인 후 마이크로 태스크 큐 먼저 확인을 해서 콜백함수를 가져와 실행시켜주고, 콜스택이 비면 태스크 큐에 있는 나머지 함수들을 가져와 실행시켜준다. 그래서 1324 순으로 출력된다. Q2. 왜 두 개의 for문의 결과가 다른지 설명하시오.for (var i = 0; i < 10; i++) {
setTimeout(() => console.log(i)); // 10이 10번 출력
}for (var i = 0; i < 10; i++) {
(function (i) {
setTimeout(() => console.log(i)); // 0 1 2 3 4 5 6 7 8 9
})(i);
}for문을 돌면서 setTimeout 을 api 로 보낸 후 그 내부의 콜백함수가 태스크 큐에 들어가게 된다. 태스크큐에 있는 () => console.log(i) 를 꺼내서 실행시켜주는데 , 이때 i가 참조하는것을 찾아보면 위 코드에서와 아래 코드에서가 서로 다르다. 아래 코드에서는 즉시실행함수로 인해 i가 고유 렉시컬 환경을 가질 수 있게 된다. Q3. foo 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.왜 이렇게 짜서 왜 이렇게 작동하는지 설명도 덧붙여야 합니다. 단, foo 함수는 async 키워드를 붙일 수 없다. async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return ["쿵푸팬더4", "댐즐", "스리 아시", "돼지와 뱀과 비둘기", "듄: 파트 2", "가여운 것들"];
}
function foo() {
getPopularMovies().then((response)=>console.log(response))
}
foo();getPopularMovies() 가 async로서 promise를 반환하기 때문에 promise를 받기 위해 .then() 메서드를 사용해서 promise 반환이 된 후에 console.log()를 실행시킨다. Q4. getPopularMovies 함수가 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔로 출력하시오.const getPopularMovies = new Promise((resolve) => {
setTimeout(resolve, Math.random() * 4000 + 1000, "외부 API 접근한 결괏값");
});
const fetchWithTimeout = () => {
const TIME_THRESHOLD = 3000;
const timeout = new Promise((resolve) => {
setTimeout(resolve, TIME_THRESHOLD, "timeout");
});
Promise.race([getPopularMovies, timeout]).then((result) => {
if (result === "timeout") {
console.error("대기 시간이 오래 걸립니다.");
return;
}
console.log(result);
});
};
fetchWithTimeout();promise 의 race 메서드를 사용하여 getPopularMovies과 timeout 중 먼저 반환되는 프로미스를 실행시켜준다. 이때 timeout 은 3초 후 promise 를 반환하는데, getPopularMovies가 3초 이상 걸리게 된다면 timeout 이 실행되고, getPopularMovies는 실행되지 않는다. 그리고 timeout 이라는 메세지를 받는데, 이 경우 console.error("대기 시간이 오래 걸립니다.");를 실행하여 에러를 출력할 수 있다. |
Beta Was this translation helpful? Give feedback.
-
🎯 초코, 빙봉의 비동기 문제 해설Q1. 왜 1->3->2->4 순으로 출력되는지 설명하시오.자바스크립트는 단일 스레드 기반 언어로, 이벤트 루프를 통해 비동기 작업을 처리합니다. 이벤트 루프는 콜 스택이 비어있을 때 태스크 큐(마이크로태스크 큐와 매크로태스크 큐 포함)에서 대기 중인 작업을 콜 스택으로 이동시켜 실행합니다. 이벤트 루프는 마이크로태스크 큐를 매크로태스크 큐보다 우선적으로 처리합니다. 실행 순서
Q2. 왜 두 개의 for문의 결과가 다른지 설명하시오.첫 번째 for문
두 번째 for문
=> 결론적으로, 첫 번째 for문에서는 모든 콜백 함수가 같은 i 변수를 공유하기 때문에 마지막으로 업데이트된 i의 값인 10이 10번 출력됩니다. 반면에, 두 번째 for문에서는 각 반복마다 새로운 스코프와 i의 복사본을 생성하여, 각각의 콜백 함수가 자신만의 i 값을 유지하게 되므로 0부터 9까지 순서대로 출력되는 결과를 얻습니다. Q3. foo 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.코드 async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return ["쿵푸팬더4", "댐즐", "스리 아시", "돼지와 뱀과 비둘기", "듄: 파트 2", "가여운 것들"];
}
function foo() {
getPopularMovies().then(
(data) => console.log(data)
);
}
foo();답변
Q4. getPopularMovies 함수가 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔로 출력하시오.코드 const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, "외부 API 접근한 결괏값");
});
const timeoutPromise = new Promise((_, reject) => {
setTimeout(reject, 3000, "대기 시간이 오래 걸립니다");
});
Promise.race([getPopularMovies, timeoutPromise])
.then(result => console.log(result))
.catch(error => console.error(error));답변
|
Beta Was this translation helpful? Give feedback.
-
🎯 제이드, 쑤쑤의 비동기 문제 해설퀴즈Q1. 왜 1->3->2->4 순으로 출력되는지 설명하시오.console.log("1");
setTimeout(() => console.log("2"));
new Promise((resolve) => resolve()).then(() => {
console.log("3");
});
setTimeout(() => console.log("4"));
Q2. 왜 두 개의 for문의 결과가 다른지 설명하시오.for (var i = 0; i < 10; i++) {
setTimeout(() => console.log(i)); // 10이 10번 출력
}for (var i = 0; i < 10; i++) {
(function (i) {
setTimeout(() => console.log(i)); // 0 1 2 3 4 5 6 7 8 9
})(i);
}var로 선언된 변수는 함수 스코프를 가진다. 따라서 for 문에서 i = 0 으로 선언된 i는 전역변수로 선언되고, setTimeout() 내부에서 사용되는 i 역시 전역변수를 참조한다.
Q3. foo 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.왜 이렇게 짜서 왜 이렇게 작동하는지 설명도 덧붙여야 합니다. 단, foo 함수는 async 키워드를 붙일 수 없다. async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return ["쿵푸팬더4", "댐즐", "스리 아시", "돼지와 뱀과 비둘기", "듄: 파트 2", "가여운 것들"];
}
function foo() {
getPopularMovies().then((result)=>console.log(result));
}
foo();Q. 왜 이렇게 짰냐?
Q. 왜 이렇게 작동하냐?
Q4. getPopularMovies 함수가 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔로 출력하시오.왜 이렇게 짜서 왜 이렇게 작동하는지 설명도 덧붙여야 합니다. (단, 3초 이상 지연 시 getPopularMovies는 작업이 중단되거나 결괏값은 무시된다.) console.error("대기 시간이 오래 걸립니다");
아래의 영역에 코드를 채워 넣고 왜 해당 코드를 넣으면 해결되는지 설명하시오.const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, "외부 API 접근한 결괏값");
});
// 아래에 답안을 작성하세요Q. 왜 이렇게 짰냐?
Q. 왜 이렇게 작동하냐?
|
Beta Was this translation helpful? Give feedback.
-
🎯 다르, 에프이의 비동기 문제 해설Q1. 왜 1->3->2->4 순으로 출력되는지 설명하시오."1"은 동기로, 콜 스택에 들어가서 바로 실행된다. 우선순위: microtask queue -> task queue 우선순위가 더 높은 "3"이 먼저 출력되고 task queue에 있는 "2"와 "4"가 출력된다. Q2. 왜 두 개의 for문의 결과가 다른지 설명하시오.for (var i = 0; i < 10; i++) {
setTimeout(() => console.log(i));// 10이 10번 출력
}i 를 var 로 선언했기 때문에 함수 레벨인 전역 객체에 i 값을 저장하게 된다. 반복문을 실행할 때 i 값은 지속적으로 전역 객체 i 값을 참조하면서 setTimeout 의 콜백을 task queue에 넣게된다. for (var i = 0; i < 10; i++) {
(function (i) {
setTimeout(() => console.log(i));// 0 1 2 3 4 5 6 7 8 9
})(i);
}각 반복문이 실행되면 즉시 실행함수가 실행 컨텍스트에 쌓인다. 해당 즉시 실행함수의 lexical environment 에는 그 당시 전역 객체의 i 값이 복사되어 해당 환경의 record 에 저장이 되고 콜백을 task queue 에 넣는다. Q3. foo 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return [“쿵푸팬더4”, “댐즐“, “스리 아시“, “돼지와 뱀과 비둘기“, “듄: 파트 2”, “가여운 것들“];
}
function foo() {
getPopularMovies().then((data) => console.log(data));
}
foo();Q4. getPopularMovies 함수가 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔로 출력하시오.함수를 async 로 선언했기에 getPopularMovies 함수는 Promise 객체를 반환하게 된다. foo() 함수에서 getPopularMovies() 를 실행하게 되면 비동기적으로 동작하게 된다. 이때 Promise 객체의 then 메서드를 이용하여 해당 Promise 가 fulfilled 처리가 되었을 때의 값을 콘솔에 출력한다. const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, “외부 API 접근한 결괏값“);
});
const errorPromise = new Promise((resolve, reject) => {
setTimeout(reject, 3000, “대기 시간이 오래 걸립니다“);
})
Promise.race([getPopularMovies, s3error]).then((data) => console.log(data)).catch((err) => console.error(err))getPopularMovies, errorPromise 는 비동기로 동작하는데 |
Beta Was this translation helpful? Give feedback.
-
🎯 해리, 마루의 비동기 문제 해설Q1. 왜 1->3->2->4 순으로 출력되는지 설명하시오.console.log("1");
setTimeout(() => console.log("2"));
new Promise((resolve) => resolve()).then(() => {
console.log("3");
});
setTimeout(() => console.log("4"));해당 스크립트를 실행하면,
마이크로 태스크는 태스크보다 우선순위가 높아 3이 먼저 출력되고, 태스크 큐에 들어간 순서대로 2, 4가 출력됨. 따라서 1 -> 3 -> 2 -> 4 Q2. 왜 두 개의 for문의 결과가 다른지 설명하시오.for (var i = 0; i < 10; i++) {
setTimeout(() => console.log(i)); // 10이 10번 출력
}for (var i = 0; i < 10; i++) {
(function (i) {
setTimeout(() => console.log(i)); // 0 1 2 3 4 5 6 7 8 9
})(i);
}첫 번째 경우, var 키워드로 선언한 변수는 함수 레벨 스코프인데, 위 코드의 반목문 내부는 함수로 감싸져있지 않기 때문에 setTimeout의 첫 번째 콜백함수에서 참조하는 i는 동일하다. 반복문이 종료된 후 태스크 큐에 있는 setTimeout의 콜백 함수가 실행되는 시점에서 i는 10이기 때문에 모든 콜백 함수가 10을 출력한다. 두 번째 경우, 반복문 내부가 함수로 감싸져 있기 때문에 함수 내부에서 실행되는 setTimout의 콜백 함수는 i값을 함수 레벨에서 참조한다. 콜백 함수가 실행될 때 i는 함수에 인자로 전달한 값이 되어 0,1,2,3,,,,순서로 출력하게된다. Q3. foo 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.
Q4. getPopularMovies 함수가 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔로 출력하시오.const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(
() => {
resolve(["쿵푸팬더4", "댐즐", "스리 아시", "돼지와 뱀과 비둘기", "듄: 파트 2", "가여운 것들"]);
},
Math.random() * 4000 + 1000,
"외부 API 접근한 결괏값"
);
});
const normalPromise = new Promise((resolve, reject) => {
setTimeout(() => {
reject("대기시간이 오래 걸립니다.");
}, 3000);
});
Promise.race([getPopularMovies, normalPromise])
.then((res) => {
console.log(res);
})
.catch((err) => console.error(err));
|
Beta Was this translation helpful? Give feedback.
-
🎯 낙타, 시모의 비동기 문제 해설Q1. 왜 1->3->2->4 순으로 출력되는지 설명하시오.console.log("1");
setTimeout(() => console.log("2"));
new Promise((resolve) => resolve()).then(() => {
console.log("3");
});
setTimeout(() => console.log("4"));프로미스의 후속처리 메서드의 콜백함수는 태스크 큐가 아니라 마이크로태스크큐에 저장됩니다. 그 외의 비동기 함수의 콜백 함수나 이벤트 핸들러는 태스크 큐에 일시 저장됩니다. 콜백함수나 이벤트 핸들러를 일시 저장한다는 점에서 태스크큐와 동일하지만, 마이크로태스크큐는 태스크큐보다 우선순위가 높습니다. 즉, 이벤트 루프는 콜스택이 비면 먼저 마이크로태스크큐에서 대기하고 있는 함수를 가져와 실행합니다. 이후 마이크로태스크큐가 비워지면 태스크큐에서 대기하고 있는 함수를 가져와 실행하기 때문에 결론적으로, 위의 코드는 1 → 3 → 2 → 4 순으로 출력됩니다. Q2. 왜 두 개의 for문의 결과가 다른지 설명하시오.for (var i = 0; i < 10; i++) {
setTimeout(() => console.log(i)); // 10이 10번 출력
}for (var i = 0; i < 10; i++) {
(function (i) {
setTimeout(() => console.log(i)); // 0 1 2 3 4 5 6 7 8 9
})(i);
}첫 번째의 경우, 반면에 두 번째의 경우, Q3. foo 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.왜 이렇게 짜서 왜 이렇게 작동하는지 설명도 덧붙여야 합니다. 단, foo 함수는 async 키워드를 붙일 수 없다. async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return ["쿵푸팬더4", "댐즐", "스리 아시", "돼지와 뱀과 비둘기", "듄: 파트 2", "가여운 것들"];
}
function foo() {
getPopularMovies().then((value) => console.log(value));
}
foo();
Q4. getPopularMovies 함수가 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔로 출력하시오.왜 이렇게 짜서 왜 이렇게 작동하는지 설명도 덧붙여야 합니다. (단, 3초 이상 지연 시 getPopularMovies는 작업이 중단되거나 결괏값은 무시된다.) console.error("대기 시간이 오래 걸립니다");아래의 영역에 코드를 채워 넣고 왜 해당 코드를 넣으면 해결되는지 설명하시오. const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, '외부 API 접근한 결괏값');
});
const getReject = new Promise((_, reject) => {
setTimeout(reject, 3000, '대기 시간이 오래 걸립니다.');
});
Promise.race([getPopularMovies, getReject])
.then((value) => console.log(value))
.catch((error) => console.error(error));
3초의 기준이 필요했기 때문에 저희는 |
Beta Was this translation helpful? Give feedback.
-
Q1. 왜 1->3->2->4 순으로 출력되는지 설명하시오.
Q2. 왜 두 개의 for문의 결과가 다른지 설명하시오.
Q3. foo 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.
왜 이렇게 짜서 왜 이렇게 작동하는지 설명도 덧붙여야 합니다.
단, foo 함수는 async 키워드를 붙일 수 없다.
Q4. getPopularMovies 함수가 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔로 출력하시오.
왜 이렇게 짜서 왜 이렇게 작동하는지 설명도 덧붙여야 합니다.
(단, 3초 이상 지연 시 getPopularMovies는 작업이 중단되거나 결괏값은 무시된다.)
아래의 영역에 코드를 채워 넣고 왜 해당 코드를 넣으면 해결되는지 설명하시오.
Beta Was this translation helpful? Give feedback.
All reactions