[ Spring Boot ] 맨날 까먹는 나를 위한 복습 - 17 -

17.1 댓글 등록의 개요

• REST API 요청을 보낼 때 실제 웹페이지 동작에서는 해당 웹 페이지에서 바로 요청을 보냄.
• 이를 위한 자바스크립트 API는 아래와 같음.
  • document.querySelector() : 웹 페이지에서 특정 요소(버튼)를 찾아 반환합니다.
  • addEventListener() : 특정 요소에 이벤트가 발생(버튼 클릭) 했을 때 특정 동작(댓글 객체 전달)을 수행합니다.
  • fetch() : 웹 페이지에서 REST API 요청(POST 요청)을 보냅니다.

 

 

17.2 댓글 생성 뷰 페이지 만들기

• 히든 인풋이란? 웹 페이지에 표시되지 않는 요소로, 보이지는 않지만 값을 가지고 있어야 할 때 사용

 

17.3 자바스크립트로 댓글 달기

• 아이디 선택자(#id)란?
  • id 값으로 대상을 찾을 때 id 값 앞에 #을 붙이는 것
  • querySelector() 메서드로 웹 페이지에서 해당 id 값을 가진 요소를 찾아 변수에 저장하는 코드

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

 

• 리스너란?
  • 이름처럼 해당 요소에 이벤트가 발생하는지 항상 귀를 갖다 대고 있다가 이벤트가 발생하면 지정된 함수를 실행

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

 

• 객체 리터럴(object literal) 방식이란?
  • 객체를 선언해 사용하는 방식

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

 

• querySelector() 메서드로 키 값 가져오기

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

 

• fetch() 함수를 사용하여 웹 페이지에서 HTTP 통신하는 법

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