[TIL๐Ÿ”ฅ]Day9(8/12)

dasssseulยท2021๋…„ 8์›” 13์ผ
0

Today I Learned

๋ชฉ๋ก ๋ณด๊ธฐ
9/22
post-thumbnail

Introduction

์–ด์ œ ๊ณผ์ œ๋กœ ๊ธด ํ•˜๋ฃจ๋ฅผ ๋ณด๋‚ด๋‹ค๋ณด๋‹ˆ TIL์„ ์ ์ง€ ๋ชปํ–ˆ๋‹ค. ๋‚˜์ž์‹  ๋ฐ˜์„ฑํ•ด๋ผ...๐Ÿ˜–
๊ทธ๋ฆฌ๊ณ  ์–ด์ œ ์ƒ์ผ์ด์—ˆ๋Š”๋ฐ ์ƒˆ๋ฒฝ๊นŒ์ง€ ์ฝ”๋”ฉ์„ ํ–ˆ๋˜๊ฒŒ ๋”ฑํžˆ ์‹ซ์ง€๋งŒ์€ ์•Š์•˜๋‹ค.
์˜ค๋Š˜ ์˜ค์ „์— ๊ณผ์ œ๋ฅผ ๋๋‚ด์„œ ๊ทธ๋Ÿฐ๊ฐ€ ๋งˆ์Œ์ด ๋ฟŒ๋“ฏํ•˜๋‹ค.
๋˜ ์–ด์ œ ๋น„๋Œ€๋ฉด์ด์ง€๋งŒ ๊ฒŒ๋”์—์„œ ์ƒ์ผ ์ถ•ํ•˜๋ฅผ ํ•ด์ค€ ํŒ€์›๋“ค์—๊ฒŒ ๋„ˆ๋ฌด ๊ณ ๋ง™๋‹ค.
ํ•  ์ผ์ด ๋งŽ์•„ ๋ฐ”์ ํ…๋ฐ ์ƒ์ผ๊นŒ์ง€ ์ฑ™๊ฒจ์ฃผ๋‹ค๋‹ˆ ๋งˆ์Œ์ด ๋”ฐ๋œปํ•ด์กŒ๋‹ค.
์—ญ์‹œ๋‚˜ ๊ณ์— ์žˆ๋Š” ์‚ฌ๋žŒ, ์นœ๊ตฌ์˜ ์ค‘์š”์„ฑ์„ ํ•œ๋ฒˆ ๋” ๋Š๊ผˆ๋‹ค.


์˜ค๋Š˜ ์ƒˆ๋กญ๊ฒŒ ๋ฐฐ์šด ๊ฒƒ

๊ณผ์ œ๋กœ ์ธํ•ด ๊ฐ•์˜๋ฅผ ๋งŽ์ด ๋“ฃ์ง€๋Š” ๋ชปํ–ˆ์ง€๋งŒ, ์ด์ œ ๋น„๋™๊ธฐ/๋™์‹œ์„ฑ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ํŒŒํŠธ๋กœ ๋„˜์–ด๊ฐ”๋‹ค.

1. ๋น„๋™๊ธฐ๋ฅผ ๊ฐ’์œผ๋กœ ๋งŒ๋“œ๋Š” Promise
2. ํ•ฉ์„ฑ ๊ด€์ ์—์„œ์˜ Promise์™€ ๋ชจ๋‚˜๋“œ
3. Kleisli Composition


๋น„๋™๊ธฐ ๊ด€๋ จ ์ค‘์š”ํ•œ ๊ฐœ๋…๋“ค์„ ๋ฐฐ์šฐ๋Š” ๋งŒํผ ํ™•์‹คํžˆ ์ตํžˆ๋„๋ก ๋…ธ๋ ฅํ•ด์•ผ๊ฒ ๋‹ค.

๐ŸŽ‰ ๋น„๋™๊ธฐ๋ฅผ ๊ฐ’์œผ๋กœ ๋งŒ๋“œ๋Š” Promise

ES6์˜ Promise๊ฐ€ ๋‚˜์˜ค๊ธฐ ์ „์—๋Š” ์—ฐ์†์ ์ธ ๋น„๋™๊ธฐ ์ž‘์—…์ด ํ•„์š”ํ•  ๋•Œ callback์„ ์‚ฌ์šฉํ–ˆ์—ˆ๋‹ค.

