๊ด€๋ฆฌ ๋ฉ”๋‰ด

๋ชฉ๋ก2022/05/22 (4)

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 ํƒ€์ด๋จธ๊ฐ€ ๋งŒ๋ฃŒ๋˜์—ˆ๋‹ค๊ณ  ์ฝœ๋ฐฑ ํ•จ์ˆ˜ ์ฆ‰์‹œ ํ˜ธ์ถœ์„ ๋ณด์žฅํ•˜์ง„ ์•Š๋Š”๋‹ค. ํƒœ์Šคํฌ ํ์— ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ๋“ฑ๋กํ•˜๋Š” ..