«   2022/10   »
์ผ ์›” ํ™” ์ˆ˜ ๋ชฉ ๊ธˆ ํ† 
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          
Archives
Today
11
Total
14,025
๊ด€๋ฆฌ ๋ฉ”๋‰ด

๋ชฉ๋ก์ „์ฒด ๊ธ€ (454)

kingsubin

43์žฅ. Ajax

43์žฅ. Ajax 43-1. Ajax๋ž€? Ajax(Asynchronous JavaScript and XML)๋ž€ JS๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์„œ๋ฒ„์—๊ฒŒ ๋น„๋™๊ธฐ ๋ฐฉ์‹์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญํ•˜๊ณ , ์„œ๋ฒ„๊ฐ€ ์‘๋‹ตํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ์ˆ˜์‹ ํ•˜์—ฌ ์›นํŽ˜์ด์ง€๋ฅผ ๋™์ ์œผ๋กœ ๊ฐฑ์‹ ํ•˜๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐฉ์‹์„ ๋งํ•œ๋‹ค. ์ „ํ†ต์ ์ธ ๋ฐฉ์‹ ๋‹จ์  ๋ณ€๊ฒฝํ•  ํ•„์š”๊ฐ€ ์—†๋Š” ๋ถ€๋ถ„๊นŒ์ง€ ํฌํ•จ๋œ HTML์„ ๋งค๋ฒˆ ๋‹ค์‹œ ์ „์†ก๋ฐ›๊ธฐ์— ๋ถˆํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ ํ†ต์‹ ์ด ๋ฐœ์ƒํ•œ๋‹ค. ๋ณ€๊ฒฝํ•  ํ•„์š”๊ฐ€ ์—†๋Š” ๋ถ€๋ถ„๊นŒ์ง€ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋‹ค์‹œ ๋ Œ๋”๋งํ•œ๋‹ค. ํ™”๋ฉด ์ „ํ™˜์ด ์ผ์–ด๋‚˜๋ฉด ํ™”๋ฉด์ด ์ˆœ๊ฐ„์ ์œผ๋กœ ๊นœ๋นก์ž„. ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ์‘๋‹ต์ด ์žˆ์„ ๋•Œ๊นŒ์ง€ ๋‹ค์Œ ์ฒ˜๋ฆฌ๋Š” ๋ธ”๋กœํ‚น๋œ๋‹ค. Ajax ๋ฐฉ์‹ ์žฅ์  ๋ณ€๊ฒฝํ•  ๋ถ€๋ถ„์„ ๊ฐฑ์‹ ํ•˜๋Š” ๋ฐ ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋งŒ ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ์ „์†ก๋ฐ›๊ธฐ์— ๋ถˆํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ ํ†ต์‹  ๋ฐœ์ƒํ•˜์ง€ ์•Š๋Š”๋‹ค. ๋ณ€๊ฒฝํ•  ํ•„์š”๊ฐ€ ์—†๋Š” ๋ถ€๋ถ„ ๋‹ค์‹œ ๋ Œ๋”๋ง ..

42์žฅ. ๋น„๋™๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ

42์žฅ. ๋น„๋™๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ 42-1. ๋™๊ธฐ ์ฒ˜๋ฆฌ์™€ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ JS ์—”์ง„์€ ๋‹จ ํ•˜๋‚˜์˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ ์Šคํƒ์„ ๊ฐ€์ง„๋‹ค. ๋™์‹œ์— 2๊ฐœ ์ด์ƒ์˜ ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•  ์ˆ˜ ์—†๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค. JS ์—”์ง„์€ ํ•œ ๋ฒˆ์— ํ•˜๋‚˜์˜ ํƒœ์Šคํฌ๋งŒ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” ์‹ฑ๊ธ€ ์Šค๋ ˆ๋“œ ๋ฐฉ์‹์œผ๋กœ ๋™์ž‘ํ•œ๋‹ค. ์‹ฑ๊ธ€ ์Šค๋ ˆ๋“œ ๋ฐฉ์‹์—์„œ ์ฒ˜๋ฆฌ์— ์‹œ๊ฐ„์ด ๊ฑธ๋ฆฌ๋Š” ํƒœ์Šคํฌ๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๊ฒฝ์šฐ ๋ธ”๋กœํ‚น์ด ๋ฐœ์ƒํ•œ๋‹ค. ํ˜„์žฌ ์‹คํ–‰ ์ค‘์ธ ํƒœ์Šคํฌ๊ฐ€ ์ข…๋ฃŒํ•  ๋•Œ๊นŒ์ง€ ๋‹ค์Œ์— ์‹คํ–‰๋  ํƒœ์Šคํฌ๊ฐ€ ๋Œ€๊ธฐํ•˜๋Š” ๋ฐฉ์‹์„ synchronous ์ฒ˜๋ฆฌ ํ˜„์žฌ ์‹คํ–‰ ์ค‘์ธ ํƒœ์Šคํฌ๊ฐ€ ์ข…๋ฃŒ๋˜์ง€ ์•Š์€ ์ƒํƒœ๋ผ๋„ ๋‹ค์Œ ํƒœ์Šคํฌ๋ฅผ ๊ณง๋ฐ”๋กœ ์‹คํ–‰ํ•˜๋Š” ๋ฐฉ์‹์„ asynchronous ์ฒ˜๋ฆฌ setTimeout, setInterval, HTTP ์š”์ฒญ, ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋Š” ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ๋ฐฉ์‹์œผ๋กœ ๋™์ž‘ํ•œ๋‹ค. 42-2. ์ด๋ฒคํŠธ ๋ฃจํ”„์™€ ํƒœ์Šคํฌ ํ..

