비동기 댓글

학습 목표

⚠️ v6/v8 의 답답함

🛠️ 비동기 통신의 발상

오늘 만들 것

① DB — 댓글 테이블 신설

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
);

👉 boardnum 이 myboard.num 을 가리키는 FK 첫 등장. ON DELETE CASCADE — 글이 지워지면 댓글도 함께 삭제.

② Reply 도메인 + Mapper

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

// com.smhrd.mapper.ReplyMapper
public interface ReplyMapper {
    List<Reply> selectList(int boardnum);
    void insert(Reply r);
}

② Mapper XML

<mapper namespace="com.smhrd.mapper.ReplyMapper">

    <select id="selectList" parameterType="int"
            resultType="com.smhrd.domain.Reply">
        SELECT num, content, boardnum, writer, created_at
        FROM myreply
        WHERE boardnum = #{boardnum}
        ORDER BY num ASC
    </select>

    <insert id="insert" parameterType="com.smhrd.domain.Reply"
            useGeneratedKeys="true" keyProperty="num">
        INSERT INTO myreply(content, boardnum, writer)
        VALUES(#{content}, #{boardnum}, #{writer})
    </insert>

</mapper>

👉 useGeneratedKeys + keyProperty: INSERT 후 자동 증가된 num 이 객체로 돌아옴.

③ Service

package com.smhrd.service;

@Service
public class ReplyService {

    @Autowired
    private ReplyMapper mapper;

    public List<Reply> list(int boardnum) {
        return mapper.selectList(boardnum);
    }

    public Reply add(Reply r) {
        mapper.insert(r);
        // insert 후 num 이 채워진 r 이 그대로 돌아옴
        return r;
    }
}

④ REST Controller — 조회

package com.smhrd.controller;

@RestController
@RequestMapping("/api/replies")
public class ReplyApiController {

    @Autowired
    private ReplyService service;

    // GET /api/replies?boardnum=3
    @GetMapping
    public List<Reply> list(@RequestParam int boardnum) {
        return service.list(boardnum);
    }
}

👉 글 번호로 댓글 목록을 JSON 배열로 반환.

④ REST Controller — 등록

    // POST /api/replies
    @PostMapping
    public Reply add(@RequestBody Reply r,
                     HttpSession session) {
        Member u = (Member) session.getAttribute("loginUser");
        if (u == null) {
            throw new RuntimeException("로그인이 필요합니다");
        }
        r.setWriter(u.getId());   // 세션에서 작성자 ID
        return service.add(r);
    }

👉 세션에서 작성자를 채워 넣고 새 댓글 객체를 그대로 응답.

⑤ JSP — 댓글 영역 마크업

<!-- /WEB-INF/views/board/view.jsp 의 일부 -->
<h1>${board.title}</h1>
<div>${board.content}</div>

<hr/>
<h3>댓글</h3>

<div id="replyList">
    <!-- 여기에 JS 로 댓글 추가됨 -->
</div>

<c:if test="${not empty sessionScope.loginUser}">
    <form id="replyForm" onsubmit="addReply(event)">
        <input type="text" id="replyInput" placeholder="댓글" />
        <button type="submit">등록</button>
    </form>
</c:if>

<script>
    const BOARD_NUM = ${board.num};
    /* 다음 슬라이드의 JS */
</script>

⑥ JS — 댓글 목록 불러오기

// 페이지 로드 시 기존 댓글 가져오기
async function loadReplies() {
    const res = await fetch(`/api/replies?boardnum=${BOARD_NUM}`);
    const replies = await res.json();

    const list = document.getElementById('replyList');
    list.innerHTML = '';
    replies.forEach(r => {
        list.appendChild(renderReply(r));
    });
}

// 페이지 로드 시 한 번 실행
loadReplies();

👉 fetch 로 JSON 배열을 받아 한 줄씩 DOM 으로 그립니다.

⑥ JS — 댓글 한 줄 렌더링

function renderReply(r) {
    const div = document.createElement('div');
    div.className = 'reply';
    div.innerHTML = `
        <strong>${r.writer}</strong>
        <span>${r.createdAt}</span>
        <p>${r.content}</p>
    `;
    return div;
}

👉 댓글 객체 하나를 받아 DOM 노드 하나를 만듭니다. 등록 시에도 재사용.

⑦ JS — 댓글 작성 — 요청 보내기

async function addReply(event) {
    event.preventDefault();   // form 의 기본 제출 막기

    const input = document.getElementById('replyInput');
    const content = input.value.trim();
    if (!content) return;

    const res = await fetch('/api/replies', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            boardnum: BOARD_NUM,
            content: content
        })
    });
    /* 다음 슬라이드 — 응답 처리 */
}

👉 preventDefault() 로 페이지 새로고침을 막고, JSON 으로 POST 합니다.

⑦ JS — 댓글 작성 — 응답 처리

    try {
        if (!res.ok) throw new Error('서버 오류');

        const newReply = await res.json();
        // 응답으로 받은 댓글을 화면 끝에 추가
        document.getElementById('replyList')
                .appendChild(renderReply(newReply));

        input.value = '';   // 입력창 비움
    } catch (e) {
        alert('댓글 등록 실패: ' + e.message);
    }
}

👉 응답 JSON 을 같은 renderReply 로 그려서 끝에 붙이고, 입력창만 비움. 페이지 그대로.

전체 흐름 — 시간순

v6/v8 → v9 핵심 차이 — 기존 동기 폼

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

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

// → 페이지 전체 새로고침

👉 등록 버튼을 누르면 페이지가 통째로 다시 그려집니다. 스크롤 위치도 잃음.

v6/v8 → v9 핵심 차이 — 새 비동기 fetch

<form onsubmit="addReply(event)">
    <input id="replyInput"/>
    <button>등록</button>
</form>

// 서버 (@RestController)
return r;   // JSON

// → JS 가 화면 끝에 새 댓글만 추가
//   페이지 그대로

👉 같은 화면 안에서 댓글만 살짝 추가됩니다. 스크롤·입력 상태 보존.

async / await — JS 의 비동기

// 옛 방식 (Promise)
fetch('/api/replies?boardnum=3')
    .then(res => res.json())
    .then(replies => {
        replies.forEach(r => { ... });
    })
    .catch(err => console.error(err));

// 현대 (async / await — 가독성 ↑)
async function load() {
    try {
        const res = await fetch('/api/replies?boardnum=3');
        const replies = await res.json();
        replies.forEach(r => { ... });
    } catch (err) {
        console.error(err);
    }
}

👉 await 는 async 함수 안에서만. 비동기를 동기처럼 읽기 좋게.

흔한 함정 4 가지

새로고침 없이 — 두 가지 의미

다음 차시 미리보기 — v10

v9 의 의미

🔄 Before / After

이번 차시의 데이터 흐름

정리

다음: v10 자잘한 비동기 + 첨부파일 — 같은 패턴 응용.