๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

CS

์ฝœ๋ฐฑ์€ ์™œ ๋ถˆํŽธํ–ˆ์„๊นŒ? ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋น„๋™๊ธฐ์˜ ๋ฐœ์ „ ๊ณผ์ • ํ•œ๋ˆˆ์— ๋ณด๊ธฐ

๋ฐ˜์‘ํ˜•

 

 

 

๐Ÿ“ฆ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ์™„์ „ ์ •๋ณต: Callback → Promise → async/await

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ฐฐ์šฐ๋‹ค ๋ณด๋ฉด ๊ผญ ํ•œ ๋ฒˆ์€ ๋ถ€๋”ชํžˆ๋Š” ๊ฐœ๋…์ด ์žˆ์Šต๋‹ˆ๋‹ค.
๋ฐ”๋กœ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ. ๊ทธ๋ฆฌ๊ณ  ๊ทธ ํ•ต์‹ฌ์€ ์ฝœ๋ฐฑ(callback), ํ”„๋ผ๋ฏธ์Šค(Promise), async/await์ž…๋‹ˆ๋‹ค.

์ด ๊ธ€์—์„œ๋Š” ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ๋ฐฉ์‹์ด ์–ด๋–ป๊ฒŒ ๋ฐœ์ „ํ•ด์™”๋Š”์ง€,
์™œ ์ฝœ๋ฐฑ๋งŒ์œผ๋กœ๋Š” ๋ถ€์กฑํ–ˆ๋Š”์ง€, ๊ทธ๋ฆฌ๊ณ  async/await์ด ์™œ ๊น”๋”ํ•œ์ง€ ๋‹จ๊ณ„๋ณ„๋กœ ์ •๋ฆฌํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

 

 

 

 

โณ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๊ฐ€ ํ•„์š”ํ•œ ์ด์œ 

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋‹จ์ผ ์Šค๋ ˆ๋“œ ๊ธฐ๋ฐ˜ ์–ธ์–ด์˜ˆ์š”.
๊ทธ๋ž˜์„œ ์‹œ๊ฐ„์ด ์˜ค๋ž˜ ๊ฑธ๋ฆฌ๋Š” ์ž‘์—…(์˜ˆ: ์„œ๋ฒ„ ์š”์ฒญ, ํŒŒ์ผ ์ฝ๊ธฐ ๋“ฑ)์„ ๊ทธ๋Œ€๋กœ ์‹คํ–‰ํ•˜๋ฉด ์ „์ฒด๊ฐ€ ๋ฉˆ์ถฐ๋ฒ„๋ ค์š”.

์ด๋ฅผ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ๋ธŒ๋ผ์šฐ์ €๋‚˜ Node.js๋Š” ์ด๋Ÿฐ ์ž‘์—…์„ ๋น„๋™๊ธฐ(Asynchronous)๋กœ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค.
์ฆ‰, “๋‚˜์ค‘์— ๊ฒฐ๊ณผ๊ฐ€ ์˜ค๋ฉด ์•Œ๋ ค์ค˜!” ๋ฐฉ์‹์œผ๋กœ ์ฒ˜๋ฆฌํ•˜๊ฒŒ ๋ผ์š”.

 

โœ… 1. ์ฝœ๋ฐฑ ํ•จ์ˆ˜ (Callback)

๐Ÿ“Œ ๊ฐœ๋…

์ฝœ๋ฐฑ ํ•จ์ˆ˜๋Š” ๋ง ๊ทธ๋Œ€๋กœ,

"์–ด๋–ค ๋‹ค๋ฅธ ํ•จ์ˆ˜์— ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋˜์–ด, ๋‚˜์ค‘์— ์‹คํ–‰๋˜๋Š” ํ•จ์ˆ˜"
์ฆ‰, "ํŠน์ • ์ž‘์—… ๋๋‚˜๋ฉด ์ด ํ•จ์ˆ˜ ์‹คํ–‰ํ•ด์ค˜!" ํ•˜๊ณ  ๋„˜๊ฒจ์ฃผ๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.

 