Callback

  • ๋‹ค๋ฅธ ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰์„ ๋๋‚ธ ๋’ค ์‹คํ–‰๋˜๋Š” ํ•จ์ˆ˜
// ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•œ callback
function add10(a, callback) {
  setTimeout(() => callback(a + 10), 100);
}

// ์—ฐ์†์ ์ธ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ
add10(5, (res) => {
  add10(res, (res) => {
    add10(res, (res) => {
      console.log(res); // 35
    });
  });
});

์—ฐ์†์ ์ธ ๋น„๋™๊ธฐ๋ฅผ ์ฒ˜๋ฆฌํ•  ๋•Œ ์œ„์™€ ๊ฐ™์ด callback์„ ๊ณผ๋„ํ•˜๊ฒŒ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด,
callback ์ง€์˜ฅ์— ๋น ์งˆ ์ˆ˜ ์žˆ๋‹ค.
๋˜ํ•œ, ๊ฐ€๋…์„ฑ์ด ๋งค์šฐ ๋–จ์–ด์ง€๊ณ  ๋””๋ฒ„๊น… ์—ญ์‹œ ๋งค์šฐ ์–ด๋ ค์›Œ์ง„๋‹ค.

Promise

  • ๋น„๋™๊ธฐ ์ƒํ™ฉ์„ ๋Œ€๊ธฐ, ์ดํ–‰, ๊ฑฐ๋ถ€์˜ ์ƒํƒœ๋กœ ๋ฌ˜์‚ฌํ•˜๊ณ  ์ด๋ฅผ ๊ฐ’์œผ๋กœ ํ• ๋‹น์ด ๊ฐ€๋Šฅํ•œ ๊ฐ์ฒด์˜ ํ˜•ํƒœ๋กœ ํ‘œํ˜„
// ES6์—์„œ ๋“ฑ์žฅํ•œ Promise
function add20(a) {
  return new Promise((resolve) => 
  	setTimeout(() => resolve(a + 20), 100))};

add20(5)
	.then(add20)
	.then(add20)
	.then(console.log); // 65

promise ๊ฐ์ฒด์˜ ๋ฉ”์„œ๋“œ์ธ then()์„ ์ด์šฉํ•ด ํ˜ธ์ถœ์ด ๊ฐ€๋Šฅํ•˜๋ฉฐ,
๋น„๋™๊ธฐ ์ž‘์—…์„ ์ถ”์ƒํ™”ํ•œ ๊ฐ์ฒด์ด๊ธฐ ๋•Œ๋ฌธ์— ํ˜„์žฌ ์–ด๋–ค ์ƒํƒœ์ธ์ง€ ์‰ฝ๊ฒŒ ํ™•์ธ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.


Comment

๊ฐ•์˜๋ฅผ ๋ฐ€๋ฆฌ์ง€์•Š๊ณ  ๋“ค์œผ๋ ค๊ณ  ๋…ธ๋ ฅํ•˜๋Š”๋ฐ ์‰ฝ์ง€๊ฐ€ ์•Š๋‹ค...
์ฃผ๋ง์— ๋ฐ€๋ฆฐ ๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ , ์•„ํ‹ฐํด๋„ ์ตœ์†Œ 1๊ฐœ๋Š” ์ž‘์„ฑํ•ด์•ผ๊ฒ ๋‹ค...
๊ณ„์†ํ•ด์„œ ์ž ์ž๋Š” ์‹œ๊ฐ„์ด ๋Šฆ์–ด์ง€๋Š”๋ฐ 5๊ฐœ์›”์„ ๋ฒ„ํ‹ฐ๋ ค๋ฉด ๊ทœ์น™์ ์ธ ์Šต๊ด€์„ ๋“ค์ด๊ธดํ•ด์•ผ๊ฒ ๋‹ค. ํ•ญ์ƒ ๋ฐ˜์„ฑ๋งŒ ํ•˜๋Š” TIL์ด๋‹ค ๐Ÿ˜…

profile
์ธ์ƒ์€ ์šฉ๊ธฐ์˜ ์–‘์— ๋”ฐ๋ผ ์ค„์–ด๋“ค๊ฑฐ๋‚˜, ๋Š˜์–ด๋‚œ๋‹ค

0๊ฐœ์˜ ๋Œ“๊ธ€