17.1~17.3 웹 페이지에서 댓글 등록하기(게시판 만들기 / 길벗 코딩 자율학습단)

댓글 등록하기

• 댓글 생성 뷰 페이지(_new.mustache)에 댓글 입력 폼 만들기
• [댓글 작성] 버튼을 클릭해 REST API 요청 보내기

 

버튼 변수화

• 버튼 같은 문서 내 특정 요소를 변수로 받아 오려면 다음과 같이 querySelector() 메서드를 사용해 해당 요소를 선택한 후 변수에 저장

// 형식
자료형 변수명 = document.querySelector("#id_값);
// 예시
nickname: document.querySelector("#new-comment-nickname");

 

 

버튼 이벤트 감지

• 클릭, 마우스 오버 같이 웹 페이지에서 발생한 특정 이벤트는 addEventListener() 메서드를 사용해 감지

// 형식 , 이벤트가 감지되면 이벤트 처리 함수를 실행
요소명.addEventListener("이벤트_타입", 이벤트_처리_함수)
// 예시
commentCreateBtn.addEventListener("click", function())

 

 

댓글 객체 생성

• 댓글 객체를 자바스크립트로 만드는 3가지 방법
• 객체 리터럴 방식 ( 선택 방법 )
• 생성자 함수 방식
• Object.create() 방식

객체 리터럴 방식

// 형식
var object = {
    key1: value1,
    key2: value2,
    ...
    }
// 예시
// 새 댓글 객체 생성
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
};

 

 

REST API 호출과 응답 처리

• 자바스크립트로 REST API 요청을 보낼 때 fetch() 함수 사용
• 전송 데이터가 자바스크립트 객체이므로 JSON 문자열로 변환해 보냄

POST 요청을 보낼 때 형식

// 형식
fetch('API_주소', {
    method: 'POST', //요청 메서드(GET, POST, PATCH, DELETE)
    header: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify(객체) //전송 데이터
}).then(response => {
    응답_처리문;
});

// 예시
fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(comment) // comment 객체를 JSON 문자열로 변환해 전송
}).then(response => {
//HTTP 응답 코드에 따른 메시지 출력
const msg = (response.ok) ? "댓글이 등록됐습니다." : "댓글 등록 실패..!";
alert(msg);
// 현재 페이지 새로 고침
window.location.reload();
});