길벗 코딩자율학습단 18일차

donghan378·2025년 2월 1일

길벗_코딩자율학습단_12기

목록 보기

18/21

~17.3 자바스크립트로 댓글 달기(종이책 p.489~510)

16장에서는 댓글 목록을 게시글 아래에 출력하였다. 이 장에서는 새 댓글을 등록하기 위한 뷰 페이지를 만들고 자바스크립트 코드로 REST API를 호출해본다.

그동안 REST API 요청을 보낼 때 Talend API Tester를 이용했는데, 실제 게시판에서는 해당 웹 페이지에서 바로 요청을 보낸다. 이를 위해 사용하는 자바스크립트 API는 다음과 같다.

부트스트랩 홈페이지(https://getbootstrap.com)에 접속해 부트스트랩 v5.0.2를 선택하고 왼쪽 상단의 검색창에 card로 검색해 Body 스타일을 찾은 후 코드를 복사한다.
_new.mustache 파일에 코드를 붙여 놓은 후 다음과 같이 수정한다.
```
<div class=”card m-2” id=”comments-new”>
	<div class=”card-body”>
	</div>
</div>
```
class=”card m-2”는 card 스타일을 사용하고 여백을 2만큼 주는 것이고, id=”comments-new”는 이 요소를 유일하게 구분하기 위한 id를 붙이는 것이다.
부트스트랩에서 form으로 검색해 Overview 스타일을 찾은 후 코드를 카드 본문(card-boy) 영역에 붙여 넣는다.
- <div> 영역 3개 중에서 세 번째는 필요 없으므로 지운다.
나머지 코드는 다음과 같이 수정하고 각 요소의 id도 이해하기 쉽게 변경한다.

댓글은 부모 게시글의 id값을 가지고 있어야 하므로, 부모 게시글의 id를 히든 인풋으로 넣는다.

히든 인풋(hidden input)이란 웹 페이지에 표시되지 않는 요소로, 보이지는 않지만 값을 가지고 있어야 할 때 사용한다.

이렇게 작성하면 게시글의 상세 페이지에서 입력 폼이 보인다.

이제 댓글 작성 버튼을 클릭했을 때 댓글을 입력할 수 있게 해 본다. 이 부분은 자바스크립트로 구현하고, _new.mustache 코드 아래에 작성한다.

웹 페이지에서도 자바스크립트를 사용하면 REST API를 호출할 수 있다.

_new.mustache 코드의 맨 아래에 <script></script> 코드를 추가하고 안쪽을 블록({})으로 잡는다.
자바스크립트의 querySelector() 메서드는 웹 페이지에서 특정 요소를 선택할 때 사용한다. 메서드에 id, name, class, HTML 태그 등의 값을 입력하면 해당 속성 값을 가진 대상을 반환하는데, 여기서는 id값을 이용한다.
- id 값으로 대상을 찾을 때는 id 값 앞에 #을 붙이며, 이를 아이디 선택자라고 한다.
```
// 해당 id 값을 가진 요소를 찾아 변수에 저장하기
자료형 변수명 = document.querySelector(”#id_값”);
```
댓글 작성 버튼의 id값인 comment-create-btn을 #과 함께 querySelector() 메서드로 입력하고, 상수 타입의 commentCreateBtn 변수에 저장한다.
버튼이 클릭되는지 감지하기 위해 addEventListener() 메서드를 사용한다. addEventListener()메서드는 HTML 문서의 특정 요소의 이벤트를 감지한다.
```
// 이벤트가 감지되면 이벤트 처리 함수 실행
요소명.addEventListener(”이벤트_타입”, 이벤트_처리_함수)
```
댓글 작성 버튼(commentCreateBtn)을 클릭했을 때 함수를 실행하도록 한다.

새로 작성한 닉네임과 댓글 본문을 자바스크립트 객체로 만들어 본다.

자바 스크립트에서 객체를 만드는 방법은 3가지로 객체 리터럴 방식, 생성자 함수 방식, Object.create() 방식이다. 여기서는 닉네임과 댓글 본문을 객체 리터럴 방식으로 만든다.

객체 리터럴(object literal)방식은 객체를 변수로 선언해 사용하는 방식이다.

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

키 값은 다음과 같이 querySelector() 메서드로 가져온다.

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

앞에서는 Talend API Tester로 REST API 호출을 연습했는데, 이 요청을 웹 페이지에서 자바스크립트를 활용해 보내본다.

fetch() 함수는 웹 페이지에서 HTTP 통신을 하는데 사용한다. fetch() 함수를 사용하면 웹 페이지에서 GET, POST, PATCH, DELETE 같은 요청을 보내고 응답을 받을 수 있다. POST 요청을 보낼 때는 다음과 같다.

fetch(’API_주소’, {
	method: ‘POST’,
	headers: {
		“Content-Type”: “application/json”
	},
	body: JSON.stringify(객체)
}).then(response ⇒ {
	응답_처리문;
});

전송 본문에는 JSON 형태로 보내야 하므로 JSON.stringify() 함수에 객체를 전달해 JSON 형태로 변환한다. 이렇게 요청을 보내면 응답 객체인 response를 받는다. response 안에는 응답에 관한 정보가 들어 있다.

먼저 url이라는 상수(const) 타입의 변수를 만들고 댓글 생성 API 주소를 저장한다. API 주소에서 부모 게시글의 id는 매번 바뀌므로 comment.articleId로 작성하고 앞뒤 주소와 연결한다.
fetch() 함수를 작성한다
- 첫 번째 전달값으로 API 주소를 가지고 있는 url을 넘긴다.
- 두 번째 전달값으로 요청 메서드, 헤더 정보, 전송 본문을 넘긴다.
보통 댓글을 작성하면 “댓글이 등록 됐습니다.” 같은 메시지가 나오므로 fetch() 함수의 응답 처리 구문으로 구현해 본다.
- .then(response ⇒ {응답 처리문}) 구문으로 작성하고, 여기서 response는 API 요청을 보내고 받은 응답 객체이다.
- 응답 객체의 상태가 ok면 “댓글이 등록됐습니다.”를, 아니면 “댓글 등록 실패..!”를 msg 변수에 저장한 후 alert() 함수로 출력한다.
- 댓글 생성을 완료하고 메시지까지 잘 출력됐다면 window.location.reload()로 웹 페이지를 새로 고침한다.