์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

๋– ๋จน๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋น„๋™๊ธฐ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋™๊ธฐ/๋น„๋™๊ธฐ ๊ฐœ๋…๋ถ€ํ„ฐ Promise, async/await ๋“ฑ ์ตœ์‹  ๋ฌธ๋ฒ•์„ ๋‹ด์€ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ๋ฐฉ์‹๊ณผ ์‹ค์ „ HTTP ํ†ต์‹ ๊นŒ์ง€ ์ฒด๊ณ„์ ์œผ๋กœ ํ•™์Šตํ•˜๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

Thumbnail

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[๋ฐฑ์—”๋“œ, JavaScript] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์˜ ๋™์ž‘ ์›๋ฆฌ์™€ ๋Ÿฐํƒ€์ž„ ํ™˜๊ฒฝ

  • Promise, async/await๋ฅผ ์ด์šฉํ•œ ๋น„๋™๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ

  • Fetch API๋ฅผ ํ™œ์šฉํ•œ ์‹ค์ „ HTTP ํ†ต์‹ 

  • ๋น„๋™๊ธฐ ์ฝ”๋“œ์˜ ์—๋Ÿฌ ์ฒ˜๋ฆฌ

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ <๋– ๋จน๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋น„๋™๊ธฐ>

1โƒฃ ๋น„๋™๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์™„๋ฒฝ ์ดํ•ด

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋™์ž‘ ์›๋ฆฌ๊ฐ€ ๊ถ๊ธˆํ•˜์‹ ๊ฐ€์š”? ๋น„๋™๊ธฐ์— ๋Œ€ํ•ด ๋ฐฐ์›Œ๋ณด๊ณ  ์‹ถ์œผ์‹ ๊ฐ€์š”? ๋น„๋™๊ธฐ ๋™์ž‘ ์›๋ฆฌ๋ถ€ํ„ฐ ๋น„๋™๊ธฐ ์ œ์–ด, ๋น„๋™๊ธฐ ํ†ต์‹ ๊นŒ์ง€ ๋น„๋™๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ์ „๋ฐ˜์„ ํ•™์Šตํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์˜ ๋™์ž‘ ์›๋ฆฌ ์ดํ•ด

  • Web API, ์ฝœ๋ฐฑ ํ, ์ด๋ฒคํŠธ ๋ฃจํ”„์˜ ์ƒํ˜ธ์ž‘์šฉ ํ•™์Šต

  • ์ฝ”๋“œ์˜ ์‹คํ–‰ ์ˆœ์„œ๋ฅผ ์‹œ๊ฐ์ ์œผ๋กœ ๋ฐฐ์šฐ๋Š” ๋น„๋™๊ธฐ์˜ ๊ฐœ๋…

2โƒฃ ์‹ค๋ฌด์— ๊ฐ•ํ•œ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ ์„ฑ์žฅ

์‹ค๋ฌด์—์„œ ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ๋น„๋™๊ธฐ ์ œ์–ด ํŒจํ„ด๊ณผ ์‹ค์ „ API ํ†ต์‹ ์„ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์ฝœ๋ฐฑ ํ•จ์ˆ˜์˜ ํ•œ๊ณ„์™€ Promise๋ฅผ ํ†ตํ•œ ํ•ด๊ฒฐ

  • Promise์˜ ์ƒํƒœ(pending, fulfilled, rejected) ๊ด€๋ฆฌ

  • async/await๋ฅผ ํ™œ์šฉํ•œ ์ง๊ด€์ ์ธ ๋น„๋™๊ธฐ ์ œ์–ด

  • fetch API๋ฅผ ํ†ตํ•œ ์‹ค์ „ HTTP ํ†ต์‹  ๊ตฌํ˜„

3โƒฃ ๊ธฐ์ˆ  ๋ฉด์ ‘ ๋‹จ๊ณจ ์งˆ๋ฌธ ์™„๋ฒฝ ๋‹ต๋ณ€

๋ฉด์ ‘ ๋‹จ๊ณจ ์งˆ๋ฌธ์ธ "์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ๋ฐฉ์‹์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ด์ฃผ์„ธ์š”", ์ด ์งˆ๋ฌธ์— ์ž์‹ ์žˆ๊ฒŒ ๋‹ต๋ณ€ํ•˜์„ธ์š”!

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋Ÿฐํƒ€์ž„ ํ™˜๊ฒฝ์˜ ๋™์ž‘ ๋ฐฉ์‹ ์„ค๋ช…

  • ๋งˆ์ดํฌ๋กœํƒœ์Šคํฌ ํ์™€ ๋งคํฌ๋กœํƒœ์Šคํฌ ํ์˜ ์šฐ์„ ์ˆœ์œ„ ์ดํ•ด

  • Promise์™€ ์ฝœ๋ฐฑ ํ•จ์ˆ˜์˜ ์ฐจ์ด์  ๋ฐ ์žฅ๋‹จ์  ํŒŒ์•…

  • HTTP ์ƒํƒœ ์ฝ”๋“œ์™€ ์—๋Ÿฌ ์ฒ˜๋ฆฌ ๋ฐฉ๋ฒ• ์ˆ™์ง€

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜ ์ถ”์ฒœํ•ด์š”

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ๋ณธ๊ธฐ๋Š” ์žˆ์ง€๋งŒ ๋น„๋™๊ธฐ ๊ฐœ๋…์ด ์–ด๋ ค์šฐ์‹  ๋ถ„

  • ์‹ค๋ฌด์—์„œ API ํ†ต์‹ ์„ ๋‹ค๋ฃจ๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž

  • ๊ธฐ์ˆ  ๋ฉด์ ‘์„ ์•ž๋‘๊ณ  ๋น„๋™๊ธฐ ๊ฐœ๋…์„ ํƒ„ํƒ„ํžˆ ๋‹ค์ง€๊ณ  ์‹ถ์œผ์‹  ๋ถ„