๐Ÿงช ์ฝœ๋ฐฑ ํ•จ์ˆ˜ ์˜ˆ์‹œ

function doSomething(callback) {
  console.log("์ผ์„ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค...");
  callback(); // ์—ฌ๊ธฐ์„œ ์ „๋‹ฌ๋œ ํ•จ์ˆ˜ ํ˜ธ์ถœ
}

function finish() {
  console.log("์ผ์ด ๋๋‚ฌ์–ด์š”!");
}

doSomething(finish);

์ถœ๋ ฅ ๊ฒฐ๊ณผ:

์ผ์„ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค...
์ผ์ด ๋๋‚ฌ์–ด์š”!
  • finish() ํ•จ์ˆ˜๋Š” doSomething()์— ์ธ์ˆ˜(=callback)๋กœ ์ „๋‹ฌ๋จ
  • ์‹ค์ œ ์‹คํ–‰์€ doSomething() ์•ˆ์—์„œ callback()์œผ๋กœ ์‹คํ–‰๋จ

 

๐Ÿง ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋Š” ์–ธ์ œ ์“ฐ์ด๋‚˜์š”?

์ด์ „ ํฌ์ŠคํŒ…์—๋„ ์ž‘์„ฑํ–ˆ๋“ฏ์ด, ์ฝœ๋ฐฑํ•จ์ˆ˜๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ฒฝ์šฐ์— ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

โœ… 1. ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ(setTimeout, setInterval, fetch(์„œ๋ฒ„ ์‘๋‹ต) ๋“ฑ)
  → ๋‚˜์ค‘์— ์–ด๋–ค ์ผ์ด ์ผ์–ด๋‚˜๋ฉด ์‹คํ–‰ํ•˜๋Š” ๋Œ€ํ‘œ์ ์ธ ์˜ˆ

โœ… 2. ์ด๋ฒคํŠธ ํ•ธ๋“ค๋ง
  → ์‚ฌ์šฉ์ž์˜ ํ–‰๋™(ํด๋ฆญ, ์ž…๋ ฅ ๋“ฑ)์ด ์ผ์–ด๋‚œ ๊ทธ ์‹œ์ ์—๋งŒ ์‹คํ–‰๋˜๋Š” ํ•จ์ˆ˜

โœ… 3. ๋ฐฐ์—ด ๊ณ ์ฐจ ํ•จ์ˆ˜ (map, forEach, filter ๋“ฑ)
  → ๊ฐ ๋ฉ”์„œ๋“œ๋Š” ๋ฐฐ์—ด ์š”์†Œ๋งˆ๋‹ค ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•ด์„œ ์›ํ•˜๋Š” ์ž‘์—…์„ ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 

โš ๏ธ ํ•œ๊ณ„ – ์ฝœ๋ฐฑ ์ง€์˜ฅ (Callback Hell) ๋ฐœ์ƒ

login(user, (userInfo) => {
  getProfile(userInfo, (profile) => {
    getPosts(profile, (posts) => {
      render(posts);
    });
  });
});
  • ์ฝœ๋ฐฑ ์•ˆ์— ์ฝœ๋ฐฑ์ด ๊ณ„์† ์ค‘์ฒฉ → ๊ฐ€๋…์„ฑ ↓, ์—๋Ÿฌ ์ฒ˜๋ฆฌ ์–ด๋ ค์›€
  • ๊ทธ๋ž˜์„œ ๋“ฑ์žฅํ•œ ๊ฒƒ์ด Promise์ž…๋‹ˆ๋‹ค.

์ด๊ฑธ ์ฝœ๋ฐฑ ์ง€์˜ฅ ์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.
๊ทธ๋ž˜์„œ ์ด๋ฅผ ๋ณด์™„ํ•˜๊ณ ์ž ๋‚˜์˜จ๊ฒŒ ๋ฐ”๋กœ Promise, async/await ์ž…๋‹ˆ๋‹ค!

 

