코딩 자율학습단 4주차
코딩 자율학습단 4주차
16장. 웹 페이지에서 댓글 목록 보기
1.댓글의 레이아웃
댓글은 크게 두 영역으로 나뉩니다.
기존 댓글을 보여주는 영역(_list)와 새 댓글을 입력하는 영역(_new)입니다.
2.댓글 뷰 파일의 구성
댓글 뷰 파일은 댓글 영역을 보여주는 뷰 파일(_comments.mustache), 댓글 목록을 보여주는 뷰 파일(_list.mustache), 새 댓글을 작성하는 뷰 파일(_new.mustache)로 나누어 작성합니다.
3. {{#commentDtos}}{{/commentDtos}}
뷰 페이지에서 모델이 등록된 데이터의 사용 범위를 지정할 떄 사용하는 머스테치 문법입니다.
부터 까지 범위 내에서 commentDtos 데이터를 사용할 수 있으며 commentDtos 데이터의 수만큼 해당 범위를 반복합니다.
16장 수행 결과
셀프체크 수행 결과
package com.example.firstproject.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import java.util.List;
@Controller
public class GroupController {
@Autowired
private GroupService groupService;
@Autowired
private TeamService teamService;
@GetMapping("/groups/{groupId}")
public String group(@PathVariable int groupId, Model model) {
// 해당 메서드를 완성하세요.
GroupDto groupDto = groupService.getGroup(groupId);
List<TeamDto> teamDtos = teamService.getTeamsOnGroup(groupId);
model.addAttribute("teamDtoList", teamDtos);
return "groups/show";
}
}
17장. 웹 페이지에서 댓글 등록하기
1.댓글 등록하기
댓글 등록하기는 2단계로 나누어 구현합니다.
- 댓글 생성 뷰 페이지(_new)에 댓글 입력 폼 만들기
- [댓글 작성] 버튼을 클릭해 REST API 요청 보내기
2.버튼 변수화
버튼 같은 문서 내 특정 요소를 변수로 받아 오려면 다음과 같이 querySelector() 메서드를 사용해 해당 요소를 선택한 후 변수에 저장합니다.
자료형 변수명 = document.querySelector(“#id_값”);
3.버튼 이벤트 감지
클릭, 마우스 오버 같이 웹 페이지에서 발생한 특정 이벤트는 addEventListener() 메서드를 사용해 감지합니다.
// 이벤트가 감지되면 이벤트 처리 함수를 실행 요소명.addEventListener(“이벤트_타입”, 이벤트_처리_함수)
4.댓글 객체 생성
댓글 객체를 자바스크립트로 만드는 방법은 3가지가 있습니다.
객체 리터럴 방식, 생성자 함수 방식, Object.create() 방식입니다.
책에서는 객체를 변수로 선언하는 객체 리터럴 방식을 사용했습니다. 형식은 다음과 같습니다.
var object = {
key1: value1,
key2: value2,
...
}
5.REST API 호출과 응답 처리
자바스크립트로 REST API 요청을 보낼 때 fetch() 함수를 사용합니다.
POST 요청을 보낼 때 형식은 다음과 같습니다.
전송 데이터가 자바스크립트 객체이므로 JSON 문자열로 변환해 보낸다는 점을 기억해 주세요.
fetch('API_주소',{
method: 'POST', // 요청 메서드(GET, POST, PATCH, DELETE)
headers:{ // 헤더 정보
"Content-Type": "application/json"
},
body: JSON.stringify(객체) // 전송 데이터
}).then(response => { // 응답을 받아 처리하는 구문
응답_처리문;
});
18장. 웹 페이지에서 댓글 수정하기
1.모달
웹에서 새 창을 띄우는 팝업 창과 달리 같은 브라우저 내부에서 상위 레이어를 띄우는 방식으로 사용하는 창입니다.
모달 창이 뜨면 기존 창은 비활성 상태가 되고, 모달 창을 종료해야만 원래 화면으로 돌아갈 수 있습니다.
2.댓글 수정하기
댓글 수정하기는 크게 2단계로 나누어 구현합니다.
- 모달 기능을 이용해 모달 창에 수정 폼 만들기
- 모달 트리거 버튼을 통해 기존 댓글을 가져와 수정 폼에 반영한 후 REST API 요청 보내기
3.트리거 데이터 전달
모달 트리거 버튼에 data-* 속성을 이용하면 데이터를 모달로 전달할 수 있습니다. 방법은 다음과 같습니다.
- 모달 트리거 버튼에 수정할 댓글 정보를 data-* 속성 값으로 저장한다.
- show.bs.modal 이벤트를 감지해 핸들러에서 모달 트리거 버튼을 변수(triggerBtn)화한다.
- 버튼 변수(triggerBtn)를 이용해 data-* 속성에 담긴 댓글 정보를 가져온다.
- 수정 폼에 데이터를 반영한다.
4.모달 이벤트 감지
모달 이벤트 감지 코드는 다음과 같습니다. 모달은 열리기 직전 show.bs.modal 이벤트를 발생시키고, 이를 처리할 함수는 발생한 이벤트를 첫 번째 매개변수로 받아 실행합니다.
요소명.addEventListener(“show.bs.modal”, function(event){ });
19장. 웹 페이지에서 댓글 삭제하기
1.댓글 삭제하기
댓글 삭제하기는 크게 2단계로 나누어 구현합니다.
- [삭제] 버튼 추가하기
- [삭제] 버튼 클릭해 REST API 요청 보내기
2.querySelectorAll()
선택자로 지정한 모든 요소를 찾아 반환합니다.
.querySelectorAll(“CSS_선택자_문법”)
3.forEach()
배열 또는 배열과 유사한 일련의 데이터 묶음(NodeList, Map, Set, String, …)을 순회해 처리하는 메서드로, 매개변수로 주어진 함수를 배열 속 각 요소에 적용해 처리합니다.
.forEach(function(){
// 실행문
});
4.백틱(`) 문자열
백틱(`)은 문자열을 정의하는 방법으로 키보드의 숫자 1 왼쪽에 있는 키를 눌러 입력합니다.
백틱(`)을 사용하면 문자열 사이에 변수를 편리하게 삽입할 수 있습니다.
변수 삽입 문법은 ${}를 사용합니다.
const x = “한우”; const burger =
${x} 버거; // “한우 버거”
댓글남기기