[Day 17] 웹 페이지에서 댓글 등록하기

1. 댓글 등록의 개요

크게 2가지로 진행된다.

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

사용하는 자바스크립트 API

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

---

2. 댓글 생성 뷰 페이지 만들기

resources > articles > Comments > _new.mustache 코드

---

3. 자바스크립트로 댓글 달기

// 해당 id 값을 가진 요소를 찾아 변수에 저장하기
자료형 변수명 = document.querySelector("#id_값");

// 이벤트가 감지되면 이벤트 처리 함수 실행
요소명.addEventListener("이벤트_타입", 이벤트_처리_함수)

// id 값으로 특정 요소를 찾고, 찾은 대상의 value를 가져옴
document.querySelecter("#id_값).value

 

resources > articles > Comments > _new.mustache 코드 추가

 

실행 결과

 

fetch('API_주소', {
	method: 'POST',					// 요청 메서드(GET, POST, PATCH, DELETE)
    headers: {						// 헤더 정보
    	"Content-Type": "application/json"
    },
    body: JSON.stringify(객체)	            // 전송 데이터
}).then(responce => { 			    // 응답을 받아 처리하는 구문
	응답_처리문;
});

 

resources > articles > Comments > _new.mustache 코드 추가

 

실행 결과