HTML data attributes를 사용하여 서버의 데이터를 클라이언트에서 저장하기

평소 node.js와 handlebars로 개발을 한다(ejs랑 비슷한 것으로 생각하면 된다). 그런데 서버에서 프론트엔드로 데이터를 보냈을 때 서버의 데이터를 프론트엔드에서 어떤 방식으로 저장 할지가 늘 고민되었다. 보통 자바스크립트 변수에 저장하거나, react 같은 경우 state hook을 사용하곤 했는데, 이번에 HTML에서 공식적으로 지원하는 데이터 속성(data attribute)을 공부해서 내용을 정리해보았다.

<ul class="products">
  <li data-id="0" data-is-used="false">Samsung phone</li>
  <li data-id="1" data-is-used="true">Apple phone</li>
  <li data-id="2" data-is-used="false">Mac</li>
  <li data-id="3" data-is-used="false">Dell</li>
</ul>

사용법은 간단하다. 태그의 속성으로data-로 시작하는 것들을 넣으면 된다. 위 예시에서는 id를 넣었다. 나중에 서버에 요청을 보낼 때 이 데이터들을 사용하면 된다. 데이터 속성을 JS에서 사용하는 법은 다음과 같다.

const product = document.querySelector('li');

product.dataset.id // 0
product.dataset.isUsed // false

product.dataset.isSoldout = true //새로운 데이터 속성 생성

데이터를 가져올 때는 dataset.데이터값을 사용하면 된다. 이때 하이픈(-)은 카멜케이스로 바뀐다. 데이터를 삽입할 때는 반대로 dataset에 새로운 값을 넣어주면 된다.

그럼 사용법은 여기까지 하고 데이터 속성으로 내 코드를 개선한 예시를 작성해보겠다. 상황은 이러하다. 상품을 구매할 때 옵션을 클릭하면 해당 옵션의 id값을 장바구니 테이블에 추가해야 했다.
(이사진은 예시를 위해 가져온 오늘의집 UI이며 상품은 가렸습니다. 혹시 문제가 된다면 삭제하겠습니다)

기존 코드는 다음과 같다.

<ul class="options">
  <li class="option">
    <span class="option-name">색상: 화이트</span>
    <span class="option-id hidden">101</span>
  </li>
    <li class="option">
    <span class="option-name">색상: 그레이</span>
    <span class="option-id hidden">102</span>
  </li>
    <li class="option">
    <span class="option-name">색상: 블랙</span>
    <span class="option-id hidden">103</span>
  </li>
</ul>

const options = document.querySelectorAll('.option')

const postOptionId = async (e) => {
  const optionId = e.currentTarget.querySelector('.option-id').innerText;
  try{
    const res = await axios.post(`/api/cart/options/${optionId}`);
    if(res.status === 201) {
      //생략
    }
  }catch(err){
    alert("오류가 발생했습니다");
    console.log(err);
  }
}
options.forEach((option) => {
  option.addEventListener('click', postOptionId)
})

option-id 태그를 따로 만들고 hidden으로 숨김처리를 했다. 이러면 서버에서 가져온 데이터를 저장할 수는 있지만 불필요한 element가 생성된다. data 속성을 이용해 개선한 코드는 다음과 같다.

<ul class="options">
  <li class="option" data-id="101">
    색상: 화이트
  </li>
  <li class="option" data-id="102">
    색상: 그레이
  </li>
  <li class="option" data-id="103">
    색상: 블랙
  </li>
</ul>

const options = document.querySelectorAll('.option')

const postOptionId = async (e) => {
  const optionId = e.currentTarget.dataset.id;
  try{
    const res = await axios.post(`/api/cart/options/${optionId}`);
    if(res.status === 201) {
      //생략
    }
  }catch(err){
    alert("오류가 발생했습니다");
    console.log(err);
  }
}
options.forEach((option) => {
  option.addEventListener('click', postOptionId)
})

HTML도 깔끔해졌고 자바스크립트에서 값을 가져오는 것도 간단해졌다. 이렇게 data 속성을 사용하면 쉽게 서버의 데이터를 저장할 수 있다. 이렇게 저장한 데이터는 서버에 요청을 보낼때 사용하면 된다. 단 데이터 속성을 사용할 때 주의할 점이 있는데 비밀번호 같이 민감하고 보안이 필요한 정보를 담아서는 안된다. 프론트엔드에서 이를 조작하거나 탈취당할 수 있기 때문이다.