v9
★ LAB · REST

비동기 댓글

REST API와 마무리 — 실습

📍 지금 어디를 만지고 있나요?
브라우저
REST API와 마무리
DB

사전 준비

이번 실습의 목표

myreply 테이블을 FK 로 myboard 와 연결하고, ReplyApiController 를 만들어 fetch 로 비동기 등록·조회. 응답 JSON 을 DOM 에 직접 추가.

1
코드 작성
-- DB: 새 테이블 + FK
CREATE TABLE myreply (
    num        INT          PRIMARY KEY AUTO_INCREMENT,
    content    VARCHAR(500) NOT NULL,
    boardnum   INT          NOT NULL,
    writer     VARCHAR(50)  NOT NULL,
    created_at DATETIME     DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (boardnum) REFERENCES myboard(num) ON DELETE CASCADE
);

// 도메인 (com.smhrd.domain)
@Data @AllArgsConstructor @NoArgsConstructor
public class Reply {
    private int num;
    private String content;
    private int boardnum;
    private String writer;
    private LocalDateTime createdAt;
}

// 서버 (com.smhrd.controller)
@RestController @RequestMapping("/api/replies")
public class ReplyApiController {
    @GetMapping
    public List<Reply> list(@RequestParam int boardnum) {
        return service.list(boardnum);
    }

    @PostMapping
    public Reply add(@RequestBody Reply r, HttpSession s) {
        Member u = (Member) s.getAttribute("loginUser");
        r.setWriter(u.getId());
        return service.add(r);
    }
}

// 클라이언트 JS
async function addReply(boardnum, content) {
    const res = await fetch('/api/replies', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({boardnum, content})
    });
    const newReply = await res.json();
    document.querySelector('#replyList').innerHTML += `
        <div>${newReply.writer}: ${newReply.content}</div>
    `;
}
CHECKPOINT
  • 코드를 작성한 뒤 빨간 줄(컴파일 오류)이 없는가?
2
실행 + 결과 확인

Run on Server 또는 javac+java 로 실행하고 결과를 확인합니다.

CHECKPOINT
  • 예상한 동작이 일어났는가?
  • 안 됐다면 F12 / 콘솔 / 로그 어디서 단서가 보이는가?

실습 완료 체크리스트

fetch + JSON.stringify
응답 JSON → DOM 추가
페이지 깜빡임 사라짐
v9 마일스톤