๐Ÿ“‹ ์ฝœ๋ฐฑ vs ์ผ๋ฐ˜ ํ•จ์ˆ˜ ์ฐจ์ด

ํ•ญ๋ชฉ ์ผ๋ฐ˜ ํ•จ์ˆ˜ ์ฝœ๋ฐฑ ํ•จ์ˆ˜
์ •์˜ ์œ„์น˜ ๋…๋ฆฝ์ ์œผ๋กœ ์ •์˜๋จ ๋‹ค๋ฅธ ํ•จ์ˆ˜ ์•ˆ์— ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋จ
์‹คํ–‰ ์‹œ์  ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋  ๋•Œ ๋‹ค๋ฅธ ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰ ์ค‘์ผ ๋•Œ "ํ˜ธ์ถœ๋จ"
์šฉ๋„ ์ผ๋ฐ˜ ์—ฐ์‚ฐ, ๋กœ์ง ์ˆ˜ํ–‰ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ, ์กฐ๊ฑด๋ถ€ ์‹คํ–‰ ๋“ฑ

 

๐Ÿ” Bonus: ์ฝœ๋ฐฑ์ด ๊ผญ ๋น„๋™๊ธฐ์ผ ํ•„์š”๋Š” ์—†๋‹ค!

function executeImmediately(callback) {
  callback(); // ์ฆ‰์‹œ ์‹คํ–‰
}

executeImmediately(() => {
  console.log("๋ฐ”๋กœ ์‹คํ–‰๋˜๋Š” ์ฝœ๋ฐฑ!");
});
  • ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋Š” ๋‹จ์ˆœํžˆ "ํ•จ์ˆ˜๋ฅผ ์ „๋‹ฌ๋ฐ›์•˜๋‹ค๊ฐ€ ๋‚˜์ค‘์— ์‹คํ–‰ํ•˜๋Š” ๋ฐฉ์‹" ์ž…๋‹ˆ๋‹ค.
  • ๋”ฐ๋ผ์„œ ๊ผญ ๋น„๋™๊ธฐ์ผ ํ•„์š”๋Š” ์—†์Šต๋‹ˆ๋‹ค.

 

โœ… ์ •๋ฆฌ

๊ตฌ๋ถ„ ์ฝœ๋ฐฑ ํ•จ์ˆ˜
์ •์˜ ๋‹ค๋ฅธ ํ•จ์ˆ˜์— ์ „๋‹ฌ๋˜์–ด ๋‚˜์ค‘์— ํ˜ธ์ถœ๋˜๋Š” ํ•จ์ˆ˜
์šฉ๋„ ๋น„๋™๊ธฐ ์ž‘์—… ์ฒ˜๋ฆฌ, ์ด๋ฒคํŠธ ๋ฐ˜์‘, ๋ฐฐ์—ด ์ˆœํšŒ ๋“ฑ
์žฅ์  ์œ ์—ฐํ•œ ํ•จ์ˆ˜ ์‹คํ–‰, ์กฐ๊ฑด๋ถ€ ํ๋ฆ„ ์ œ์–ด
๋‹จ์  ์ฝœ๋ฐฑ ์ง€์˜ฅ ๋ฐœ์ƒ ๊ฐ€๋Šฅ, ์—๋Ÿฌ ์ฒ˜๋ฆฌ ์–ด๋ ค์›€
๋Œ€ํ‘œ ์˜ˆ์‹œ setTimeout, fetch, addEventListener, map, forEach ๋“ฑ

 

 

โœ… 2. Promise

๐Ÿ“Œ ๊ฐœ๋…

Promise๋Š” ๋น„๋™๊ธฐ ์ž‘์—…์˜ ์„ฑ๊ณต/์‹คํŒจ ๊ฒฐ๊ณผ๋ฅผ ๋‹ด๋Š” “์•ฝ์† ๊ฐ์ฒด์˜ˆ์š”.

์‚ฌ์šฉ๋ฒ•

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('์„ฑ๊ณต!');
    // ํ˜น์€ reject('์—๋Ÿฌ ๋ฐœ์ƒ!');
  }, 1000);
});

 

