단원 연습 문제

11단원 '비동기'의 여섯 레슨에서 아홉 문제를 내고, 1~10단원에서 세 문제를 섞었습니다. 마지막 두 문제는 코드를 직접 짜 봅니다.

한 번에 다 풀 필요는 없습니다. 문제 1~10은 폰으로도 풀 수 있고(약 30~40분), 끝의 만들어 보기 둘은 컴퓨터에서 Node로 직접 돌려 봅니다. 이 단원을 건너뛰어도 되는지 보려면 문제 2, 4, 6, 8, 10 다섯 문제만 먼저 풀어 보세요(약 15분). 건너뛸지 볼 때는 힌트를 펴지 않고 풉니다. 다섯 문제를 모두 맞히면 12단원으로 넘어가고, 하나라도 헷갈리면 정답의 '다시 볼 레슨'을 먼저 봅니다. 파이썬을 배웠다면 파이썬과 달라지는 곳이 이 다섯 문제에 들어 있습니다(정답의 '파이썬에서는' 줄). 끝의 만들어 보기 둘은 골라서 풉니다.

끝의 두 문제는 프로그램을 직접 만들어 봅니다. 글만 읽고 넘어가지 말고, 컴퓨터에서 작업 폴더의 main.js에 옮겨 적고 터미널에서 node main.js로 돌려 보세요. 실행 결과는 모두 Node 26으로 돌린 것입니다.

문제 1

0밀리초 타이머를 걸고 아랫줄을 실행합니다. 출력되는 세 줄을 마지막 줄까지 쓰세요.

console.log(1);
setTimeout(() => {
  console.log(2);
}, 0);
console.log(3);

1
3
2

문제 2

new Promise를 만들고 .then을 두 번 이어 붙입니다. 출력되는 세 줄을 순서대로 쓰세요.

const p = new Promise(
  (resolve) => {
    console.log('1. 상자 생성');
    resolve(10);
  },
);
p.then((n) => n * 3).then(
  (res) => {
    console.log('3. 결과:', res);
  },
);
console.log('2. 바깥 끝');

1. 상자 생성
2. 바깥 끝
3. 결과: 30

문제 3

도장 카드의 add 메서드를 화살표 함수로 감싸 setTimeout에 넘깁니다. 출력되는 두 줄을 쓰세요.

class Card {
  constructor() {
    this.stamps = 1;
  }
  add() {
    this.stamps += 2;
    console.log(this.stamps);
  }
}
const c = new Card();
setTimeout(() => c.add(), 10);
console.log(c.stamps);

1
3

문제 4

0밀리초 타이머와 Promise.resolve().then⁠이 함께 있습니다. 출력되는 네 줄을 순서대로 쓰세요.

setTimeout(() => {
  console.log('타이머');
}, 0);
Promise.resolve()
  .then(() => {
    console.log('then 1');
  })
  .then(() => {
    console.log('then 2');
  });
console.log('동기');

동기
then 1
then 2
타이머

문제 5

음수를 만나면 오류를 던지는 함수를 try / catch / finally 안에서 부릅니다. 출력되는 두 줄을 쓰세요.

function check(n) {
  if (n < 0) {
    throw new Error('음수 불가');
  }
  return n * 2;
}
try {
  console.log(check(-3));
  console.log(check(5));
} catch (e) {
  console.log(e.message);
} finally {
  console.log('종료');
}

음수 불가
종료

문제 6

async 함수 work()를 부르고 바깥 줄을 이어서 실행합니다. 출력되는 세 줄을 순서대로 쓰세요.

async function work() {
  console.log('A');
  const v =
    await Promise.resolve('B');
  console.log(v);
}
work();
console.log('C');

A
C
B

문제 7

async 함수 안에서 던진 오류를 await와 try / catch로 잡습니다. 출력되는 두 줄을 쓰세요.

async function take(qty) {
  if (qty <= 0) {
    throw new Error('수량 오류');
  }
  return qty * 1000;
}
try {
  console.log(await take(2));
  console.log(await take(0));
} catch (e) {
  console.log(e.message);
}

2000
수량 오류

문제 8

