가끔 논리형들이 자바스크립트에서 string타입으로 전달이 되는데 다음과 같은 코드 사용시 간단하게 boolean으로 변환 가능.  const canControlPendingUser = document.getElementById('can-control-pending-user').value === "true";

const groupUserAcceptBtn = document.getElementsByClassName('group-user-accept-btn');  getElementsByClassName로 HTMLCollection을 가져오는데 이때 foreach나 filter 사용 불가능. 순회하고 싶으면 groupUserAcceptBtn[0]처럼 첨자를 사용하거나 아래처럼 배열로 바꿔서 foreach, filter를 사용하면 됨.   const groupUserAcceptBtn = Array.from(document.getElementsByClassName('group-user-accept-btn'));

상황 1. URL에서 카테고리 파라미터 값 가져오기   const url = new URL(window.location.href); const categoryParam = url.searchParams.get("category");  상황 2.  URL에 sort 파라미터를 추가하고 싶음   const url = new URL(window.location.href);url.searchParams.append("sort", sortValue);   append()는 파라미터를 추가해주지만 중복된 키가 들어갈 수 있어서 따로 예외 처리를 해줘야 하는 불편함 존재. append()대신 set()을 사용하면 해당 key를 가지는 파라미터가 없으면 추가해주고 있으면 그 값을 수정해줌.  const ur..

타임리프는 기본적으로 캐싱을 사용한다.(타임리프 캐싱옵션을 꺼도 브라우저는 기본적으로 캐시에서 페이지를 가져오려고 하기 때문에 http header에 'no-cache'옵션을 설정해야함) 게시글  상세보기 페이지에서 좋아요를 취소한 뒤 뒤로가기를 누르면 캐싱된 페이지를 보여준다. 게시글 상세보기를 누르기 전에 정렬 옵션을 '좋아요순'으로 설정했다면 해당 작업이 반영되지 않은 이전과 동일한 페이지를 보게된다. 이때, 다음과 같은 코드를 사용하면 페이지를 보여줄 때 reload()를 한번 해준다. event.persisted는 브라우저의 캐시에서 복원됬을때 true를 반환한다.false를 반환했다면 페이지가 새로 로드되었음을 의미한다.  window.onpageshow = function(event) { ..

const inventorySlotDiv = document.querySelector(`[data-slot="${slot}"]`); 변수를 사용하기 위해서는 ``(백틱)을 사용해야함. ''(홑따옴표)를 써도 되는데 그러면 + 연산자를 사용해야함.

closest() : 조건을 부합하는 가장 가까운 조상을 찾음. * 형제는 탐색하지 못함.