๐Ÿงช ์‚ฌ์šฉ ์˜ˆ์‹œ

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('๋ฐ์ดํ„ฐ ๋„์ฐฉ!');
    }, 1000);
  });
}

fetchData()
  .then((result) => console.log(result))  // ์„ฑ๊ณต
  .catch((err) => console.error(err));    // ์‹คํŒจ

 

โœ” ์žฅ์ 

  • ์ค‘์ฒฉ ์—†์ด .then()์œผ๋กœ ์ฒด์ด๋‹ ๊ฐ€๋Šฅ
  • .catch()๋กœ ์—๋Ÿฌ ์ฒ˜๋ฆฌ ๋ถ„๋ฆฌ ๊ฐ€๋Šฅ

โš ๏ธ ๋‹จ์ 

  • .then().then().then() ํ˜•ํƒœ๋„ ์—ฌ์ „ํžˆ ๋ณด๊ธฐ ๋ถˆํŽธํ•  ์ˆ˜ ์žˆ์Œ
    → ๊ทธ๋ž˜์„œ ๋“ฑ์žฅํ•œ ๊ฒƒ์ด async/await

 

โœ… 3. async / await

๐Ÿ“Œ ๊ฐœ๋…

async ํ‚ค์›Œ๋“œ๋ฅผ ํ•จ์ˆ˜์— ๋ถ™์ด๋ฉด, ๊ทธ ํ•จ์ˆ˜๋Š” Promise๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜๊ฐ€ ๋ฉ๋‹ˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  ๊ทธ ์•ˆ์—์„œ await์„ ์“ฐ๋ฉด, ๋น„๋™๊ธฐ ๊ฒฐ๊ณผ๋ฅผ ๋งˆ์น˜ ๋™๊ธฐ์ฒ˜๋Ÿผ ๊ธฐ๋‹ค๋ฆด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

๐Ÿงช ์‚ฌ์šฉ ์˜ˆ์‹œ

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('๋ฐ์ดํ„ฐ ๋„์ฐฉ!');
    }, 1000);
  });
}

async function getData() {
  try {
    const result = await fetchData();  // ๋น„๋™๊ธฐ ์ž‘์—… ๋๋‚  ๋•Œ๊นŒ์ง€ ๊ธฐ๋‹ค๋ฆผ
    console.log(result);
  } catch (err) {
    console.error(err);
  }
}

getData();

 

โœ” ์žฅ์ 

  • ์ฝ”๋“œ๊ฐ€ ๊น”๋”ํ•˜๊ณ  ๊ฐ€๋…์„ฑ ์ข‹์Œ
  • ๋งˆ์น˜ ๋™๊ธฐ ์ฝ”๋“œ์ฒ˜๋Ÿผ ํ๋ฆ„์ด ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ๋ณด์ž„
  • try-catch๋กœ ์—๋Ÿฌ ์ฒ˜๋ฆฌ๋„ ํŽธํ•จ

 

๐Ÿง  ์ •๋ฆฌ: ์„ธ ๊ฐ€์ง€ ๋ฐฉ์‹ ๋น„๊ต

๊ตฌ๋ถ„ ์ฝœ๋ฐฑ Promise async/await
๋„์ž… ์‹œ๊ธฐ ๊ฐ€์žฅ ๊ธฐ๋ณธ ES6 ES2017 (ES8)
๊ฐ€๋…์„ฑ โŒ ์ฝœ๋ฐฑ ์ง€์˜ฅ ๋ฐœ์ƒ โœ… ๊ฐœ์„ ๋จ โœ… ์ตœ๊ณ 
์—๋Ÿฌ ์ฒ˜๋ฆฌ ์–ด๋ ต๊ณ  ๋ณต์žก .catch()๋กœ ๋ถ„๋ฆฌ ๊ฐ€๋Šฅ try/catch ์‚ฌ์šฉ
๋™๊ธฐ ์ฝ”๋“œ์ฒ˜๋Ÿผ ๋ณด์ด๋‚˜์š”? โŒ โŒ โœ…
๋Œ€ํ‘œ ์‚ฌ์šฉ์ฒ˜ ์ด๋ฒคํŠธ, setTimeout fetch, axios ๋ชจ๋“  ๋น„๋™๊ธฐ ํ•จ์ˆ˜

 

 

