코딩자율학습단 스프링부트_17장

댓글 등록의 개요

16장에서 댓글 목록 게시글 아래 출력했으나 새 댓글을 등록하는 부분은 아직 구현하지 않았다.

새 댓글을 등록하기 위한 뷰 페이지를 만들고 자바스크립트 코드로 RESP API를 호출해 보도록 하겠다.

더 자세히 설명하자면 document.querySelector()로 웹 페이지에서 특정 요소를 찾아 반환하고,

addEventListener()로 이벤트 발생 시 특정 동작을 수행하게 하고 fetch()로 웹 페이지에서 REST API 요청을 보낸다.

---

댓글 생성 뷰 페이지 만들기

댓글 생성 뷰 페이지인 _new.mustache 파일을 열어 아래와 같이 코드를 추가해 준다.

<div class="card m-2" id="comments-new">
    <div class="card-body">
        <!-- 댓글 작성 폼 -->
        <form>
            <div class="mb-3">
                <label for="nickname" class="form-label">닉네임</label>
                <input type="text" class="form-control" id="new-comment-nickname" placeholder="닉네임을 작성해주세요.">
            </div>
            <div class="mb-3">
                <span class="input-group-text">댓글 내용</span>
                <textarea type="text" class="form-control" rows="5" id="new-comment-body" aria-label="With textarea"></textarea>
            </div>
            {{#article}}
                <input type="hidden" id="new-comment-article-id" value="{{id}}">
            {{/article}}
            <button type="button" class="btn btn-outline-primary" id="comment-create-btn">Comment Submit</button>
        </form>
    </div>
</div>

이제 위 화면에서 'Comment Submit' 버튼을 클릭 시 댓글을 입력할 수 있게 해 보도록 하겠다.

---

자바스크립트로 댓글 달기

이제 댓글 생성을 위한 자바스크립트 코드를 작성할 것인데 수정중인 파일에 아래와 같이 우선 작성해 준다.

           ...
           <button type="button" class="btn btn-outline-primary" id="comment-create-btn">Comment Submit</button>
        </form>
    </div>
</div>

<script>
    {
        
    }
</script>

<script>와 </script> 사이 블록에다가,

아래와 같이 댓글 생성 버튼을 변수화하고 댓글 클릭 이벤트를 감지하는 코드를 먼저 작성해준다.

        // 댓글 생성 버튼 변수화
        const commentCreateBtn = document.querySelector("#comment-create-btn");

        // 댓글 클릭 이벤트 감지
        commentCreateBtn.addEventListener("click", function () {
            console.log("버튼을 클릭했습니다.")
        });

위와 같이 작성 후 망치 아이콘을 클릭하고 페이지를 새로고침하여 Comment Submit 버튼을 클릭하면,

개발자 도구 콘솔창으로 아래와 같이 로그가 출력되는 것을 볼 수 있다.

이제 콘솔 출력을 위해 작성한 줄의 코드를 지우고,

새로 작성한 닉네임과 댓글 본문을 자바스크립트 객체로 만들어 출력을 해 보도록 하겠다.

        // 댓글 클릭 이벤트 감지
        commentCreateBtn.addEventListener("click", function () {
            const comment = {
                // 새 댓글의 닉네임
                nickname: document.querySelector("#new-comment-nickname").value,
                // 새 댓글의 본문
                body: document.querySelector("#new-comment-body").value,
                // 부모 게시글 id
                articleId: document.querySelector("#new-comment-article-id").value
            };

            // 댓글 객체 출력
            console.log(comment)
        });

다시 한 번 망치 아이콘을 누르고 이번에는 페이지에서 닉네임과 댓글 작성 후 콘솔로 출력을 확인한다.

이제 fetch() 함수로 REST API 호출을 하고 응답을 처리하는 코드를 추가해 볼 것이다.

            // fetch() - 비동기 통신을 위한 API
            const url = "/api/articles/" + comment.articleId + "/comments";
            fetch(url, {
                method: "POST", // POST 요청
                headers: { // 전송 본문의 데이터 타입(JSON) 정보
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(comment) //comment 객체를 JSON 문자열로 변환해 전송
            }).then(response => {
                // HTTP 응답 코드에 따른 메시지 출력
                const msg = (response.ok) ? "댓글이 등록됐습니다." : "댓글 등록 실패..!";
                alert(msg);
                // 현재 페이지 새로 고침
                window.location.reload();
            });

 

위와 같이 작성 후 실행하여 Comment를 작성하면 정상적으로 작성되는 것을 확인할 수 있다.