# ๐Ÿ“‹ AJAX & JSON

# ๐Ÿง‘๐Ÿผโ€๐Ÿš€ ์•Œ์•„์•ผ ํ•˜๋Š” ์ด์œ 

โ—์‚ฌ์šฉ์ž์˜ ๋ฐ˜์‘์— ๋”ฐ๋ผ ๋ณด์—ฌ์ฃผ๋Š” ํ™”๋ฉด์„ ๋” ์ข‹์€ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์œผ๋กœ ๋งŒ๋“ค๊ณ  ์‹ถ๋‹ค๋ฉด โ—ํŽ˜์ด์ง€์˜ ์ผ๋ถ€๋งŒ ํšจ์œจ์ ์œผ๋กœ ๋ณ€๊ฒฝํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด

# ๐Ÿ™‹๐Ÿปโ€โ™‚๏ธ ์ด ๋ฌธ์„œ๋ฅผ ๋ณด๊ณ  ๋‚˜๋ฉด

  • ๋น„๋™๊ธฐ ํ†ต์‹ ์„ ํ†ตํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜จ ํ›„ ์›นํŽ˜์ด์ง€์— ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.
  • ๋น„๋™๊ธฐ ํ†ต์‹ ์ด ์ด๋ฃจ์–ด์ง€๋Š” ์ˆœ์„œ์™€ ๊ธฐ๋ณธ ๊ฐœ๋…์„ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ๋น„๋™๊ธฐ ํ†ต์‹ ์œผ๋กœ ๋ฐ›์€ JSON ๋ฐ์ดํ„ฐ๋ฅผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐ์ดํ„ฐ๋กœ ๋ณ€ํ™˜ํ•ด ์ ‘๊ทผํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

# AJAX(Asynchronous JavaScript and XML)

AJAX ๋˜๋Š” XMLHttpRequest ๋Š” ๋น„๋™๊ธฐ ๋ฐฉ์‹์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ ๋ฐ›๊ธฐ ์œ„ํ•ด ๊ฐœ๋ฐœ๋œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ˆ ์ž…๋‹ˆ๋‹ค. ์ดˆ๊ธฐ์—๋Š” XML/XLST ํฌ๋งท ํ˜•ํƒœ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ ๋ฐ›๋‹ค๊ฐ€ ์ตœ๊ทผ์—๋Š” JSON ํ˜•ํƒœ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ ๋ฐ›๋Š” ์›น ๋น„๋™๊ธฐ ๊ธฐ์ˆ ๋กœ ์ •์ฐฉ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. AJAX๋Š” HTML, XML, JSON ๋“ฑ ๋‹ค์–‘ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. AJAX๋ฅผ ์œ„ํ•ด์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” XMLHttpRequest ๊ฐ์ฒด๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. XMLHttpRequest ๊ฐ์ฒด๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋‚ด์žฅ ๊ฐ์ฒด๋กœ ๋น„๋™๊ธฐ ํ†ต์‹  ๊ตฌํ˜„์„ ์œ„ํ•œ ๊ฐ์ฒด์ด๋ฉฐ, ์ด ๊ฐ์ฒด๋Š” ์„œ๋ฒ„๋กœ ์š”์ฒญ์„ ๋ณด๋‚ด๊ณ  ์š”์ฒญ๋ฐ›์€ ๊ฒฐ๊ณผ๋ฅผ ๋น„๋™๊ธฐ๋กœ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค. (๋น„๋™๊ธฐ์— ๋Œ€ํ•œ ๋‚ด์šฉ์€ ๋‹ค์Œ Promise ํŽ˜์ด์ง€์—์„œ ์ž์„ธํžˆ ๋‹ค๋ฃน๋‹ˆ๋‹ค.) ๋”ฐ๋ผ์„œ ์š”์ฒญ์„ ๋ณด๋‚ธ ํ›„ ์‚ฌ์šฉ์ž๋Š” UI ํ™”๋ฉด๊ณผ ์ƒํ˜ธ์ž‘์šฉ์„ ํ•˜๊ฑฐ๋‚˜ ๋‹ค๋ฅธ AJAX ์š”์ฒญ์„ ์ถ”๊ฐ€๋กœ ๋ณด๋‚ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์„œ๋ฒ„์—์„œ ์‘๋‹ต์ด ์˜ค๋ฉด AJAX ์š”์ฒญ์„ ๋ณด๋‚ผ ๋•Œ ๋“ฑ๋กํ•œ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด ๊ฒฐ๊ณผ ๋ฐ์ดํ„ฐ๋ฅผ ์ฒ˜๋ฆฌํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. AJAX๋ฅผ ์š”์ฒญํ•˜๋Š” ์ž์„ธํ•œ ๊ณผ์ •์€ ๋งํฌ (opens new window)์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

# JSON(JavaScript Object Notation)

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

๋˜ํ•œ, HTML ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„ ์›นํŽ˜์ด์ง€์— ๋ถ™์ด๋Š” ๊ณผ์ •์ด ์ ์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋งŒ์œผ๋กœ ๊ตฌํ˜„์ด ๊ฐ€๋Šฅํ•˜์ง€๋งŒ, ๋‚ด๋ถ€ ๊ณผ์ •์€ ๊ฒฐ๊ตญ HTML ๋ฐ์ดํ„ฐ๋ฅผ ํŒŒ์‹ฑํ•ด DOM ๋…ธ๋“œ๋ฅผ ์ƒ์„ฑํ•ด ๋ถ™์ด๋Š” ๊ณผ์ •์„ ๊ฑฐ์น˜๊ธฐ ๋•Œ๋ฌธ์— JSON ๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•ด ๋™์ ์œผ๋กœ HTML ํŽ˜์ด์ง€๋ฅผ ๊ฐฑ์‹ ํ•˜๋Š” ๊ณผ์ •๊ณผ ์ฐจ์ด๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

