유튜브

목표 : 댓글 등록 뷰페이지를 만들고, JS로 REST API를 호출해서 새 댓글 등록

<div class="card m-2" id="comments-new">
    <div class="card-body">
        <!-- 댓글 작성 폼 -->
        <form>
            <!-- 닉네임 입력 -->
            <div class="mb-3">
                <label class="form-label">닉네임</label>
                <input type="text" class="form-control form-control-sm" id="new-comment-nickname">
            </div>
            <!-- 댓글 본문 입력 -->
            <div class="mb-3">
                <label class="form-label">댓글 내용</label>
                <textarea type="text" class="form-control form-control-sm" rows="3" id="new-comment-body"></textarea>
            </div>
            <!-- 히든 인풋 -->
            {{#article}}
                <input type="hidden" id="new-comment-article-id" value="{{id}}">
            {{/article}}
            <!-- 전송 버튼 -->
            <button type="button" class="btn btn-outline-primary btn-sm" id="comment-create-btn">댓글 작성</button>
        </form>
    </div>


</div>

_new.mustache를 이렇게 작성했다
히든 인풋은 댓글은 article의 id를 가져야 해서 보이지 않게 article의 id가 값으로 들어가게 input 태그를 넣었다.

이렇게 폼은 만들었고 버튼을 눌렀을 때 댓글이 작성되게 하기 위해 JS를 사용한다.

<Script>
{
  // 댓글 생성 버튼 변수화
  const commentCreateBtn = document.querySelector("#comment-create-btn");
  // 댓글 클릭 이벤트 감지!
  commentCreateBtn.addEventListener("click", function() {
    // 새 댓글 객체 생성
    const comment = {
      nickname: document.querySelector("#new-comment-nickname").value,
      body: document.querySelector("#new-comment-body").value,
      article_id: document.querySelector("#new-comment-article-id").value
    };
    // 댓글 객체 출력
    console.log(comment);
    // fetch() - 비동기 통신을 위한 API , JS에서 REST API 요청을 보낼 수 있다 
    const url = "/api/articles/" + comment.article_id + "/comments";
    fetch(url, {
      method: "post",
      body: JSON.stringify(comment),
      headers: {
        "Content-Type": "application/json"
      }
    });
  });
}
</script>

이렇게 _new.mustache에 JS 코드를 넣어줬다.
querySelector로 버튼을 commentButton 변수로 가져왔다.
이벤트리스너를 등록해서 클릭했을 때 실행할 내용을 넣어줬다.
comment 객체를 먼저 만든다. 이 때 필드명을 CommentDto에서 인식할 수 있게 해줘야한다. (
article_id로 받기로 했으니까 article_id로 해주는 것처럼

fetch를 이용해서 API 요청을 JS상에서 보낸다.
fetch(보낼 url, 보낼 내용) 으로 작성하면 된다.

DB에 추가됨

이제 폼에 내용을 입력하면 REST API 로 request를 보내서 db에 등록까지는 했는데 request를 보내면 response가 올텐데 그 처리를 해주자

<div class="card m-2" id="comments-new">
    <div class="card-body">
        <!-- 댓글 작성 폼 -->
        <form>
            <!-- 닉네임 입력 -->
            <div class="mb-3">
                <label class="form-label">닉네임</label>
                <input type="text" class="form-control form-control-sm" id="new-comment-nickname">
            </div>
            <!-- 댓글 본문 입력 -->
            <div class="mb-3">
                <label class="form-label">댓글 내용</label>
                <textarea type="text" class="form-control form-control-sm" rows="3" id="new-comment-body"></textarea>
            </div>
            <!-- 히든 인풋 -->
            {{#article}}
                <input type="hidden" id="new-comment-article-id" value="{{id}}">
            {{/article}}
            <!-- 전송 버튼 -->
            <button type="button" class="btn btn-outline-primary btn-sm" id="comment-create-btn">댓글 작성</button>
        </form>
    </div>


</div>

<Script>
{
  // 댓글 생성 버튼 변수화
  const commentCreateBtn = document.querySelector("#comment-create-btn");
  // 댓글 클릭 이벤트 감지!
  commentCreateBtn.addEventListener("click", function() {
    // 새 댓글 객체 생성
    const comment = {
      nickname: document.querySelector("#new-comment-nickname").value,
      body: document.querySelector("#new-comment-body").value,
      article_id: document.querySelector("#new-comment-article-id").value
    };
    // 댓글 객체 출력
    console.log(comment);
    // fetch() - 비동기 통신을 위한 API , JS에서 REST API 요청을 보낼 수 있다
    const url = "/api/articles/" + comment.article_id + "/comments";
    fetch(url, {
      method: "POST",
      body: JSON.stringify(comment),
      headers: {
        "Content-Type": "application/json"
      }
    }).then(response => {
    //http 응답 코드에 따른 메세지 출력
    const msg = (response.ok) ? "댓글이 등록되었습니다." : "댓글 등록 실패 ! ";
    alert(msg);
    //현재 페이지 새로고침
    window.location.reload();
    });
  });
}
</script>

fetch().then(response =>
로 response에 대해 처리할 내용을 넣어준다
응답결과에 따라 msg를 정해서 alert로 화면에 표시해주고 변경된 db를 화면에 표시하기 위해
window.location.reload()로 새로고침 해주자.

요약

• 뷰페이지에 댓글 등록을 위한 내용을 넣어줌
• 댓글 작성을 누르면 처리할 JS 코드를 만듬
• 버튼을 먼저 변수화 (quertSelector로)
• 버튼 클릭 이벤트 감지해서 객체 만듬
• fetch API를 이용해서 REST API를 호출함
• 응답이 돌아오면 이용해서 alert 창을 출력하고 페이지를 새로고침 해준다.