πŸ‘€ [JavaScript] Ajax 원리 μ•Œμ•„λ³΄κΈ°

전주은·2022λ…„ 11μ›” 22일
JavaScriptajax
0

μžλ°”μŠ€ν¬λ¦½νŠΈ

λͺ©λ‘ 보기
5/5
post-thumbnail

πŸ€·β€β™€οΈ Ajax( Asynchronous JavaScript and XML )

βœ” λ“€μ–΄κ°€λ©΄μ„œ...

Ajax은 의 Asynchronous JavaScript and XMLμ•½μžλ‘œ, 말 κ·ΈλŒ€λ‘œ JavaScript와 XML을 μ΄μš©ν•œ 비동기적 정보 κ΅ν™˜ κΈ°λ²•μž…λ‹ˆλ‹€. μ΄λ ‡κ²Œλ§Œ 보면 XMLμ—λ§Œ μ‚¬μš©ν•  수 μžˆλŠ”κ±° μ•„λ‹ˆμ•Ό? 싢은데 사싀은 JSONμ΄λ‚˜ 일반 ν…μŠ€νŠΈ 파일과 같은 λ‹€λ₯Έ 데이터 μ˜€λΈŒμ νŠΈλ“€λ„ μ‚¬μš© κ°€λŠ₯ν•©λ‹ˆλ‹€.

AjaxλŠ” λΉ λ₯΄κ²Œ λ™μž‘ν•˜λŠ” 동적인 μ›Ή νŽ˜μ΄μ§€λ₯Ό λ§Œλ“€κΈ° μœ„ν•œ 개발 κΈ°λ²•μ˜ ν•˜λ‚˜λ‘œ, AjaxλŠ” μ›Ή νŽ˜μ΄μ§€ 전체λ₯Ό λ‹€μ‹œ λ‘œλ”©ν•˜μ§€ μ•Šκ³ λ„, μ›Ή νŽ˜μ΄μ§€μ˜ μΌλΆ€λΆ„λ§Œμ„ κ°±μ‹ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

βœ” μž₯점과 ν•œκ³„μ 

Ajax의 μž₯점

Ajaxλ₯Ό μ΄μš©ν•˜λ©΄ λ‹€μŒκ³Ό 같은 μž₯점이 μžˆμŠ΅λ‹ˆλ‹€.
1. μ›Ή νŽ˜μ΄μ§€ 전체λ₯Ό λ‹€μ‹œ λ‘œλ”©ν•˜μ§€ μ•Šκ³ λ„, μ›Ή νŽ˜μ΄μ§€μ˜ μΌλΆ€λΆ„λ§Œμ„ κ°±μ‹ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
2. μ›Ή νŽ˜μ΄μ§€κ°€ λ‘œλ“œλœ 후에 μ„œλ²„λ‘œ 데이터 μš”μ²­μ„ 보낼 수 μžˆμŠ΅λ‹ˆλ‹€.
3. μ›Ή νŽ˜μ΄μ§€κ°€ λ‘œλ“œλœ 후에 μ„œλ²„λ‘œλΆ€ν„° 데이터λ₯Ό 받을 수 μžˆμŠ΅λ‹ˆλ‹€.
4. λ°±κ·ΈλΌμš΄λ“œ μ˜μ—­μ—μ„œ μ„œλ²„λ‘œ 데이터λ₯Ό 보낼 수 μžˆμŠ΅λ‹ˆλ‹€.

Ajax의 ν•œκ³„