상태 번호가 404인 응답 객체 res를 검사합니다. 출력되는 두 줄을 쓰세요.

const res = new Response(
  '없음',
  { status: 404 },
);
console.log(res.ok, res.status);
if (!res.ok) {
  console.log('다시 확인');
} else {
  console.log('정상 처리');
}

false 404
다시 확인

문제 9

두 Promise를 Promise.all로 함께 기다린 뒤 reduce로 합계를 구합니다. 출력되는 한 줄을 쓰세요.

const p1 =
  Promise.resolve(4500);
const p2 =
  Promise.resolve(2000);
const list = await Promise.all([
  p1,
  p2,
]);
const sum = list.reduce(
  (acc, cur) => acc + cur,
  0,
);
console.log(sum);

6500

문제 10

fail()이 던진 '연결 실패' 오류를 잡아 '연결 실패' 한 줄만 찍혀야 하는데, 아래 코드는 catch가 잡지 못하고 멈췄습니다. 몇 번 줄을 어떻게 고쳐야 할까요? 한 줄만 고쳐, 고친 줄을 쓰세요.

async function fail() {
  throw new Error('연결 실패');
}
try {
  fail();
} catch (e) {
  console.log(e.message);
}

main.js:2  throw new Error('연결 실패');        ^ Error: 연결 실패    at fail (main.js:2:9)    at main.js:5:3

async function fail() {
  throw new Error('연결 실패');
}
try {
  await fail();
} catch (e) {
  console.log(e.message);
}

연결 실패

문제 11 (만들어 보기)

응답 객체 res를 받아 res.ok가 거짓이면 new Error('실패')를 던지고, 참이면 await res.json()으로 본문 객체를 꺼내 d.price를 돌려주는 async 함수 read(res)의 몸통을 채우세요. 이렇게 나와야 합니다.

4500
실패

첫 번째 시험 값의 4500을 3000으로 바꾸면 이렇게 나와야 합니다.

3000
실패

아래 뼈대에서 주석 둘 아래를 채우세요.

async function read(res) {
  // 1. !res.ok이면 '실패' 던지기

  // 2. JSON 꺼내 price 돌려주기
}

이어서 정상 응답과 404 응답을 넣어 확인합니다.

const ok = Response.json({
  price: 4500,
});
const bad = new Response(
  '없음',
  { status: 404 },
);
for (const r of [ok, bad]) {
  try {
    console.log(await read(r));
  } catch (e) {
    console.log(e.message);
  }
}

async function read(res) {
  if (!res.ok) {
    throw new Error('실패');
  }
  const d = await res.json();
  return d.price;
}

const ok = Response.json({
  price: 4500,
});
const bad = new Response(
  '없음',
  { status: 404 },
);
for (const r of [ok, bad]) {
  try {
    const p = await read(r);
    console.log(p);
  } catch (e) {
    console.log(e.message);
  }
}

4500
실패

문제 12 (만들어 보기)

이번에는 빈 데서 async 함수를 직접 씁니다. 두 Promise p1과 p2를 인자로 받아 Promise.all로 함께 기다린 뒤, 두 결과 숫자의 합계를 돌려주는 async 함수 both(p1, p2)를 작성하세요. 이렇게 나와야 합니다.

6500

시험 값을 Promise.resolve(1000)⁠과 Promise.resolve(2500)⁠으로 바꾸면 3500이 나와야 합니다.

3500

아래 칸의 위쪽에 both 함수를 쓰세요.

// async 함수 both 쓰기

const a =
  Promise.resolve(4500);
const b =
  Promise.resolve(2000);
const sum = await both(a, b);
console.log(sum);

async function both(p1, p2) {
  const list = [p1, p2];
  const [x, y] =
    await Promise.all(list);
  return x + y;
}
const a =
  Promise.resolve(4500);
const b =
  Promise.resolve(2000);
const sum = await both(a, b);
console.log(sum);

6500

틀린 문제는 그 레슨으로 돌아가 모션 그림과 '자주 틀리는 곳'을 보고, 하루쯤 지난 뒤 그 문제만 다시 풀어 보세요. 그날 바로 다시 풀면 방금 본 정답이 기억나 맞힌 것인지 알기 어렵습니다.