1. 문제

2. 새 도구

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