댓글 등록의 개요

웹 페이지에서 댓글 등록하기

닷글 뷰 페이지(_comments)의 구성

• document.querySelector(): 웹 페이지에서 특정 요소(버튼)을 찾아 반환
• addEventListener(): 특정 요소에 이벤트가 발생(버튼 클릭)했을 때 특정 동작(댓글 객체 전달) 수행
• fetch(): 웹페이지에서 REST API 요청 (POST 요청)을 보냄

댓글 생성 뷰 페이지 만들기

<div class="card m-2" id="comments-new"> // class 속성 수정, id 속성 추가
    <div class="card-body">
        <!-- 댓글 작성 폼 -->
        <form>
            <!-- 닉네임 입력 -->
            <div class="mb-3"> // 닉네임 입력 폼 만들기
                <label class="form-label">닉네임</label>
                <input type="text" class="form-control"
                       id="new-comment-nickname">
            </div>
            <!-- 댓글 본문 입력 --> // 댓글 본문 입력 폼 만들기
            <div class="mb-3">
                <label class="form-label">댓글 내용</label>
                <textarea type="text" class="form-control" 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-primary"
                    id="comment-create-btn">댓글 작성</button> // 전송 버튼 만들기
        </form>

자바스크립트로 댓글 달기

1. 버튼 클릭 이벤트 감지하기

<div class="card m-2" id="comments-new">
		(중략)
</div>
<script>
{
}
</script>

<div class="card m-2" id="comments-new">
		<div class="card-body">
		<!-- 댓글 작성 폼 --> 주석
				<form>
						<div class="mb-3">
						（중략）
						</div>
						<div class="mb-3">
						（중략）
						</div>
						<div class="mb-3 form-check"> // 삭제
						（중략)
						</div> // 삭제
						<button type="submit" class="btn btn-primary">Submit</button>
				</form>
			</div>
</div>

<script>
{
    // 댓글 생성 버튼 변수화
    const commentCreateBtn = document.querySelector("#comment-create-btn");
    // 댓글 클릭 이벤트 감지
    commentCreateBtn.addEventListener("click", function() {
        console.log("버튼을 클릭했습니다.");
    });
}
</script>

2. 새 댓글 자바스크립트 객체 생성하기

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

• 객체 리터럴 방식 사용

<객체 리터럴 방식>

var object = {
		key1: value1,
		key2: value2,
		...
}

					  <input type="text" class="form-control" id="new-comment-nickname">
            </div>
            <!-- 댓글 본문 입력 -->
            <div class="mb-3">
                <label class="form-label">댓글 내용</label>
                <textarea type="text" class="form-control" 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-primary"
                    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,
            // 부모 게시글의 id
            articleId: document.querySelector("#new-comment-article-id").value
        };
				// 댓글 객체(comment)가 잘 만들어졌는지 확인하기 위해 객체를 콘솔에 출력
        console.log(comment);
});

3. 자바스크립트로 REST API 호출하고 응답 처리하기