비동기 통신이 푼 문제

학습 목표

⚠️ v6 게시판의 답답함

옛날 웹의 모습

🛠️ 비동기 통신 (Ajax) 의 발상

비유 — 식당의 두 방식

Ajax 의 어원

현대 웹의 어디서 비동기가 쓰이나

두 통신의 4 가지 차이

코드 비교 — 동기 (form 제출)

<form action="/reply/add"
      method="post">
    <input name="content"/>
    <button>등록</button>
</form>

// 서버 (@Controller)
return "redirect:/board/view?num=...";

// → 페이지 전체 다시 받음

👉 등록 후 redirect 가 일어나면 화면을 통째로 다시 그립니다.

코드 비교 — 비동기 (fetch)

<form onsubmit="add(event)">
    <input id="content"/>
    <button>등록</button>
</form>

async function add(event) {
    event.preventDefault();
    const res = await fetch(
      '/api/replies', {...});
    const newR = await res.json();
    // DOM 에 추가만
    list.appendChild(render(newR));
}

// → 페이지 그대로

👉 같은 화면 안에서 새 댓글만 살짝 붙입니다.

Ajax 의 등장 — 패러다임 전환

본 과정에서 만들 비동기 기능

• 댓글 비동기 작성 (v9) — 입력하고 등록 누르면 새로고침 없이 댓글 등장
• 조회수 자동 증가 (v10) — 글 들어가면 +1 즉시 반영
• 사진 첨부 (v10) — ADD COLUMN photo 와 짝
• FormData 업로드 (v10) — multipart/form-data

👉 모두 페이지 그대로 + 부분만 변경. 현대 웹의 표준.

비동기의 두 축 — 서버 + 클라이언트

👉 본 과정은 둘 다 다룹니다. 양쪽이 짝을 이뤄야 비동기가 동작.

fetch — 가장 단순한 형태

// GET — 데이터 받기
const res = await fetch('/api/boards/3');
const board = await res.json();
console.log(board.title);   // myboard.num=3 의 제목

// POST — 데이터 보내기
const r2 = await fetch('/api/boards', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
        title: '새 글',
        content: '안녕하세요'
    })
});
const newBoard = await r2.json();

👉 「URL 에 요청 보내고 → 응답 받음」. 이전과 발상은 같지만 — JS 가 직접 통제.

JSON — 비동기의 공용어

// JavaScript 객체
const board = {
    num: 3,
    title: "첫 글",
    writer: "hong"
};

// JSON 문자열로 변환 (서버로 보낼 때)
const text = JSON.stringify(board);
// '{"num":3,"title":"첫 글","writer":"hong"}'

// JSON 문자열을 객체로 (서버에서 받을 때)
const obj = JSON.parse(text);
console.log(obj.title);  // "첫 글"

👉 자바와 자바스크립트가 「JSON」 이라는 공용어로 대화. 서로 모르는 언어지만 JSON 으로 변환·해석.

F12 로 직접 보기 — 현대 사이트

1. 네이버 또는 인스타그램 접속
2. F12 → Network → Fetch/XHR 필터 선택
3. 스크롤 내려보기, 좋아요 누르기, 검색하기 등
4. 매 액션마다 작은 JSON 요청이 발생함을 봄

비동기 = 사용자 경험의 혁명

주의 — 비동기의 함정

본 과정의 학습 순서

1. 이번 차시 — 비동기 통신의 「왜?」 를 안다
2. JSON 형식 깊이 보기 — 데이터 표기법 이해
3. @RestController — 서버 측 도구 등장
4. HTTP 메서드 어노테이션 — RESTful URL 디자인
5. ★ v8 REST 변환 — v6 게시판을 REST API 로
6. ★ v9 비동기 댓글 — fetch 첫 사용
7. ★ v10 자잘한 비동기 — 패턴 응용
8. ★ v∞ 디버깅 워크숍 — 마무리

🔄 Before / After

📊 한 그림 정리

이번 차시의 데이터 흐름

정리

다음: JSON 형식 깊이 — DTO 가 JSON 으로 변환되는 그 순간.