AJAX๋กœ ๋ฐ›์•„์˜ฌ ์ˆ˜ ์žˆ๋Š” ๋ฐ์ดํ„ฐ ํฌ๋งท์— ์ œ์•ฝ์ด ์žˆ๋Š” ๊ฒƒ์€ ์•„๋‹ˆ์ง€๋งŒ, ์›น์—์„œ ์˜ค๊ณ  ๊ฐ€๋Š” ๋ฐ์ดํ„ฐ์˜ ๋Œ€๋ถ€๋ถ„์ด JSON์œผ๋กœ ํ‘œํ˜„์ด ๊ฐ€๋Šฅํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์‹ค์ƒ ํ‘œ์ค€์œผ๋กœ ์ •์ฐฉํ•ด ์žˆ์Šต๋‹ˆ๋‹ค. AJAX ์‘๋‹ต์œผ๋กœ ๋ฐ›์€ JSON ๋ฐ์ดํ„ฐ๋Š” ๋‹จ์ˆœ ๋ฌธ์ž์—ด์ด๊ธฐ ๋•Œ๋ฌธ์— ๊ทธ๋ƒฅ ์‚ฌ์šฉํ•  ์ˆ˜๋Š” ์—†๊ณ  ๋ฐ์ดํ„ฐ ๋ณ€ํ™˜์„ ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์‘๋‹ต์„ ๋ฐ›์€ XMLHttpRequest ๊ฐ์ฒด์—๋Š” responseText์†์„ฑ์ด ์žˆ๊ณ , ์ด ์†์„ฑ์— ์‘๋‹ต์œผ๋กœ ๋ฐ›์€ JSON ํ…์ŠคํŠธ ๋ฐ์ดํ„ฐ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฐ์ดํ„ฐ๋ฅผ JSON ๊ฐ์ฒด๋กœ ๋ณ€ํ™˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—๋Š” ์ „์—ญ ๊ฐ์ฒด๋กœ JSON ๊ฐ์ฒด๊ฐ€ ์žˆ์œผ๋ฉฐ, JSON ๋ฌธ์ž์—ด์„ ๊ฐ์ฒด๋กœ ๋ณ€ํ™˜ํ•ด์ฃผ๋Š” ๋ฉ”์„œ๋“œ๊ฐ€ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.

const json = JSON.parse(xhr.responseText)

json๋ณ€์ˆ˜๋Š” JSON ๊ฐ์ฒด ์ฐธ์กฐ๋ฅผ ๋‚˜ํƒ€๋‚ด๊ณ , ์†์„ฑ์„ ํ†ตํ•ด JSON ๊ฐ’์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

# ๐Ÿ’๐Ÿปโ€โ™‚๏ธTip

JSON ๊ธฐ๋Šฅ์„ ๊ฐœ๋ฐœํ•  ๋•Œ๋Š” ๋ฐ๋ชจ, ๋˜๋Š” ํ…Œ์ŠคํŠธ์šฉ์œผ๋กœ JSON ๋ฐ์ดํ„ฐ๋ฅผ ์ถœ๋ ฅํ•˜๋Š” ๊ฐœ๋ฐœ์šฉ ์›๊ฒฉ ์„œ๋ฒ„, ๋˜๋Š” ๋กœ์ปฌ ์„œ๋ฒ„๊ฐ€ ํ•„์š”ํ•œ๋ฐ, ์—ฌ๊ฑด์ƒ ์ด๋Ÿฐ ์ค€๋น„๊ฐ€ ์–ด๋ ค์šด ๊ฒฝ์šฐ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” JSON Rest API ์„œ๋น„์Šค๋ฅผ ์ œ๊ณตํ•˜๋Š” ์‚ฌ์ดํŠธ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

https://jsonplaceholder.typicode.com/ (opens new window)

๊ฐ€์ƒ์˜ ๋ธ”๋กœ๊ทธ ์„œ๋น„์Šค ๋ฐ์ดํ„ฐ๋ฅผ Rest API๋กœ ์ œ๊ณตํ•˜๋Š” JSON ์„œ๋ฒ„ ์„œ๋น„์Šค๋ฅผ ๋ฌด๋ฃŒ๋กœ ์ œ๊ณตํ•˜๋ฏ€๋กœ ์ดˆ๊ธฐ ํ•™์Šต ํ™˜๊ฒฝ์—์„œ ์ž‘์„ฑํ•œ AJAX ๊ธฐ๋Šฅ, ๋˜๋Š” JSON ๋ฐ์ดํ„ฐ ์ˆ˜์‹  ๋ฐ ๊ฐ€๊ณต ๊ธฐ๋Šฅ์„ ํ…Œ์ŠคํŠธํ•˜๋Š”๋ฐ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

# ๐Ÿ“˜ ์ •๋ฆฌ

  • AJAX๋Š” (ํŽ˜์ด์ง€์˜ ์ „์ฒด๊ฐ€ ์•„๋‹ˆ๋ผ) ์ผ๋ถ€๋งŒ์„ ์ˆ˜์ •ํ•˜๋Š” ๊ฒƒ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ฃผ๋Š” ๊ธฐ์ˆ ์˜ ์ด์นญ์ด๋‹ค.
  • HTML, XML, JSON ๋ฐ์ดํ„ฐ๋ฅผ ํŽ˜์ด์ง€์— ์‚ฝ์ž…ํ•  ์ˆ˜ ์žˆ๋‹ค. (JSON์ด ์ ์ฐจ ๋Œ€์ค‘ํ™”๋˜์–ด ๊ฐ€๊ณ  ์žˆ๋‹ค)

# ๐Ÿ”— ์ฐธ๊ณ  ๋งํฌ