๐Ÿ” ์ฝœ๋ฐฑ์—์„œ ์‹œ์ž‘ํ•ด async/await๊นŒ์ง€: ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ๋ฆฌํŒฉํ„ฐ๋ง ํ•ด๋ณด๊ธฐ

โœ… 1. ์ฝœ๋ฐฑ(callback) ๋ฐฉ์‹

function login(user, callback) {
  setTimeout(() => {
    console.log('โœ… ๋กœ๊ทธ์ธ ์™„๋ฃŒ');
    callback({ id: 1, name: user });
  }, 1000);
}

function getUserInfo(user, callback) {
  setTimeout(() => {
    console.log('๐Ÿ‘ค ์œ ์ € ์ •๋ณด ๊ฐ€์ ธ์˜ค๊ธฐ ์™„๋ฃŒ');
    callback({ ...user, age: 25 });
  }, 1000);
}

function getPosts(userInfo, callback) {
  setTimeout(() => {
    console.log('๐Ÿ“ ๊ฒŒ์‹œ๊ธ€ ๊ฐ€์ ธ์˜ค๊ธฐ ์™„๋ฃŒ');
    callback([`๊ฒŒ์‹œ๊ธ€ 1 by ${userInfo.name}`, `๊ฒŒ์‹œ๊ธ€ 2 by ${userInfo.name}`]);
  }, 1000);
}

// ์ฝœ๋ฐฑ ์ง€์˜ฅ ์‹œ์ž‘
login('๋‹ค์€', (user) => {
  getUserInfo(user, (userInfo) => {
    getPosts(userInfo, (posts) => {
      console.log('๐Ÿ“ฆ ์ตœ์ข… ๊ฒฐ๊ณผ:', posts);
    });
  });
});

โŒ ๋ฌธ์ œ์ 

  • ์ค‘์ฒฉ์ด ๊นŠ์–ด์ ธ์„œ ๊ฐ€๋…์„ฑ์ด ๋‚˜๋น ์ง€๊ณ ,
  • ํ๋ฆ„ ํŒŒ์•…์ด ์–ด๋ ต๊ณ ,
  • ์—๋Ÿฌ ์ฒ˜๋ฆฌ๊ฐ€ ๋งค์šฐ ๋ณต์žกํ•จ

 

โœ… 2. Promise ๋ฐฉ์‹์œผ๋กœ ๊ฐœ์„ 

function login(user) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('โœ… ๋กœ๊ทธ์ธ ์™„๋ฃŒ');
      resolve({ id: 1, name: user });
    }, 1000);
  });
}

function getUserInfo(user) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('๐Ÿ‘ค ์œ ์ € ์ •๋ณด ๊ฐ€์ ธ์˜ค๊ธฐ ์™„๋ฃŒ');
      resolve({ ...user, age: 25 });
    }, 1000);
  });
}

function getPosts(userInfo) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('๐Ÿ“ ๊ฒŒ์‹œ๊ธ€ ๊ฐ€์ ธ์˜ค๊ธฐ ์™„๋ฃŒ');
      resolve([`๊ฒŒ์‹œ๊ธ€ 1 by ${userInfo.name}`, `๊ฒŒ์‹œ๊ธ€ 2 by ${userInfo.name}`]);
    }, 1000);
  });
}

// then ์ฒด์ด๋‹
login('๋‹ค์€')
  .then(getUserInfo)
  .then(getPosts)
  .then((posts) => {
    console.log('๐Ÿ“ฆ ์ตœ์ข… ๊ฒฐ๊ณผ:', posts);
  })
  .catch((err) => {
    console.error('์—๋Ÿฌ ๋ฐœ์ƒ:', err);
  });