์ˆ˜๊ฐ• ํ›„์—๋Š”

โœ… ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„๊ณผ ๋Ÿฐํƒ€์ž„์˜ ๋™์ž‘ ์›๋ฆฌ๋ฅผ ๋ช…ํ™•ํ•˜๊ฒŒ ์ดํ•ดํ•˜๊ณ  ์„ค๋ช…ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

โœ… ์ฝœ๋ฐฑ๋ถ€ํ„ฐ Promise, async/await๊นŒ์ง€ ์ƒํ™ฉ์— ๋งž๋Š” ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ๋ฐฉ์‹์„ ์„ ํƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

โœ… HTTP ํ†ต์‹ ์˜ ํ๋ฆ„์„ ์ดํ•ดํ•˜๊ณ  ์‹ค์ „ API๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ๊ฐ•์˜์˜ ํŠน์ง•

ํ•ต์‹ฌ ํŠน์ง•๊ณผ ์ฐจ๋ณ„์ ์„ ์†Œ๊ฐœํ•ด๋ณด์„ธ์š”.

๐Ÿ“š ์ฒด๊ณ„์ ์ธ ์ปค๋ฆฌ ํ˜๋Ÿผ

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์˜ ๊ตฌ์กฐ์™€ ๋™์ž‘ ์›๋ฆฌ

  • ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ๋ฐฉ์‹์˜ ๋ฐœ์ „ ๊ณผ์ •๊ณผ ํŠน์ง•

๐Ÿ’ป ๋‹จ๊ณ„๋ณ„ ์‹ค์Šต

  • ์ฝ”๋“œ์™€ ๊ทธ๋ฆผ์œผ๋กœ ์•Œ์•„๋ณด๋Š” ๋น„๋™๊ธฐ ๋™์ž‘ ์›๋ฆฌ

  • ๋‹ค์–‘ํ•œ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ์ฝ”๋“œ ์‹ค์Šต

๐ŸŽฏ ์‹ค๋ฌด ์ค‘์‹ฌ ์ปค๋ฆฌํ˜๋Ÿผ

  • ์ตœ์‹  Fetch API๋ฅผ ํ†ตํ•œ ํ†ต์‹ 


  • ์‹ค์ „ API ์—ฐ๋™์„ ํ†ตํ•œ ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ ์‹ค์Šต
    * ๊ต์œก์šฉ api ์„œ๋น„์Šค๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค

์ด๋Ÿฐ ๋‚ด์šฉ์„ ๋ฐฐ์›Œ์š”

1์žฅ. ๋™๊ธฐ์™€ ๋น„๋™๊ธฐ

  • ๋™๊ธฐ/๋น„๋™๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ฐœ๋…

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์˜ ๊ตฌ์กฐ์™€ ๋™์ž‘ ์›๋ฆฌ

  • ๋Ÿฐํƒ€์ž„์—์„œ ์ฝœ ์Šคํƒ๊ณผ ์ด๋ฒคํŠธ ๋ฃจํ”„์˜ ๊ด€๊ณ„

2์žฅ. ๋น„๋™๊ธฐ ์ œ์–ด

  • ์ฝœ๋ฐฑ ํ•จ์ˆ˜์™€ ์ฝœ๋ฐฑ ์ง€์˜ฅ

  • Promise๋ฅผ ์ด์šฉํ•œ ๋น„๋™๊ธฐ ์ œ์–ด

  • async/await๋ฅผ ํ†ตํ•œ ์ตœ์‹  ๋น„๋™๊ธฐ ์ œ์–ด

3์žฅ. ๋น„๋™๊ธฐ ํ†ต์‹ ๊ณผ ์‹ค์Šต

  • HTTP ํ†ต์‹ ์˜ ๊ฐœ๋…

  • AJAX์˜ ์ดํ•ด์™€ Fetch API

  • Fetch API๋ฅผ ํ™œ์šฉํ•œ ๋ฐ์ดํ„ฐ ํ†ต์‹ 

  • ์‹ค์ „ API ์—ฐ๋™ ํ”„๋กœ์ ํŠธ

    • ์œ„๋‹ˆ๋ธŒ์˜ ๊ต์œก์šฉ API ์„œ๋น„์Šค๋ฅผ ํ™œ์šฉํ•ฉ๋‹ˆ๋‹ค.


์ˆ˜๊ฐ• ์ „ ์ฐธ๊ณ  ์‚ฌํ•ญ

