FE 영화 리뷰 - 비동기 퀴즈 해설지 만들기 | 2023.03.18 #32
Replies: 24 comments 7 replies
-
|
작성할 때 자신과 페어의 닉네임을 앞에 적습니다. 🎯 공원, 크론의 비동기 문제 해설내용 작성 |
Beta Was this translation helpful? Give feedback.
-
👼 도밥, 가람의 비동기 문제 해설Q1.Line1 실행 -> call stack push! -> 실행 -> '1' 출력 -> pop! Line2 실행 -> call stack push! -> setTimeout 실행 -> pop! -> webAPI상에서 해당 시간 대기 -> task queue로 보냄( console.log만) Line3 실행 -> call stack push! -> 내부 then절 call stack push! -> '3' 출력 -> pop! -> promise pop! -> 이 시점에서 call stack이 비어있음 Q2.
Q3.getPopularMovies 함수가 async 함수이기 때문에 Promise 객체를 항상 반환한다. function something() {
getPopularMovies().then((movies) => console.log(movies));
}
something();Q4.const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, "외부 API 접근한 결괏값");
setTimeout(reject, 3000, "대기시간이 오래걸립니다.");
});
getPopularMovies
.then((value) => {
console.log(value);
})
.catch((error) => {
console.error(error);
}); |
Beta Was this translation helpful? Give feedback.
-
|
Q3. -> 왜 then을 사용할 수 있나요? |
Beta Was this translation helpful? Give feedback.
-
async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return ["장화신은 고양이", "똑똑똑", "와칸다 포에버", "다이 하트", "플레인", "아바타: 물의 길"];
}내부에서 resolve로 인해 이행 상태가 되기 때문에 |
Beta Was this translation helpful? Give feedback.
-
🎯 엽토, 우스, 고니의 비동기 문제 해설
두번째 즉시실행함수의 경우에는 function(i){
var i = i;
setTimeout ...과 같이 setTimeout에 i 가 없으니 렉시컬 환경을 통해 i 를 찾으러 위로 올라가면 function에 i 가 있으므로 0을 실행하게 됩니다. 그리고 즉시 실행 함수이므로 셋타임 아웃이 있더라도 동기적으로 실행 후 비동기 코드를 이벤트 루프 테스크 큐에 들어가게 됩니다.
async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return [
"장화신은 고양이",
"똑똑똑",
"와칸다 포에버",
"다이 하트",
"플레인",
"아바타: 물의 길",
];
}
function something() {
getPopularMovies().then((resolve) => console.log(resolve));
}
something();되는 이유 Async/await를 통해 뉴 프로미스의 셋타임 아웃 1초를 기다리게 되고 , 그 이후 리턴하게된다. 근데 async 가 붙어 Promise 감싼 리턴 값이 된다.그래서 프로미스를 벗기기 위해 then을 사용하여 콘솔로그를 찍었다. const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, "외부 API 접근한 결괏값");
});
const getErrorMessage = new Promise((resolve) => {
setTimeout(resolve, 3000, "대기 시간이 오래 걸립니다");
});
Promise.race([getPopularMovies, getErrorMessage]).then((result) =>
console.log(result)
);되는 이유 예를들어 3초걸리는 프로미스와 5초 걸리는 프로미스가 있다고 가정하자. 이 두개 중 먼저 도착하는 프로미스를 실행시키는 Promise.race()를 사용한다면 3초걸리는 프로미스가 먼저 실행될 것이다. 고로 3초 걸리는 프로미스에 대기 시간이 오래 걸린다는 에러 메세지를 남긴다면 1초걸리는 비동기와 2초걸리는 프로미스는 에러가 안뜨겠지만 3초 초과라면 에러가 뜨게 될 것이다. |
Beta Was this translation helpful? Give feedback.
-
🫧헤다, 루루의 비동기 문제 해설
function something() {
getPopularMovies().then(console.log);
}getPopularMoives 함수가 Promise를 반환하므로 then 메소드를 써서 resolve된 후 반환된 값을 받아 콘솔에 출력하면 된다. const delayMessage = new Promise((resolve) => {
setTimeout(resolve, 3000, "대기시간이 오래 걸립니다.");
});
Promise.race([getPopularMovies, delayMessage]).then(console.log);Promise의 race 메소드는 인자로 받은 비동기 함수들 중 가장 먼저 resolve 된 함수를 프라미스 객체로 반환한다. |
Beta Was this translation helpful? Give feedback.
-
🎯 해온, 파인의 비동기 문제 해설Q1. Q2.
Q3. function something() {
getPopularMovies().then(console.log);
}async가 붙은 함수는 무조건 promise를 반환한다. Q4. const getPopularMovies = new Promise((resolve) => {
setTimeout(resolve, Math.random() * 4000 + 1000, '외부 API 접근한 결괏값');
});
const timeout = new Promise((reject) => {
setTimeout(reject, 10000, '대기 시간이 오래 걸립니다');
});
Promise.race([getPopularMovies, timeout]).then(console.log).catch(console.err);race는 여러 promise중에 가장 먼저 이행된 것만 리턴한다. |
Beta Was this translation helpful? Give feedback.
-
노아이즈 / 도리Q1.
Q2. 다음 코드는 (function(){})()와 같은 표현식으로 함수를 선언하고 실행하는 즉시 실행 함수를 사용했다. Q3. function something() {
getPopularMovies().then(console.log)
}async 함수는 Promise를 return하기 때문에 then 메서드를 통해 마이크로태스크에 있는 콜백을 호출하고 fufilled나 reject된 결과 값을 활용할 수 있습니다. Q4. const hateWaiting = (promise, time, message = "대기 시간이 오래 걸립니다") =>
new Promise((resolve, reject) => {
setTimeout(reject,time, message)
promise.then(resolve)
})
hateWaiting(getPopularMovies, 3000).then(console.log).catch(console.error)외부 Promise의 resolve 시점과 reject 시점을 을 내부 Promise와 setTimeout에서 조작하여 실행 순서를 설정합니다 |
Beta Was this translation helpful? Give feedback.
-
|
이름을 좀 더 크게 써주십쇼! |
Beta Was this translation helpful? Give feedback.
-
슬링키, 참새의 비동기 문제 풀이1번첫 줄의 콘솔로그는 동기적으로(자바스크립트 엔진이 직접 처리 가능한) 처리하는 코드다. 첫 줄의 콘솔로그는 따라서 읽자마자 실행된다. 이후 js 엔진이 콜 스택이 모두 빈 것을 확인한다. 엔진은 이벤트 루프에 완료된 작업이 있는지 큐들을 확인한다. 2번전자는 for문을 돌면서 비동기 코드인 settimeout을 전부 위임한다. 후자는 함수 생성 과정에서 i의 레퍼런스를 받는 것이 아니라 그 당시의 값만을 받는다. 3번function something() {
getPopularMovies()
.then((resolve) => console.log(resolve));
}async가 붙은 함수는, return 값이 Promise가 아니더라도 Promise로 바꿔서 돌려준다. 4번const getPopularMovies = new Promise((resolve, reject) => {
Promise.race([
setTimeout(reject, 3000, '작업 시간 초과!'),
setTimeout(resolve, Math.random() * 4000 + 1000, '외부 API 접근한 결괏값'),
]);
}).then((result) => {
console.log(result);
}).catch((reject) => console.error(reject));race는 여러 promise중 가장 처음 완료된 친구만 돌려준다. |
Beta Was this translation helpful? Give feedback.
-
패트릭 & 타미의 문제 해설Q1
Q2
Q3getPopularMovies().then((data)=>console.log(data));async함수는 Promise 객체를 반환합니다. 그래서 then은 Promise가 이행됐을 때 resolve 혹은 reject된 값을 파라미터로 받아옵니다. 따라서 getPopularMovies가 resolve된 이후의 값을 data로 출력할 수 있습니다. Q4Promise.race([
getPopularMovies,
new Promise((resolve) => setTimeout(() => resolve("대기 시간이 오래 걸립니다"), 3000)),
])
.then((message) => {
console.log(message);
})
.catch((e) => {
console.error(e);
});Promise에서의 race는 배열 안의 Promise들 간에 가장 빨리 끝나는 값만 resolve합니다. 따라서 getPopularMovies가 3초 이상의 시간이 걸린다면 “대기 시간이 오래 걸립니다.”가 resolve되기 때문에 3초 이후에 해당 메시지가 출력됩니다. |
Beta Was this translation helpful? Give feedback.
-
🎯 야미, 가브리엘의 비동기 문제 해설Q1. 왜 1->3->2 순으로 출력되는지 설명하시오.console.log("1");
setTimeout(() => console.log("2"));
new Promise((resolve) => resolve()).then(() => {
console.log("3");
});A1. 1 → 2 → 3 순서가 아닌 1 → 3 → 2 순서로 출력되는 이유
콜백 큐는 우선 순위가 존재하고, 우선 순위에 따라 함수를 콜 스택에 담는다.
따라서 우선 순위에 따라
console.log("1");
setTimeout(() => console.log("2"));
new Promise((resolve) => resolve()).then(() => {
console.log("3");
});
console.log("4");
setTimeout(() => console.log("5"));
new Promise((resolve) => resolve()).then(() => {
console.log("6");
});위 코드를 실행한다면, 1 → 4 → 3 → 6 → 2 → 5 순서로 찍히게 된다. Q2. 아래의 함수의 결괏값이 도출되는 이유를 설명하시오.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);
}A2. 결괏값이 다른 이유반복문 안에서 Q3. something 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.단, something 함수는 async 키워드를 붙일 수 없다. 왜 이렇게 짜서 왜 이렇게 작동하는지 설명도 덧붙여야 합니다. async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return ["장화신은 고양이", "똑똑똑", "와칸다 포에버", "다이 하트", "플레인", "아바타: 물의 길"];
}
function something() {
//✨✨✨✨✨✨✨✨✨✨✨✨✨✨ 수정 가능 영역
//✨✨✨✨✨✨✨✨✨✨✨✨✨✨
}
something();A3. then()을 사용한다.async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return ["장화신은 고양이", "똑똑똑", "와칸다 포에버", "다이 하트", "플레인", "아바타: 물의 길"];
}
function something() {
getPopularMovies().then((value) => console.log(value))
}
something();
따라서 Q4. getPopularMovies 함수가 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔로 출력하시오.(단, 3초 이상 지연 시 getPopularMovies는 작업이 중단되거나 결괏값은 무시된다.) 왜 이렇게 짜서 왜 이렇게 작동하는지 설명도 덧붙여야 합니다. console.error("대기 시간이 오래 걸립니다");const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, "외부 API 접근한 결괏값");
});
// 아래에 답안을 작성하세요A4-1.const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, "외부 API 접근한 결괏값");
});
const errorAfter3seconds = new Promise((resolve, reject) => {
setTimeout(reject, 3000);
})
Promise.race([
getPopularMovies,
errorAfter3seconds,
])
.then((value) => {
console.log(value);
})
.catch(() => {
console.error("대기 시간이 오래 걸립니다");
});
A4-2.첫번째 답을 적고 문득 의문이 들었다. Promise는 성공 또는 실패만 하는데 race를 쓸 필요가 있을까? 🤔 처리가 끝난 Promise에 resolve나 reject가 호출되면 무시되는 것을 이용해 아래와 같은 코드를 작성했다. const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, "외부 API 접근한 결괏값");
setTimeout(reject, 3000, "대기 시간이 오래 걸립니다");
});
getPopularMovies.then(
(result) => console.log(result),
(error) => console.error(error)
);위에서 (A3) 말했던 것과 마찬가지로 따라서 3초가 되기 전에 첫 번째 함수가 실행되면 콘솔에 |
Beta Was this translation helpful? Give feedback.
-
🚀 우코, 노아의 비동기 문제 해설Q1. 왜 1->3->2 순으로 출력되는지 설명하시오.Microtask는 주로 Promise callback, queueMicrotask을 사용한 함수로 프로그램이 종료된 후 call stack이 비어져있을 때 실행되는 짧은 함수 // 1
console.log("1");
// 2
setTimeout(() => console.log("2"));
// 3
new Promise((resolve) => resolve()).then(() => {
console.log("3");
});
Q2. 아래의 함수의 결괏값이 도출되는지 설명하시오.Q2 - 1for (var i = 0; i < 10; i++) {
setTimeout(() => console.log(i)); // 10이 10번 출력
}
콜 스택이 모두 비어지고 나서 드이어 Q2 - 2for (var i = 0; i < 10; i++) {
(function (i) {
setTimeout(() => console.log(i));
})(i);
}콜스택에서 익명함수가 실행되어 인자 i를 복사하게 됩니다. 때문에 익명함수 내의 변수 때문에 Q3. something 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return [
'장화신은 고양이',
'똑똑똑',
'와칸다 포에버',
'다이 하트',
'플레인',
'아바타: 물의 길',
];
}
function something() {
getPopularMovies().then((res) => console.log(res)); // [ '장화신은 고양이', '똑똑똑', '와칸다 포에버', '다이 하트', '플레인', '아바타: 물의 길' ]
}
something();async function은 promise을 반환합니다. 즉, 비동기입니다. 비동기인 함수가 모두 끝날 때 까지 기다리기 위해
Q4. getPopularMovies 함수가 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔로 출력하시오const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, 2000, '외부 API 접근한 결괏값');
});
const generatorError = new Promise((resolve, reject) => {
setTimeout(() => {
reject('대기 시간이 오래 걸립니다');
}, 3000);
});
Promise.race([getPopularMovies, generatorError])
.then((res) => console.log(res))
.catch((error) => console.error(error));
|
Beta Was this translation helpful? Give feedback.
-
|
???? 우코.. 저는 문제를 같이 풀지 않았습니다만... |
Beta Was this translation helpful? Give feedback.
-
🎯 도담, 황펭의 비동기 문제 해설Q1.console.log("1"); // 1
setTimeout(() => console.log("2")); // 2
new Promise((resolve) => resolve()).then(() => {
console.log("3"); // 3
});
Q2.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.async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return ["장화신은 고양이", "똑똑똑", "와칸다 포에버", "다이 하트", "플레인", "아바타: 물의 길"];
}
function something() {
getPopularMovies().then((data) => {
console.log(data)
});
}
something();
Q4.const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, "외부 API 접근한 결괏값");
});
const catchError = new Promise((_, reject) => {
setTimeout(reject, 3000, new Error("대기 시간이 오래 걸립니다"))
});
Promise.race([getPopularMovies, catchError]).then((value) => {
console.log(value);
}).catch((error) => {
console.error(error.message);
});
|
Beta Was this translation helpful? Give feedback.
-
🎯 룩소, 부엉이의 비동기 문제 해설Q1.console.log("1");
setTimeout(() => console.log("2"));
new Promise((resolve) => resolve()).then(() => {
console.log("3");
});
Q2.for (var i = 0; i < 10; i++) {
setTimeout(() => console.log(i)); // 10이 10번 출력
}setTimeout은 비동기 함수이기 때문에, 콜백 함수가 즉시 실행되지 않고, MacroTaskQueue에 삽입됩니다. 콜백 함수가 실제로 실행될 때에는 이미 for 루프가 완료되어 i의 값이 10으로 증가되었습니다. JavaScript의 클로저는 외부 범위의 변수에 계속 액세스할 수 있기 때문에, 각 콜백 함수는 i의 최종 값인 10에 대한 액세스 권한이 있습니다. 따라서 콜백 함수가 최종적으로 10번 실행될 때마다, 항상 10의 값을 기록하므로 출력은 "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);
}i 는 현재 실행되는 즉시 실행 함수의 매개변수로 전달됩니다. 즉, 즉시 실행 함수는 새로운 스코프를 만들며, 이 스코프 내에서 i라는 매개변수를 선언하고, 이전 반복에서의 i 값을 전달받습니다. 그 후, setTimeout 함수는 해당 콜백 함수를 호출하며, 이때 i 값은 전달받은 매개변수의 값입니다. 따라서, 각 콜백 함수는 자신만의 독립적인 스코프에서 i 값을 사용할 수 있게 됩니다. 이로 인해, 콜백 함수가 실행될 때 해당 순서의 i 값에 접근할 수 있게 됩니다. 따라서, i는 새로운 스코프 내의 매개변수로 저장되며, 각 콜백 함수에서는 이 매개변수의 값에 접근할 수 있습니다. Q3.async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return ["장화신은 고양이", "똑똑똑", "와칸다 포에버", "다이 하트", "플레인", "아바타: 물의 길"];
}
function something() {
getPopularMovies().then(res => console.log(res));
}
something();async 함수를 호출하면 프로미스가 반환되므로, Q4.const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, '외부 API 접근한 결괏값');
});
const timeOver = new Promise((resolve, reject) => {
setTimeout(() => reject('대기 시간이 오래 걸립니다'), 3000);
});
Promise.race([getPopularMovies, timeOver])
.then(value => console.log(value))
.catch(error => console.error(error));위 코드에서는 timeout Promise에서 setTimeout() 함수를 사용하여 3초가 지난 후에 reject() 함수를 호출하여, 대기 시간이 초과됐음을 알립니다. 이때, reject() 함수가 호출되면 Promise.race()에서 바로 해당 Promise 객체를 반환하며, 나머지 Promise 객체는 무시됩니다. 따라서, Promise.race()의 반환 값은 getPopularMovies Promise가 처리될 때까지 대기하지 않고, timeout Promise에서 먼저 처리된 Promise 객체를 반환합니다. 이후, 반환된 Promise 객체에서 성공 혹은 실패에 따라 적절한 처리를 수행합니다. 위 코드에서는 반환된 Promise 객체가 성공한 경우(getPopularMovies Promise가 더 빨리 처리됨) 결과값을 출력하며, 실패한 경우(timeout Promise가 더 빨리 처리됨) 오류 메시지를 출력합니다. |
Beta Was this translation helpful? Give feedback.
-
🧙♀️ 요술토끼, 🍫첵스의 비동기 문제 해설Q1.
따라서, 실행 순서는 Q2.위의 경우,
따라서 아래의 경우, 동작은 비슷하나 console.log(i)가 실행될 때 i값을 탐색하기 위해, 자바스크립트 엔진은 스코프체인을 통해 즉시실행함수의 매개변수인 i를 참조하게 됩니다. (이는 실행 컨텍스트의 스코프 체인에 의해 참조 순위에서 var로 선언된 전역변수 i가 뒤로 밀렸기 때문입니다.) 여기서 매개변수 i는 함수가 생성될 때 선언된 0 - 9를 기억하고 있기 때문에 0 - 9까지 출력됩니다. Q3.async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return ['장화신은 고양이', '똑똑똑', '와칸다 포에버', '다이 하트', '플레인', '아바타: 물의 길'];
}
function something() {
getPopularMovies().then((result) => console.log(result));
}
something();
값을 정상적으로 받아오기 위해서는 비동기 함수가 끝나 값을 반환할 때까지 기다려 줘야 합니다. 이를 위해 Q4.// Solution
const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, "외부 API 접근한 결괏값"); // 1~5초 뒤에 resolve 호출
});
const getErrorMessage = new Promise((resolve, reject) => {
setTimeout(reject, 2990, new Error("대기 시간이 오래 걸립니다")); // 2.9초 뒤에 reject 호출
});
Promise.race([getPopularMovies, getErrorMessage])
.then(console.log)
.catch((error) => console.error(error.message));
// setTimeout(function[, delay, arg1, arg2, ...]);의
// "외부 API 접근한 결괏값"은 resolve에 전달할 추가 매개변수입니다.
// "대기 시간이 오래 걸립니다"는 reject에 전달할 추가 매개변수입니다.
// Promise.race() 메소드는
// 배열 안에 있는 Promise 중에 가장 먼저 완료된 Promise 객체를 반환합니다.
// Promise의 상태는
// resolve가 호출되면 "fulfilled",
// reject가 호출되면 "rejected"로 변합니다.
// .then의 첫 번째 인수는 Promise가 이행되었을 때(fulfilled) 실행되는 함수이고, 여기서 실행 결과를 받습니다.
// .then의 두 번째 인수는 Promise가 거부되었을 때(rejected) 실행되는 함수이고, 여기서 에러를 받습니다.
// .catch(f)는 promise.then(null, f)과 동일하게 동작합니다.
// 참고사항)
// Promise는 다음 중 하나의 상태를 가집니다.
// 대기(pending): 이행하지도, 거부하지도 않은 초기 상태
// 이행(fulfilled): 연산이 성공적으로 완료됨
// 거부(rejected): 연산이 실패함
getErrorMessage가 먼저 완료되었기 때문에
두 번째 매개변수는 여기서는
|
Beta Was this translation helpful? Give feedback.
-
🎯에디, 윤생의 비동기 문제 해설Q1console.log("1");
setTimeout(() => console.log("2"));
new Promise((resolve) => resolve()).then(() => {
console.log("3");
});
Q2for (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);
}
Q3async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return ["장화신은 고양이", "똑똑똑", "와칸다 포에버", "다이 하트", "플레인", "아바타: 물의 길"];
}
function something() {
getPopularMovies().then((res) => console.log(res));
}
something();
Q4const getPopularMovies2 = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, "외부 API 접근한 결괏값");
});
function test() {
let isOverTime = false;
getPopularMovies2.then((res) => {
if(isOverTime === false) {
console.log(res);
}
});
setTimeout(() => {
console.error("대기 시간이 오래 걸립니다");
isOverTime = true;
}, 3000);
}
test();
|
Beta Was this translation helpful? Give feedback.
-
👯♀️ 애슐리, 라잇의 비동기 해설Q1.
Q2.1. setTimeout이 처리되기 전에 for문은 마지막 루프까지 빠르게 돌고, setTimeout의 콜백함수를 처리할때, 이미 마지막 i값을 참조해버리기 때문에 동일한 10이 10번 출력되는 것이다.2. 콜스택에 '즉시 실행함수' 컨텍스트가 쌓이고 콜백으로 넘긴 콜백함수 스코프에 인자로 넘긴 i값을 기억하고 있기 때문에 해당 i를 최신 값으로 유지할 수 있다. 즉, 클로저이기 때문에 '즉시 실행함수'를 실행한 후 인자로 i값을 전달하는 방식을 활용한다. Q3.setTimeout의 콜백함수인 resolve가 2초 후에 반환되면, then 뒤의 구문을 실행하는데, 인자로 결과값을 리턴 받아서 console.log()로 확인하면 알 수 있다.async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 2000));
return [
"장화신은 고양이",
"똑똑똑",
"와칸다 포에버",
"다이 하트",
"플레인",
"아바타: 물의 길",
];
}
function something() {
getPopularMovies().then((result) => console.log(result));
}
something();Q4.Promise.race()는 가장 빨리 응답을 받은 결과값만 resolve한다. 따라서, 3초가 지나면 timeout이 getPopularMovies 보다 먼저 resolve되어 console.error()를 통해 '대기 시간이 오래 걸립니다'문구를 출력한다.const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, ‘외부 API 접근한 결괏값‘);
});
const timeout = new Promise((resolve, reject) => {
setTimeout(reject, 3000, ‘대기 시간이 오래 걸립니다’);
});
Promise.race([getPopularMovies, timeout])
.then((result) => console.log(result))
.catch((error) => console.error(error)) |
Beta Was this translation helpful? Give feedback.
-
쵸파 & 유스Q1. 왜 1->3->2 순으로 출력되는지 설명하시오.이벤트 루프가 [콜백 큐]에서 콜스택에 콜백을 넣는다.
Q2. 아래의 함수의 결괏값이 도출되는지 설명하시오.1번
(같은 2번
Q3. something 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.function something() {
getPopularMovies().then((movies) => { console.log(movies) });
}Q4. getPopularMovies 함수가 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔로 출력하시오.const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, '외부 API 접근한 결괏값');
});
// 아래에 답안을 작성하세요
const rejectRequest = new Promise((_, reject) => {
setTimeout(reject, 3000, '대기 시간이 오래 걸립니다');
});
Promise.race([getPopularMovies, rejectRequest]).then(
(resolveMessage) => {
console.log(resolveMessage);
},
(rejectMessage) => {
console.error(rejectMessage);
},
); |
Beta Was this translation helpful? Give feedback.
-
🎯 센트, 에이든의 비동기 문제 해설Q1. 왜 1->3->2 순으로 출력되는지 설명하시오.자바스크립트 함수가 실행될 때, 동기적으로 실행되는 함수들은 콜스택에 올라가 바로 pop되어 실행된다. 하지만 비동기적으로 실행되는 함수들은 큐에 추가된 후 이벤트 루프에 의해 다시 콜스택에 push되고, pop되어 실행된다. (큐에 추가된 함수가 비동기적으로 실행되는 함수라면 동기적인 콜백함수가 남을 때까지 앞의 과정이 반복된다.) 큐의 종류에는 각 큐의 우선순위는
console.log('1');
setTimeout(() => console.log('2'));
new Promise((resolve) => resolve()).then(() => {
console.log('3');
});
// 1, 3, 2순서로 출력첫번째로 실행: console.log("1")은 큐에 들어가지 않고 바로 콜스택에서 동기적으로 실행되므로 1이 가장 먼저 출력된다. 두번째로 실행: 이벤트 루프가 비동기작업을 처리하는 우선순위에 의해 마이크로태스크큐에 있는 console.log("3")이 실행되어 3이 출력된다. 세번째로 실행: 태스크큐는 마이크로태스크큐보다 후순위 이므로 태스크큐에 있는 console.log("2")가 실행되어 2가 출력된다. (추가적으로 궁금했던 점) 만약 비동기함수 내부에 또 비동기함수가 있다면?console.log('1');
setTimeout(() => console.log('2'));
new Promise((resolve) => resolve()).then(() => {
setTimeout(() => console.log('3'));
});
// 1, 2, 3 순서로 출력 (Promise 안에 setTimeout이라는 비동기함수가 있기 때문에)위와 같이 비동기함수(Promise) 내부에 또 비동기함수가 있을 경우 같은 동기함수를 콜스택에 반환할 때 까지 큐에 추가하는 작업을 반복한다.(이벤트 루프) Q2. 아래의 함수의 결괏값이 도출되는지 설명하시오.for (var i = 0; i < 10; i++) {
setTimeout(() => console.log(i)); // 10이 10번 출력
}setTimeout이 콜스택에 쌓였다가 web API 동작을 거쳐서 태스크큐에 콜백함수를 넘겨줄 동안 for문의 동기적인 동작이 끝나 i가 10인 상태가 된다. 그리고 태스크큐에 쌓여있던 콜백함수가 콜스택으로 옮겨가 호출될 때 참조되는 i가 10이므로 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은 첫번째와 동일하게 실행이 되지만 참조하는 i는 for문의 var i가 아닌 익명함수 내부의 인자값으로 넘어온 i이므로 익명함수가 선언된 당시의 i값이 출력된다(클로저) Q3. something 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return [
'장화신은 고양이',
'똑똑똑',
'와칸다 포에버',
'다이 하트',
'플레인',
'아바타: 물의 길',
];
}
function something() {
getPopularMovies().then(console.log);
}
something();getPopularMovies 함수가 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔로 출력하시오.const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, '외부 API 접근한 결괏값');
});
const catchError = new Promise((_, reject) => {
setTimeout(reject, 3000, '대기 시간이 오래 걸립니다.');
});
Promise.race([getPopularMovies, catchError])
.then((value) => console.log(value))
.catch((error) => console.error(error)); |
Beta Was this translation helpful? Give feedback.
-
🎯 아인, 제레미의 비동기 문제 해설Q1. 왜 1->3->2 순으로 출력되는지 설명하시오.console.log('1');
setTimeout(() => console.log('2'));
new Promise((resolve) => resolve()).then(() => {
console.log('3');
});
// 1, 3, 2순서로 출력console.log('1')이 콜스택에 쌓여서 console에 1이 출력되고 실행이 종료되면, Q2. 아래의 함수의 결괏값이 도출되는지 설명하시오.for (var i = 0; i < 10; i++) {
setTimeout(() => console.log(i)); // 10이 10번 출력
}var i=0이 콜스택에서 처리된 후 setTimeout()은 콜스택에 쌓였다가 MacroTask queue에서 대기한다. i=1가 실핼되고 setTimeOut()이 MacroTask queue애 두번째로 쌓인다. i=9가 될때 까지 이와 같은 로직이 반복되어 MacroTask queue에는 setTimeOut()이 10개가 쌓이게 된다. i=10이 실행된 후 콜스택이 완전히 비워지면 MacroTask가 들어온 순서대로 콜스택에서 실행되는데, 이때 i는 10이므로 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);
}함수가 실행될 때 i를 인자로 받기때문에 함수 내부의 지역변수를 참조하게 된다. 따라서 0 1 2 3 4 5 6 7 8 9 순으로 출력되는데, 이때 인자를 받지 않는 함수라면 i는 글로벌 변수를 참조하여 10을 10번 출력하게 될 것이다. Q3. something 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return [
'장화신은 고양이',
'똑똑똑',
'와칸다 포에버',
'다이 하트',
'플레인',
'아바타: 물의 길',
];
}
function something() {
getPopularMovies().then(console.log);
}
something();async는 Promise 객체를 반환하기 때문에, something()가 실행되면, Promise 객체를 then에서 resolve 되어 console에 출력이 된다. Q4. getPopularMovies 함수가 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔로 출력하시오.const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, '외부 API 접근한 결괏값');
});
const catchError = new Promise((_, reject) => {
setTimeout(reject, 3000, '대기 시간이 오래 걸립니다.');
});
Promise.race([getPopularMovies, catchError])
.then((value) => console.log(value))
.catch((error) => console.error(error));getPopularMovies는 1초~5초 후 resolve로 '외부 API 접근한 결괏값'을 출력한다. catchError은 3초 후 reject로 '대기시간이 오래 걸립니다'를 출력한다. Promise.race()는 인자로 객체들을 담은 배열로 받는데, 가장 빨리 실행되는 것이 끝나면 종료된다. 따라서 getPopularMovies가 3초 안에 실행되면 '외부 API가 접근한 결괏값'이 출력될 것이고 3초를 넘게되면 reject가 실행되어 '대기 시간이 오래걸립니다'를 출력하게 될 것이다. |
Beta Was this translation helpful? Give feedback.
-
🐣제로 & 수아의 해설
|
Beta Was this translation helpful? Give feedback.
-
function something () {
getPopularMovies().then((res) => { console.log(res) })
}
something()
const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, '외부 API 접근한 결괏값');
setTimeout(reject, 3000, '대기 시간이 오래 걸립니다');
})
.then((success) => console.log(success))
.catch((reject) => console.error(reject));
|
Beta Was this translation helpful? Give feedback.
-
솔로스타, 레고의 비동기 문제 해설Q1. 왜 1->3->2 순으로 출력되는지 설명하시오.1은 즉시 실행됩니다. Q2. 아래의 함수의 결과값이 도출되는지 설명하시오.
Q3. something 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return ["장화신은 고양이", "똑똑똑", "와칸다 포에버", "다이 하트", "플레인", "아바타: 물의 길"];
}
function something() {
const promise = getPopularMovies();
promise.then((movies) => {
console.log(movies)
}
}
something();
Q4. getPopularMovies 함수가 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔로 출력하시오.function getPopularMovies() {
return new Promise((resolve, reject) => {
const clearTimeouts = () => timeouts.forEach(clearTimeout);
const timeouts = [
setTimeout(() => (resolve("외부 API 접근한 결괏값"), clearTimeouts()), Math.random() * 4000 + 1000),
setTimeout(() => (reject(), console.error('대기 시간이 오래 걸립니다'), clearTimeouts()), 3000),
];
});
}3000ms보다 크면 reject가 되게 하고, 3000ms 보다 적으면 resolve합니다 |
Beta Was this translation helpful? Give feedback.
-
세인, 푸만능 문제 해결Q1. 왜 1->3->2 순으로 출력되는지 설명하시오. Q2. 아래의 함수의 결과값이 도출되는지 설명하시오. 그에 반해 두 번째는 즉시 실행 함수의 매개변수 i의 값을 참조하고 있는데 i는 함수 스코프이므로 즉시 실행 함수의 스코프 i를 참조하게 된다. setTimeout의 콜백 함수 역시 마찬가지로 태스크 큐에 들어간 뒤 콜 스택이 비면 다시 콜 스택으로 이동하여 실행된다. 이때 i는 자유변수이므로 각각의 i의 환경을 참조하여 0에서 9까지의 출력을 나타내게 된다. Q3. getPopularMoives를 출력 해보면 Promise 객체가 도출된다. 즉, getPopularMovies를 실행하면 1초 뒤에 PromiseResult값으로 배열 값이 들어간다. 따라서 실행시킬때는 getPopularMovies를 성공시킨 결과값인 배열을 출력시키기 위해 then을 사용했다. async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return ["장화신은 고양이", "똑똑똑", "와칸다 포에버", "다이 하트", "플레인", "아바타: 물의 길"];
}
function something() {
getPopularMovies().then((result) => console.log(result));
}
something();Q4. getPopularMovives와 타이머의 비동기를 동시 실행, 먼저 완료된 결과값을 출력 하기 위해 race를 활용했다. const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, "외부 API 접근한 결괏값");
});
const timer = new Promise((_, reject) => {
setTimeout(reject, 3000, "대기 시간이 오래걸립니다.");
});
Promise.race([getPopularMovies, timer]).then(console.log).catch(console.error) |
Beta Was this translation helpful? Give feedback.
-
🎯 우디, 클린의 비동기 문제 해설Q1. 왜 1->3->2 순으로 출력되는지 설명하시오.전역 실행 컨텍스트가 콜스택에 push 됩니다 첫 번째 구문은 즉시 실행됩니다 setTimeout 함수 호출에 의해 함수 실행 컨텍스트가 콜스택에 push됩니다 아직 프로그램에 구문이 남아있기 떄문에, 콜스택에는 전역 실행 컨텍스트가 남아있습니다 resolve가 호출됨에 따라 Promise의 콜백함수가 마이크로 테스크 큐에 전달됩니다 콜스택이 비었기 때문에 테스크 큐에서 대기중인 콜백함수가 콜스택에 전달되는데 마이크로 테스크 큐는 메크로 테스크 큐보다 우선순위가 높기 때문에 3 -> 2 순서로 출력됩니다 Q2. 아래의 함수의 결과값이 도출되는지 설명하시오.전역 컨텍스트에 var i++의 명령어가 먼저 실행이 되고, 태스크 큐에 있는 setTimeout에서 i의 값을 참조해서 console을 발생시킴 Q3. something 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return ["장화신은 고양이", "똑똑똑", "와칸다 포에버", "다이 하트", "플레인", "아바타: 물의 길"];
}
function something() {
getPopularMovies().then((movies) => console.log(movies));
}
something();async/await를 사용하게 되면 해당 함수는 Promise 객체를 반환하게 된다 Q4.const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, '외부 API 접근한 결괏값');
});
const timer = new Promise((_, reject) => {
setTimeout(reject, 3 * 1000, '대기 시간이 오래 걸립니다');
});
Promise.race([getPopularMovies, timer]).then(console.log).catch(console.error); |
Beta Was this translation helpful? Give feedback.
-
|
공원과 크론의 해설이군용.. |
Beta Was this translation helpful? Give feedback.
-
네이브와 아이크 비동기 문제 해설1. 왜 1->3->2 순으로 출력되는지 설명하시오.자바스크립트에서 동기적으로 동작하는 코드는 call stack에 들어가고, 비동기적으로 동작하는 코드들은 Task Queue에 보관된다. 콜스택에 있는 작업이 모두 끝나면 web api를 통해 Task Queue에 있는 작업을 수행하는데 Task Queue에는 우선순위가 존재한다.
첫번째줄에서 console.log("1")이 실행되고나면 2. 아래의 함수의 결괏값이 도출되는지 설명하시오.for문이 돌면 setTimeout이 콜스택에 쌓이고 pop되면서 web api가 타이머를 실행시키고 콜백함수는 반면 두번째는 for문이 돌 때마다 i값이 setTimeout의 콜백함수에 담겨서 나중에 콜백함수가 3. something 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.function something() {
getPopularMovies().then(console.log);
}
something();async가 붙은 함수는 무조건 promise를 반환한다. 이때 return값이 있으면 그 값이 promise가 fulfilled됐을 때의 result가 된다. 그래서 getPopularMovies.then()을 통해 resolve의 리턴값을 출력해준다. 4. getPopularMovies 함수가 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔로 출력하시오.const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, "외부 API 접근한 결괏값");
});
const stopFetching = new Promise((resolve, reject) => {
setTimeout(reject, 3000, "대기 시간이 오래 걸립니다");
});
Promise.race([getPopularMovies, stopFetching])
.then((result) => console.log(result))
.catch((error) => console.log(error));promise의 후속메서드 중 race는 여러개의 프로미스 콜백함수의 리턴값 중 가장 빨리 나오는 결괏값만 resolve한다. -> 3초가 되면 에러가 난것이기 때문에 resolve함수가 아니라 reject를 실행한 뒤 Prosime.race의 .catch로 넘어가게 한다. (Promise.race의 에러는 가장 빨리 나온 값이 에러일 때만 에러라고 판단한다.) |
Beta Was this translation helpful? Give feedback.
-
🎯 쿠마, 코난의 비동기 문제 해설Q1. 왜 1->3->2 순으로 출력되는지 설명하시오.키워드: Event Loop, Task Queue, Micro Task Queue console.log("1");
setTimeout(() => console.log("2"));
new Promise((resolve) => resolve()).then(() => {
console.log("3");
});비동기 작업들은 Task Queue와 Micro Task Queue에서 대기중이다.
Call Stack에 있는 작업들이 끝나면 Event Loop 가 Queue들에 있는 작업들을 순서대로 처리한다. 그런데 Micro Task Queue가 Task Queue 보다 우선순위가 높기 때문에, 따라서 1 → 3 → 2로 출력된다. Q2. 아래의 함수의 결괏값이 도출되는지 설명하시오.키워드: 블록레벨스코프, 함수레벨스코프, 클로저, 렉시컬환경 for (var i = 0; i < 10; i++) {
setTimeout(() => console.log(i));// 10이 10번 출력
}for ( i = 0; i < 10; i++) {
(function (i) {
setTimeout(() => console.log(i));// 0 1 2 3 4 5 6 7 8 9
})(i);
}
이렇게 렉시컬 환경을 참조하고있기 때문에 외부 함수가 먼저 종료되어도 외부 함수에 선언되어있던 변수에 접근 가능하다. 이를 다른말로 클로저라고 한다.
하지만 callback이 등록될 때 즉시실행함수의 렉시컬 환경을 참조하게 된다. 따라서 callback을 실행하면 등록될 때의 이런 특성때문에 대신 블록레벨스코프를 가지는 for (let i = 0; i < 10; i++) {
setTimeout(() => console.log(i));// 0 1 2 3 4 5 6 7 8 9
}Q3. something 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.단, 키워드: Promise async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return ["장화신은 고양이", "똑똑똑", "와칸다 포에버", "다이 하트", "플레인", "아바타: 물의 길"];
}
function something() {
getPopularMovies().then(console.log);
}
something();
따라서 Q4. getPopularMovies 함수가 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔로 출력하시오.(단, 3초 이상 지연 시 console.error("대기 시간이 오래 걸립니다");아래의 영역에 코드를 채워 넣고 왜 해당 코드를 넣으면 해결되는지 설명하시오. 코난방식const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, "외부 API 접근한 결괏값");
});
const fetchPopularMovies = () => {
return new Promise((resolve, reject) => {
getPopularMovies.then(resolve);
setTimeout(reject, 3000, new Error('시간 초과'));
});
};
fetchPopularMovies()
.then(console.log)
.catch(console.error);
🧸 쿠마 방식키워드: Promise API const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, "외부 API 접근한 결괏값");
});
const timeout = (promises, ms) => {
return Promise.race([
Promise.all(promises),
new Promise((_, reject) => setTimeout(() => reject('대기 시간이 오래 걸립니다.'), ms)),
])
.then(console.log)
.catch(console.error);
};
timeout([getPopularMovies], 3000);
Promise.race([
Promise.all(promises),
new Promise((_, reject) => setTimeout(() => reject('대기 시간이 오래 걸립니다.'), ms)),
])
.then(console.log)
.catch(console.error);
|
Beta Was this translation helpful? Give feedback.
-
🎯 고니, 아커의 비동기 문제 해설Q1. 왜 1->3->2 순으로 출력되는지 설명하시오.실행 순서
이유1 - 동기적으로 실행되기 때문에 바로 실행됩니다. 3 - 2 - 프로미스가 비동기 객체지만 Q2. 아래의 함수의 결괏값이 도출되는지 설명하시오.첫 번째 함수
두 번째 함수function(i){
var i = i;
setTimeout ...클로저 환경인 IIFE 이므로 동기적으로 실행 후, 비동기 코드 위와 같이 Q3. something 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.async function getPopularMovies() {
await new Promise((resolve) => setTimeout(resolve, 1000));
return [
"장화신은 고양이",
"똑똑똑",
"와칸다 포에버",
"다이 하트",
"플레인",
"아바타: 물의 길",
];
}
function something() {
getPopularMovies().then((resolve) => console.log(resolve));
}
something();이유
Q4. getPopularMovies 함수가 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔로 출력하시오.const getPopularMovies = new Promise((resolve, reject) => {
setTimeout(resolve, Math.random() * 4000 + 1000, "외부 API 접근한 결괏값");
});
const getErrorMessage = new Promise((resolve) => {
setTimeout(resolve, 3000, "대기 시간이 오래 걸립니다");
});
Promise.race([getPopularMovies, getErrorMessage]).then((result) =>
console.log(result)
);이유
|
Beta Was this translation helpful? Give feedback.
and others
-
🏆 페어와 함께하는 비동기 퀴즈 해설지 만들기
Q1. 왜 1->3->2 순으로 출력되는지 설명하시오.
Q2. 아래의 함수의 결괏값이 도출되는지 설명하시오.
죄송해요 여러분.. 퀴즈를 위해 var 한 번만 써보겠습니다.
Q3. something 함수에서 getPopularMovies를 호출한 결괏값을 받아서 console에 출력하시오.
왜 이렇게 짜서 왜 이렇게 작동하는지 설명도 덧붙여야 합니다.
단, something 함수는 async 키워드를 붙일 수 없다.
Q4. getPopularMovies 함수가 3초 이상 지연되면 "대기 시간이 오래 걸립니다"라는 오류 메시지를 콘솔로 출력하시오.
왜 이렇게 짜서 왜 이렇게 작동하는지 설명도 덧붙여야 합니다.
(단, 3초 이상 지연 시 getPopularMovies는 작업이 중단되거나 결괏값은 무시된다.)
아래의 영역에 코드를 채워 넣고 왜 해당 코드를 넣으면 해결되는지 설명하시오.
Beta Was this translation helpful? Give feedback.
All reactions