41์žฅ. ํƒ€์ด๋จธ

41์žฅ. ํƒ€์ด๋จธ 41-1. ํ˜ธ์ถœ ์Šค์ผ€์ค„๋ง ์ผ์ • ์‹œ๊ฐ„์ด ๊ฒฝ๊ณผ๋œ ์ดํ›„์— ํ˜ธ์ถœ๋˜๋„๋ก ํ•จ์ˆ˜ ํ˜ธ์ถœ์„ ์˜ˆ์•ฝํ•˜๋ ค๋ฉด ํƒ€์ด๋จธ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. ์ด๋ฅผ ํ˜ธ์ถœ ์Šค์ผ€์ค„๋ง(scheduling a call) ์ด๋ผ ํ•œ๋‹ค. ํƒ€์ด๋จธ ํ•จ์ˆ˜๋Š” ECMAScript ์‚ฌ์–‘์— ์ •์˜๋œ ๋นŒํŠธ์ธ ํ•จ์ˆ˜ ์•„๋‹ˆ๋‹ค. ๋ธŒ๋ผ์šฐ์ € ํ™˜๊ฒฝ๊ณผ Node.js ํ™˜๊ฒฝ์—์„œ ๋ชจ๋‘ ์ „์—ญ ๊ฐ์ฒด์˜ ๋ฉ”์„œ๋“œ๋กœ์„œ ํƒ€์ด๋จธ ํ•จ์ˆ˜๋ฅผ ์ œ๊ณตํ•œ๋‹ค. JS ์—”์ง„์€ ๋‹จ ํ•˜๋‚˜์˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ ์Šคํƒ์„ ๊ฐ–๊ธฐ ๋•Œ๋ฌธ์— ๋‘ ๊ฐ€์ง€ ์ด์ƒ์˜ ํƒœ์Šคํฌ ๋™์‹œ ์‹คํ–‰ํ•  ์ˆ˜ ์—†๋‹ค. ์‹ฑ๊ธ€ ์Šค๋ ˆ๋“œ๋กœ ๋™์ž‘ํ•œ๋‹ค. ์ด๋Ÿฐ ์ด์œ ๋กœ ํƒ€์ด๋จธํ•จ์ˆ˜๋Š” ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋ฐฉ์‹์œผ๋กœ ๋™์ž‘ํ•œ๋‹ค. 41-2. ํƒ€์ด๋จธ ํ•จ์ˆ˜ delay ms ๋‹จ์œ„ delay default: 0 ํƒ€์ด๋จธ๊ฐ€ ๋งŒ๋ฃŒ๋˜์—ˆ๋‹ค๊ณ  ์ฝœ๋ฐฑ ํ•จ์ˆ˜ ์ฆ‰์‹œ ํ˜ธ์ถœ์„ ๋ณด์žฅํ•˜์ง„ ์•Š๋Š”๋‹ค. ํƒœ์Šคํฌ ํ์— ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ๋“ฑ๋กํ•˜๋Š” ..

45์žฅ. ํ”„๋กœ๋ฏธ์Šค