์‹ค์Šต ํ™˜๊ฒฝ

  • ๊ฐ•์˜๋Š” macOS ํ™˜๊ฒฝ์—์„œ ์ง„ํ–‰๋˜์ง€๋งŒ ์šด์˜ ์ฒด์ œ์— ๊ด€๊ณ„์—†์ด ์ˆ˜๊ฐ•ํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์‚ฌ์šฉ ๋„๊ตฌ: Visual Studio Code, Chrome ๋ธŒ๋ผ์šฐ์ €

ํ•™์Šต ์ž๋ฃŒ

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ๊ฐœ๋…์„ ํ™•์‹คํžˆ ์•Œ๊ณ  ์‹ถ์œผ์‹  ๋ถ„

  • ๊น”๋”ํ•œ ๋น„๋™๊ธฐ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ณ  ์‹ถ์œผ์‹  ๋ถ„

  • ์›น API ํ†ต์‹ ์„ ์‹ค๋ฌด์—์„œ ๋‹ค๋ฃจ๊ณ  ์‹ถ์œผ์‹  ๋ถ„

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ๋ณธ ๋ฌธ๋ฒ•

์•ˆ๋…•ํ•˜์„ธ์š”
์ œ์ฃผ์ฝ”๋”ฉ๋ฒ ์ด์Šค์บ ํ”„์ž…๋‹ˆ๋‹ค.

95,728

๋ช…

์ˆ˜๊ฐ•์ƒ

2,233

๊ฐœ

์ˆ˜๊ฐ•ํ‰

159

๊ฐœ

๋‹ต๋ณ€

4.8

์ 

๊ฐ•์˜ ํ‰์ 

80

๊ฐœ

๊ฐ•์˜

แ„‰แ…ฉแ„€แ…ข แ„‹แ…ตแ„†แ…ตแ„Œแ…ต.png.webp

 

๐Ÿง™โ€โ™‚ ์•ˆ๋…•ํ•˜์„ธ์š”. ์ œ์ฃผ์ฝ”๋”ฉ๋ฒ ์ด์Šค์บ ํ”„์ž…๋‹ˆ๋‹ค.

์ œ์ฃผ์ฝ”๋”ฉ๋ฒ ์ด์Šค์บ ํ”„๋ž€?

 

 

์ œ์ฃผ์—์„œ ๊ฐ€์žฅ ํ•ซํ•œ ๊ฐœ๋ฐœ์ž๋“ค์ด ๋ชจ์—ฌ ์ž‘๋‹นํ•œ ๋ถ€ํŠธ์บ ํ”„! ์—ด์ •์žˆ๋Š” ์ฒญ๋…„๋“ค์—๊ฒŒ ์—ด์ •๋งŒํผ ์„ฑ์žฅํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐํšŒ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค!

์ œ์ฃผ์ฝ”๋”ฉ๋ฒ ์ด์Šค์บ ํ”„๋Š” ์ œ์ฃผ์—์„œ ๊ฐ€์žฅ ํฐ ICT ๊ต์œก ํ–‰์‚ฌ๋กœ ์นด์นด์˜ค, ๊ตฌ๋ฆ„, ์ œ์ฃผ์‚ฐํ•™์œตํ•ฉ์› ๋“ฑ ๊ธฐ์—… ์ง€์ž์ฒด์™€ ํ•จ๊ป˜ ์ง„ํ–‰ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.


์„œ๋น„์Šค ๊ตฌ์ถ• ์„ฑ๊ณต
๊ฒฝํ—˜์„ ํ†ตํ•ด ์ด ์ทจ์—…๋‚œ ์‹œ๋Œ€์— ์ž์‹ ๊ฐ, ์ž์กด๊ฐ, ์„ฑ์ทจ๊ฐ, ๊ทธ๋ฆฌ๊ณ  ์ž๋ฆฝํ•  ์ˆ˜ ์žˆ๋Š” ๋Šฅ๋ ฅ์„ ๋ฐฐ์–‘ํ•ด ๋ณด์„ธ์š”!

์œผ๋ผ์ฐจ์ฐจ ์ฒญ์ถ˜ ํ™”์ดํŒ…์ž…๋‹ˆ๋‹ค! ๐Ÿ˜€

 


 

โ–ถ๏ธŽ ์ œ์ฃผ์ฝ”๋”ฉ๋ฒ ์ด์Šค์บ ํ”„ ๋กœ๋“œ๋งต

แ„Œแ…ฆแ„แ…ฉแ„‡แ…ฆ แ„…แ…ฉแ„ƒแ…ณแ„†แ…ขแ†ธ.png.webp

 

โ–ถ๏ธŽ ์ œ์ฃผ์ฝ”๋”ฉ๋ฒ ์ด์Šค์บ ํ”„ ์ˆ˜๋ฃŒ์ฆ ์ œ๋„

 

- 1.png.webp

 

๋”๋ณด๊ธฐ

๊ณต๋™ ์ง€์‹๊ณต์œ ์ž

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

8๊ฐœ โˆ™ (1์‹œ๊ฐ„ 8๋ถ„)

๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!