๐Ÿ’ป/์›น

[Backend] AJAX์˜ ์ดํ•ด

ruhz 2022. 7. 11. 15:10
AJAX (Asynchronous Javascript And XML) 

 

http://www.tcpschool.com/ajax/ajax_intro_works

JavaScript๋ฅผ ์ด์šฉํ•ด ์š”์ฒญ์„ ๋ณด๋‚ด๊ณ  ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์™€ ํŽ˜์ด์ง€ ์ƒˆ๋กœ๊ณ ์นจ ์—†์ด, ํ™”๋ฉด์˜ ์ผ๋ถ€๋ฅผ ๊ฐฑ์‹ ํ•˜๋Š” ๋ฐฉ์‹์ด๋‹ค.

 

๊ฒฐ๊ตญ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํ™”๋ฉด์„ ๋„์šฐ๊ธฐ ์œ„ํ•ด ํ•„์š”ํ•œ ๊ฒƒ์€ HTML/CSS์ด๋‹ค. Javascript๋กœ ํ™”๋ฉด์ด ๋ฐ”๋€Œ๋Š” ๊ฒƒ๋„ ๊ฒฐ๊ตญ  DOM ๊ฐ์ฒด์— ์ ‘๊ทผํ•ด์„œ HTML ๋ฌธ์„œ๋ฅผ ์ˆ˜์ •ํ•˜๋Š” ๊ฒƒ์ด๋‹ค. Javascript๊ฐ€ ์š”์ฒญ์„ ๋ณด๋‚ด๊ณ  ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค๋ฉด, ํ™”๋ฉด์˜ ํŠน์ • ๋ถ€๋ถ„๋งŒ์„ ์—…๋ฐ์ดํŠธ ํ•  ์ˆ˜ ์žˆ๋‹ค.

 

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

( * ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์–ด๋–ป๊ฒŒ ์‹ฑ๊ธ€ ์“ฐ๋ ˆ๋“œ๋ฉด์„œ, ์ผ์„ ๋™์‹œ์— ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š”๊ฐ€?)

 

AJAX๋Š” ์ด๋ ‡๊ฒŒ ๋น„๋™๊ธฐ์ ์œผ๋กœ ์š”์ฒญ์„ ํ•˜๊ณ  ํ™”๋ฉด์˜ ์ผ๋ถ€๋งŒ ์—…๋ฐ์ดํŠธํ•˜๋Š” ๊ธฐ์ˆ ์ด๋‹ค.(๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์•„๋‹˜)

 

Ajax ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ธ๊ฐ€์š”?

Ajax Ajax ์šฉ์–ด์˜ ์ •์˜๋ž€ ๋ฌด์—‡์ผ๊นŒ? ์ด ๊ธ€์—์„œ๋Š” ๋น„๋™๊ธฐ ํ†ต์‹ ์˜ ์ข…๋ฅ˜์™€ ์‚ฌ์šฉ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์„ค๋ช…ํ•˜๋Š” ๊ฒƒ ๋Œ€์‹  ๊ฐœ๋…์— ๋Œ€ํ•œ ์ •์˜๋ฅผ ๋งํ•˜๊ณ ์ž ํ•œ๋‹ค. ์›น ๊ฐœ๋ฐœ์„ ์ฒ˜์Œ ๋ฐฐ์šธ๋•Œ ๋น„๋™๊ธฐ ํ†ต์‹ ์„ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•˜

velog.io

 

 

์‚ฌ์šฉ๋ฐฉ๋ฒ•

  1. XMLHttpRequest : ์˜ˆ์ „์— ๋งŽ์ด ์‚ฌ์šฉํ•˜๋˜ ๋ฐฉ์‹
  2. fecth : ์š”์ฆ˜ ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์‹
  3. ์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ : $.ajax(JQuery), (axios) ๋“ฑ

์ฝ”๋”ฉ ์• ํ”Œ : AJAX๊ฐ€ ๋ฌด์—‡์ธ๊ฐ€?