45์žฅ. ํ”„๋กœ๋ฏธ์Šค JS๋Š” ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•œ ํ•˜๋‚˜์˜ ํŒจํ„ด์œผ๋กœ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. ์ฝœ๋ฐฑ ํŒจํ„ด์€ ์ฝœ๋ฐฑ ํ—ฌ๋กœ ์ธํ•ด ๊ฐ€๋…์„ฑ์ด ๋‚˜์˜๋‹ค. ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ์ค‘ ๋ฐœ์ƒํ•œ ์—๋Ÿฌ์˜ ์ฒ˜๋ฆฌ๊ฐ€ ๊ณค๋ž€ํ•˜๋‹ค. ์—ฌ๋Ÿฌ ๊ฐœ์˜ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋ฅผ ํ•œ ๋ฒˆ์— ์ฒ˜๋ฆฌํ•˜๋Š”๋ฐ ํ•œ๊ณ„๊ฐ€ ์žˆ๋‹ค. ES6์—์„œ๋Š” ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•œ ๋˜ ๋‹ค๋ฅธ ํŒจํ„ด์œผ๋กœ Promise ๋ฅผ ๋„์ž…ํ–ˆ๋‹ค. Promise์— ๋Œ€ํ•˜์—ฌ ์•Œ์•„๋ณด์ž... 45-1. ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•œ ์ฝœ๋ฐฑ ํŒจํ„ด์˜ ๋‹จ์  ์ฝœ๋ฐฑ ํ—ฌ ๋น„๋™๊ธฐ ํ•จ์ˆ˜๋Š” ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ๊ฒฐ๊ณผ๋ฅผ ์™ธ๋ถ€์— ๋ฐ˜ํ™˜ํ•˜๊ฑฐ๋‚˜, ์ƒ์œ„ ์Šค์ฝ”ํ”„ ๋ณ€์ˆ˜์— ํ• ๋‹นํ•  ์ˆ˜ ์—†๋‹ค. ๋”ฐ๋ผ์„œ ๋น„๋™๊ธฐ ํ•จ์ˆ˜ ์ฒ˜๋ฆฌ ๊ฒฐ๊ณผ์— ๋Œ€ํ•œ ํ›„์† ์ฒ˜๋ฆฌ๋ฅผ ๋น„๋™๊ธฐ ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ ์ˆ˜ํ–‰ํ•ด์•ผ ํ•œ๋‹ค. ์ด ํ›„์† ์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•ด ์ฃผ๋กœ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๊ฒƒ์ด ์ผ๋ฐ˜์ ์ด๋‹ค. // ๋น„๋™๊ธฐ ํ•จ์ˆ˜์˜ ์ฒ˜๋ฆฌ ๊ฒฐ๊ณผ๋ฅผ ๋‹ค๋ฃจ๊ธฐ ์œ„ํ•ด ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ..

44์žฅ. REST API

44์žฅ. REST API REST(REpresentational State Transfer): HTTP๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์„œ๋ฒ„์˜ ๋ฆฌ์†Œ์Šค์— ์ ‘๊ทผํ•˜๋Š” ๋ฐฉ์‹์„ ๊ทœ์ •ํ•œ ์•„ํ‚คํ…์ฒ˜ REST API: REST๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์„œ๋น„์Šค API๋ฅผ ๊ตฌํ˜„ํ•œ ๊ฒƒ 44-1. REST API์˜ ๊ตฌ์„ฑ ๊ตฌ์„ฑ์š”์†Œ ๋‚ด์šฉ ํ‘œํ˜„๋ฐฉ๋ฒ• resource ์ž์› URI(์—”๋“œํฌ์ธํŠธ) verb ์ž์›์— ๋Œ€ํ•œ ํ–‰์œ„ HTTP ์š”์ฒญ ๋ฉ”์„œ๋“œ representations ์ž์›์— ๋Œ€ํ•œ ํ–‰์œ„์˜ ๊ตฌ์ฒด์  ๋‚ด์šฉ payload 44-2. REST API ์„ค๊ณ„ ์›์น™ URI๋Š” ๋ฆฌ์†Œ์Šค๋ฅผ ํ‘œํ˜„ ํ–‰์œ„์— ๋Œ€ํ•œ ์ •์˜๋Š” HTTP ์š”์ฒญ ๋ฉ”์„œ๋“œ๋กœ 44-3. JSON Server๋ฅผ ์ด์šฉํ•œ REST API ์‹ค์Šต npm json-server ์‚ฌ์šฉ ๋Œ€๋ถ€๋ถ„ ์•„๋Š” ๋‚ด์šฉ์ด๋ผ ์ฝ๊ธฐ๋งŒ ํ•˜๊ณ  ๋ฉ”๋ชจ๋Š” ์ƒ๋žตํ•จ.