Ajaxλ₯Ό μ΄μš©ν•˜λ©΄ μ—¬λŸ¬ μž₯점을 κ°€μ§€μ§€λ§Œ, Ajaxλ‘œλ„ λ‹€μŒκ³Ό 같은 일듀은 μ²˜λ¦¬ν•  수 μ—†μŠ΅λ‹ˆλ‹€.
1. AjaxλŠ” ν΄λΌμ΄μ–ΈνŠΈκ°€ μ„œλ²„μ— 데이터λ₯Ό μš”μ²­ν•˜λŠ” ν΄λΌμ΄μ–ΈνŠΈ 풀링 방식을 μ‚¬μš©ν•˜λ―€λ‘œ, μ„œλ²„ ν‘Έμ‹œ λ°©μ‹μ˜ μ‹€μ‹œκ°„ μ„œλΉ„μŠ€λŠ” λ§Œλ“€ 수 μ—†μŠ΅λ‹ˆλ‹€.
2. Ajaxλ‘œλŠ” λ°”μ΄λ„ˆλ¦¬ 데이터λ₯Ό λ³΄λ‚΄κ±°λ‚˜ 받을 수 μ—†μŠ΅λ‹ˆλ‹€.
3. Ajax μŠ€ν¬λ¦½νŠΈκ°€ ν¬ν•¨λœ μ„œλ²„κ°€ μ•„λ‹Œ λ‹€λ₯Έ μ„œλ²„λ‘œ Ajax μš”μ²­μ„ 보낼 μˆ˜λŠ” μ—†μŠ΅λ‹ˆλ‹€.
4. ν΄λΌμ΄μ–ΈνŠΈμ˜ PC둜 Ajax μš”μ²­μ„ 보낼 μˆ˜λŠ” μ—†μŠ΅λ‹ˆλ‹€.

μ„œλ²„ ν‘Έμ‹œ(server push) λ°©μ‹μ΄λž€ μ‚¬μš©μžκ°€ μš”μ²­ν•˜μ§€ μ•Šμ•„λ„ μ„œλ²„κ°€ μ•Œμ•„μ„œ μžλ™μœΌλ‘œ νŠΉμ • 정보λ₯Ό μ œκ³΅ν•˜λŠ” 것을 μ˜λ―Έν•©λ‹ˆλ‹€. ex)슀마트 폰 ν‘Έμ‹œ μ•Œλ¦Ό

βœ” κ΅¬μ„±μš”μ†Œ

  • μ›Ή νŽ˜μ΄μ§€μ˜ ν‘œν˜„μ„ μœ„ν•œ HTMLκ³Ό CSS
  • 데이터에 μ ‘κ·Όν•˜κ±°λ‚˜ ν™”λ©΄ ꡬ성을 λ™μ μœΌλ‘œ μ‘°μž‘ν•˜κΈ° μœ„ν•΄ μ‚¬μš©λ˜λŠ” DOM λͺ¨λΈ
  • λ°μ΄ν„°μ˜ κ΅ν™˜μ„ μœ„ν•œ JSONμ΄λ‚˜ XML
  • μ›Ή μ„œλ²„μ™€μ˜ 비동기식 톡신을 μœ„ν•œ XMLHttpRequest 객체
  • μœ„μ—μ„œ μ–ΈκΈ‰ν•œ λͺ¨λ“  κΈ°μˆ μ„ κ²°ν•©ν•˜μ—¬ μ‚¬μš©μžμ˜ μž‘μ—… 흐름을 μ œμ–΄ν•˜λŠ” 데 μ‚¬μš©λ˜λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ

βœ” μž‘λ™μ›λ¦¬

Ajaxλ₯Ό μ΄μš©ν•œ μ›Ή μ‘μš© ν”„λ‘œκ·Έλž¨μ€ μžλ°”μŠ€ν¬λ¦½νŠΈ μ½”λ“œλ₯Ό 톡해 μ›Ή μ„œλ²„μ™€ 톡신을 ν•˜κ²Œ λ©λ‹ˆλ‹€. λ”°λΌμ„œ μ‚¬μš©μžμ˜ λ™μž‘μ—λŠ” 영ν–₯을 주지 μ•ŠμœΌλ©΄μ„œλ„ λ°±κ·ΈλΌμš΄λ“œμ—μ„œ μ§€μ†ν•΄μ„œ μ„œλ²„μ™€ 톡신할 수 μžˆμŠ΅λ‹ˆλ‹€.
λ‹€μŒ 그림은 Ajaxλ₯Ό μ΄μš©ν•œ μ›Ή μ‘μš© ν”„λ‘œκ·Έλž¨κ³Ό 기쑴의 μ›Ή μ‘μš© ν”„λ‘œκ·Έλž¨μ˜ λ™μž‘ 원리λ₯Ό κ°„λž΅νžˆ 보여주고 μžˆμŠ΅λ‹ˆλ‹€.

