17장.md

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

댓글 등록하기

1. 댓글 생성 뷰 페이지에 댓글 입력 폼 만들기
2. 댓글 작성 버튼 클릭해 REST API 요청 보내기

버튼 변수화

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

자료형 변수명 = document.querySelector("#id_값");

버튼 이벤트 감지

웹 페이지에서 발생한 특정 이벤트는 addEventListener() 메소드를 사용해 감지한다.

요소명.addEventListener("이벤트_타입", 이벤트_처리_함수)

댓글 객체 생성

댓글 객체를 자바스크립트로 만드는 방법은 객체 리터럴 방식, 생성자 함수, Object.create() 방식이 있다.
책에서는 객체를 변수로 선언하는 객체 리터럴 방식을 사용했다.

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

REST API 호출과 응답 처리

자바스크립트로 REST API 요청을 보낼 때 fetch() 함수를 사용한다.
POST 요청을 보낼 때 형식은 다음과 같다. 전송 데이터가 자바스크립트 객체이므로 JSON 문자열로 반환해 보낸다.

fetch('API_주소', {
    method: 'post',
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify(객체)
  }).then(response => {
    응답_처리문;
});