학습 목표
- 비동기 통신이 푼 문제 의 핵심 개념을 안다
- 비동기 통신 (Ajax) 의 동작을 안다
- 동기와 비동기의 차이를 안다. 다음 차시들에서 실제 코드.
1. 문제
게시판에 댓글 하나 달 때마다 페이지 전체가 깜빡인다. 답답하다.
2. 새 도구
비동기 통신 (Ajax): 페이지 전체를 다시 로드하지 않고 필요한 부분만 서버와 주고받는 통신 방식.
3. 코드
// 동기 (전체 새로고침)
form 제출 → 서버 → 새 HTML → 화면 전체 깜빡
// 비동기 (Ajax)
fetch('/api/replies', {method: 'POST', body: ...})
.then(res => res.json())
.then(data => {
// 받은 데이터로 DOM 의 일부분만 업데이트
document.querySelector('#replyList').innerHTML += ...
});
// 페이지는 그대로, 변하는 부분만 변함
4. 정리
- 동기 = 전체 새로고침
- 비동기 = 필요한 부분만
- fetch / XMLHttpRequest
- JSON 으로 데이터 교환
5. Before / After
전 차시
게시판에 댓글 하나 달 때마다 페이지 전체가 깜빡인다. 답답하다.
이번 차시
동기와 비동기의 차이를 안다. 다음 차시들에서 실제 코드.
학습 확인 체크리스트
- 동기 = 전체 새로고침
- 비동기 = 필요한 부분만
- fetch / XMLHttpRequest
- JSON 으로 데이터 교환