๐Ÿงš‍โ™‚๏ธ ๊ฐœ์„ ์ 

  • ์ค‘์ฒฉ ์—†์ด ์ง๊ด€์ ์ธ ํ๋ฆ„
  • .catch()๋กœ ์—๋Ÿฌ ์ฒ˜๋ฆฌ ๋ถ„๋ฆฌ ๊ฐ€๋Šฅ

 

โœ… 3. async/await ๋ฐฉ์‹์œผ๋กœ ๋ฆฌํŒฉํ„ฐ๋ง

async function fetchUserPosts() {
  try {
    const user = await login('๋‹ค์€');
    const userInfo = await getUserInfo(user);
    const posts = await getPosts(userInfo);
    console.log('๐Ÿ“ฆ ์ตœ์ข… ๊ฒฐ๊ณผ:', posts);
  } catch (err) {
    console.error('์—๋Ÿฌ ๋ฐœ์ƒ:', err);
  }
}

fetchUserPosts();

โœ… ์žฅ์ 

  • ์ฝ”๋“œ๊ฐ€ ๋™๊ธฐ ํ๋ฆ„์ฒ˜๋Ÿผ ์ž์—ฐ์Šค๋Ÿฝ๊ณ  ์ฝ๊ธฐ ์‰ฌ์›€
  • try/catch๋กœ ์—๋Ÿฌ ์ฒ˜๋ฆฌ๋„ ๊ฐ„๊ฒฐ

 

โœจ ์ฝœ๋ฐฑ → Promise → async/await

๋ฐฉ์‹ ์ฝ”๋“œ ๊ตฌ์กฐ ์—๋Ÿฌ ์ฒ˜๋ฆฌ ๊ฐ€๋…์„ฑ ์œ ์ง€ ๋ณด์ˆ˜
์ฝœ๋ฐฑ ์ค‘์ฒฉ ๊ตฌ์กฐ (์ง€์˜ฅ) ๋ณต์žก โŒ โŒ
Promise ์ฒด์ด๋‹ .catch() โ–ณ โ–ณ
async/await ๋™๊ธฐ ํ๋ฆ„์ฒ˜๋Ÿผ try/catch โœ… โœ…

 

 

 

 


โœจ ๋งˆ๋ฌด๋ฆฌ

๋น„๋™๊ธฐ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ๋•Œ ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๊ฑด ์ฝ”๋“œ์˜ ํ๋ฆ„์„ ์ฝ๊ธฐ ์‰ฝ๊ฒŒ ๋งŒ๋“œ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.
์ฝœ๋ฐฑ์€ ๊ฐ„๋‹จํ•œ ๋กœ์ง์—์„œ๋Š” ์œ ์šฉํ•˜์ง€๋งŒ, ์กฐ๊ธˆ๋งŒ ๋ณต์žกํ•ด์ง€๋ฉด ๊ธˆ์„ธ ์ง€์˜ฅ์„ ๋ณด์—ฌ์ฃผ์ฃ .

 

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋Š” ํ•„์ˆ˜์ž…๋‹ˆ๋‹ค.
์ฝœ๋ฐฑ → Promise → async/await์œผ๋กœ ์ ์  ๋” ์ฝ๊ธฐ ์‰ฝ๊ณ  ์œ ์ง€๋ณด์ˆ˜ ์ข‹์€ ์ฝ”๋“œ๋กœ ๋ฐœ์ „ํ•ด์™”์–ด์š”.
์ง€๊ธˆ๋ถ€ํ„ฐ๋Š” async/await์ด ํ‘œ์ค€์ฒ˜๋Ÿผ ์‚ฌ์šฉ๋˜์ง€๋งŒ, ์ด ํ๋ฆ„์„ ์ดํ•ดํ•˜๋Š” ๊ฒŒ ์ง„์งœ ์‹ค๋ ฅ์„ ๋งŒ๋“ค์–ด์ค๋‹ˆ๋‹ค.

 

 

๋ฐ˜์‘ํ˜•