1. 문제

2. 새 도구

3. 코드

-- 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>
    `;
}

4. 정리

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

5. Before / After