μ™Όμͺ½ 그림의 <Ajaxλ₯Ό μ΄μš©ν•œ μ›Ή μ‘μš© ν”„λ‘œκ·Έλž¨μ˜ λ™μž‘ 원리>λŠ” λ‹€μŒκ³Ό 같은 μˆœμ„œλ‘œ μ§„ν–‰λ©λ‹ˆλ‹€.

β‘  : μ‚¬μš©μžμ— μ˜ν•œ μš”μ²­ μ΄λ²€νŠΈκ°€ λ°œμƒν•©λ‹ˆλ‹€.
β‘‘ : μš”μ²­ μ΄λ²€νŠΈκ°€ λ°œμƒν•˜λ©΄ 이벀트 ν•Έλ“€λŸ¬μ— μ˜ν•΄ μžλ°”μŠ€ν¬λ¦½νŠΈκ°€ ν˜ΈμΆœλ©λ‹ˆλ‹€.
β‘’ : μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” XMLHttpRequest 객체λ₯Ό μ‚¬μš©ν•˜μ—¬ μ„œλ²„λ‘œ μš”μ²­μ„ λ³΄λƒ…λ‹ˆλ‹€. μ΄λ•Œ μ›Ή λΈŒλΌμš°μ €λŠ” μš”μ²­μ„ 보내고 λ‚˜μ„œ, μ„œλ²„μ˜ 응닡을 기닀릴 ν•„μš” 없이 λ‹€λ₯Έ μž‘μ—…μ„ μ²˜λ¦¬ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
β‘£ : μ„œλ²„λŠ” 전달받은 XMLHttpRequest 객체λ₯Ό 가지고 Ajax μš”μ²­μ„ μ²˜λ¦¬ν•©λ‹ˆλ‹€.
⑀와 β‘₯ : μ„œλ²„λŠ” μ²˜λ¦¬ν•œ κ²°κ³Όλ₯Ό HTML, XML λ˜λŠ” JSON ν˜•νƒœμ˜ λ°μ΄ν„°λ‘œ μ›Ή λΈŒλΌμš°μ €μ— μ „λ‹¬ν•©λ‹ˆλ‹€. μ΄λ•Œ μ „λ‹¬λ˜λŠ” 응닡은 μƒˆλ‘œμš΄ νŽ˜μ΄μ§€λ₯Ό μ „λΆ€ λ³΄λ‚΄λŠ” 것이 μ•„λ‹ˆλΌ ν•„μš”ν•œ λ°μ΄ν„°λ§Œμ„ μ „λ‹¬ν•©λ‹ˆλ‹€.
⑦ : μ„œλ²„λ‘œλΆ€ν„° 전달받은 데이터λ₯Ό 가지고 μ›Ή νŽ˜μ΄μ§€μ˜ μΌλΆ€λΆ„λ§Œμ„ κ°±μ‹ ν•˜λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό ν˜ΈμΆœν•©λ‹ˆλ‹€.
⑧ : 결과적으둜 μ›Ή νŽ˜μ΄μ§€μ˜ μΌλΆ€λΆ„λ§Œμ΄ λ‹€μ‹œ λ‘œλ”©λ˜μ–΄ ν‘œμ‹œλ©λ‹ˆλ‹€.

TCP
λ‚˜λ¬΄μœ„ν‚€

profile
전주은
이전 포슀트

πŸ‡ Javascript async/await

0개의 λŒ“κΈ€