โ๏ธ ์ด๋ฒ ์ ๋ ์ ํตํด ์๊ฒ ๋ ๊ฒ
Ajax๋ ๋ฌด์์ธ๊ฐ์?
<๋ต ๋ฏธ๋ฆฌ๋ณด๊ธฐ>
๐ค Ajax๋ ๋ฌด์์ธ๊ฐ์?
๐ค ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํด์ ๋ธ๋ผ์ฐ์ ๊ฐ ์๋ฒ์๊ฒ ๋น๋๊ธฐ ๋ฐฉ์์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ๊ณ , ์๋ฒ๊ฐ ์๋ตํ ๋ฐ์ดํฐ๋ฅผ ์์ ํ์ฌ ์นํ์ด์ง๋ฅผ ๋์ ์ผ๋ก ๊ฐฑ์ ํ๋ ํ๋ก๊ทธ๋๋ฐ ๋ฐฉ์์ ๋งํฉ๋๋ค.
โ๏ธ Ajax
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํด์ ๋ธ๋ผ์ฐ์ ๊ฐ ์๋ฒ์๊ฒ ๋น๋๊ธฐ ๋ฐฉ์์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ๊ณ , ์๋ฒ๊ฐ ์๋ตํ ๋ฐ์ดํฐ๋ฅผ ์์ ํ์ฌ ์นํ์ด์ง๋ฅผ ๋์ ์ผ๋ก ๊ฐฑ์ ํ๋ ํ๋ก๊ทธ๋๋ฐ ๋ฐฉ์์ ๋งํ๋ค.
Ajax๋ ๋ธ๋ผ์ฐ์ ์์ ์ ๊ณตํ๋ Web API์ธ XMLHttpRequest ๊ฐ์ฒด๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋์ํ๋ค. XMLHttpRequest๋ HTTP ๋น๋๊ธฐ ํต์ ์ ์ํ ๋ฉ์๋์ ํ๋กํผํฐ๋ฅผ ์ ๊ณตํ๋ค. (์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํด์ HTTP ์์ฒญ์ ์ ์กํ๋ ค๋ฉด XMLHttpRequest ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ๋ค. )
โ Ajax๋ก ์ธํด ๋ธ๋ผ์ฐ์ ์์๋ ๋ฐ์คํฌํฑ ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ์ ์ฌํ ๋น ๋ฅธ ํผํฌ๋จผ์ค์ ๋ถ๋๋ฌ์ด ํ๋ฉด ์ ํ์ด ๊ฐ๋ฅํด์ก๋ค.
→ ์๋ฒ๋ก๋ถํฐ ์นํ์ด์ง์ ๋ณ๊ฒฝ์ ํ์ํ ๋ฐ์ดํฐ๋ง ๋น๋๊ธฐ ๋ฐฉ์์ผ๋ก ์ ์ก๋ฐ์ ์นํ์ด์ง๋ฅผ ๋ณ๊ฒฝํ ํ์๊ฐ ์๋ ๋ถ๋ถ์๋ค์ ๋ ๋๋งํ์ง ์๊ณ , ๋ณ๊ฒฝํ ํ์๊ฐ ์๋ ๋ถ๋ถ๋ง ํ์ ์ ์ผ๋ก ๋ ๋๋งํ๋ ๋ฐฉ์์ด ๊ฐ๋ฅํด์ก๋ค.
โ๏ธ Ajax์ ์ฅ์
1. ๋ณ๊ฒฝํ ๋ถ๋ถ์ ๊ฐฑ์ ํ๋ ๋ฐ ํ์ํ ๋ฐ์ดํฐ๋ง ์๋ฒ๋ก๋ถํฐ ์ ์ก๋ฐ๊ธฐ ๋๋ฌธ์ ๋ถํ์ํ ๋ฐ์ดํฐ ํต์ ์ด ๋ฐ์ํ์ง ์๋๋ค.
2. ๋ณ๊ฒฝํ ํ์๊ฐ ์๋ ๋ถ๋ถ์ ๋ค์ ๋ ๋๋งํ์ง ์๋๋ค. ๋ฐ๋ผ์ ํ๋ฉด์ด ์๊ฐ์ ์ผ๋ก ๊น๋ฐ์ด๋ ํ์์ด ๋ฐ์ํ์ง ์๋๋ค.
3. ํด๋ผ์ด์ธํธ์ ์๋ฒ์์ ํต์ ์ด ๋น๋๊ธฐ ๋ฐฉ์์ผ๋ก ๋์ํ๊ธฐ ๋๋ฌธ์ ์๋ฒ์๊ฒ ์์ฒญ์ ๋ณด๋ธ ์ดํ ๋ธ๋กํน์ด ๋ฐ์ํ์ง ์๋๋ค.
๐ฉ๐ป ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ Deep Dive๋ฅผ ์ ๋ ํ๊ณ ์ ๊ฐ ์ดํดํ ๋ด์ฉ์ ์ ๋ฆฌํ ๊ธ์ ๋๋ค ๐ฉ๐ป
'๐Language > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[Deep Dive] ํ๋ก๋ฏธ์ค, Promise, Promise.all (0) | 2023.01.03 |
---|---|
[Deep Dive] ES6 ํจ์์ ์ถ๊ฐ ๊ธฐ๋ฅ (ํ์ดํ ํจ์, REST ํ๋ผ๋ฏธํฐ, ๋งค๊ฐ๋ณ์ ๊ธฐ๋ณธ๊ฐ) (0) | 2022.12.21 |
[Deep Dive] ๋๊ธฐ์ ๋น๋๊ธฐ, ๋น๋๊ธฐ๊ฐ ์ฒ๋ฆฌ๋ ์ ์๋ ์ด์ (0) | 2022.12.19 |
[Deep Dive] REST API๊ฐ ๋ฌด์์ธ๊ฐ์? (0) | 2022.12.16 |
[Deep Dive] DOM๊ณผ ๋ ธ๋ (0) | 2022.12.15 |