💙 들어가며
classList를 이용해서
클래스를 직접 추가하고 제거하는 방법으로
동적인 페이지를 구현해보자.
✏️ 학습내용 정리
#이전시간 복습
자바스크립트로 요청한 데이터를
HTML형태로 꽂아넣을 수 있게 되었다.
content.insertAdjacentHTML("beforeend", template);
본질적으로 생각하면 template이라는 변수 안에
텍스트 형식으로 꽂는 것이지만
화면에 출력되는 모든 것은
객체화 되어서 올라가는 것이다.
이전에는 객체를 직접 만들어서
추가할 수 밖에 없었는데
자바스크립트의 기능이 올라가면서
백틱을 이용한 문자열이 가능해졌다.
기억할 것은 데이터를 올리는 형태는 문자열이지만
최종적으로는 객체형태로 올라간다는 것이다.
innerHTML은 문자열을 객체화 한다.
insertAdjacentHTML이 없었을 때에는
innerHTML을 전문으로 사용했지만,
insertAdjacentHTML이 생기면서
innerHTML의 기능을 대체했다.
#카테고리로 선택해서 데이터 뽑기
Category라는 entity와 repository를 따로 만든다.
하지만 Service는 메뉴 Service를 이용한다.
(메뉴 페이지 안에서 일어나는 서비스 단위이니까!)
링크를 설정해야 하는데,
우리는 SSR방식으로 안할것이다.
데이터만 받아와서 뿌려주면 되기 때문에
API Controller를 이용해서 CSR로 처리해보자.
각 a태그마다 onclick 이벤트를 주지 않고
이벤트 버블링으로 ul에 onclick 이벤트를 준다.
(브라우저 뿐만 아니라 모든 윈도우 시스템은
이벤트 버블링을 지원하고 있다.)
tagName으로 얻어오거나 nodeName으로 받아올 수 있고,
이때 받아오는 태그명은 대문자다!
(HTML의 원래 태생이 대문자였다고 한다.)
그리고 각 카테고리별로
누가 커피인지 누가 수제청인지
구분을 시켜주어야 하는데,
자바스크립트로 a태그의 href를 불러오면
다음과 같이 full 주소가 뜬다.
그래서 HTML의 data-을 활용하면
자바스크립트에서 원하는 데이터 객체를 쉽게 찾을 수 있다.
data-*에서 *에는 아무값이나 넣을 수 있다.
(변수명임, data-id, data-name처럼 원하는대로 가능)
자바스크립트에서는 dataset으로 불러온다.
그런데 이것이 변동되어야 하는 값이라면
타임리프에서 지원해주어야 할터...
다행히 타임리프에서는 th:data를 지원하고 있다.
하지만, 만약 th:data가 지원되지 않는다면
th:attr을 사용해서 하면 된다.
타임리프는 th:data를 지원하고 있어서
원하는대로 선택하면 됨!
#(번외) e.target 지역변수화 하기
e.target은 계속해서 연산이 일어나고 있는 것이다.
따라서 변수화해주는 것이 옳다.
#className이 아니라 classList 사용하기
className을 직접 사용하면
문자열을 직접 다뤄야 하고 어려워진다.
(클래스 전체를 바꾸는 것이기 때문에
클래스명이 많을 수록 복잡도가 올라간다.)
클래스를 배열형태로 가진 classList를 사용한다.
이 classList는 add, remove, toggle등 다양한 함수를 가지고 있다.
(참고로 remove는 없는 클래스를 삭제해달라고 해도 오류나지 않음!)
window.addEventListener("load", function(){
/*================================================================*/
let categoryFilterSection = document.querySelector(".category-filter");
let categoryUL = categoryFilterSection.querySelector("ul");
let aList = categoryUL.querySelectorAll("a");
/*================================================================*/
//카테고리에서 <a>만 클릭되게 하고, 클릭된 녀석이 누구인지 식별하기
/* 기본으로 적용되어 있는 첫번째 녀석 선택 */
let currentCategory = aList[0];
categoryUL.onclick = function(e){
e.preventDefault(); //기본행위 막기
let el = e.target; //타켓을 지역변수화
if(el.tagName != "A") //<a>아니면 return
return;
/*
* ★★★ 업무로직 ★★★
* 1. currentCategory 클래스 지우고,
* 2. e.target에 클래스 추가하고,
* 3. currentCategory에 e.target 참조
*/
currentCategory.classList.remove("current");
el.classList.add("current");
currentCategory = el;
};
#클라이언트 오류
검색할 때 파라미터상에 오류가 있을때
서버에서는 오류가 없는데
클라이언트에서만 오류가 난다.
모든 매개변수를 다 받을 수 있게 하고,
대신 매개변수별로 null값을 받았을 때의 경우로 처리한다.
이것은 @RequestParam에서 required로 처리하면 된다.
우리는 사용중인 컨트롤러가 2개이므로
MVC 컨트롤러와 API 컨트롤러 모두 바꿔주는 것을 잊지말자
#반복 제거: bind 함수 만들기
onload될 때마다
insertAdjacentHTML하기까지의 과정이
계속해서 반복되고 있다.
bind라는 함수를 만들어서
파싱부터 insert하는 작업을 모두 처리하게 하고
밑에서는 함수를 호출하는 식으로 처리한다.
💙 마치며
1.
클라이언트 오류가 났을 때
당황하지말고 파라미터를 확인해보자!
브라우저 디버거도 적극적으로 활용할 것..!
