더북(TheBook)

2.2.4 data attribute와 dataset

 

노드를 웹 서버로 사용하는 경우, 클라이언트(프런트엔드)와 빈번하게 데이터를 주고받게 됩니다. 이때 서버에서 보내준 데이터를 프런트엔드 어디에 넣어야 할지 고민이 됩니다.

프런트엔드에 데이터를 내려보낼 때 첫 번째로 고려해야 할 점은 보안입니다. 클라이언트를 믿지 말라는 말이 있을 정도로 프런트엔드에 민감한 데이터를 내려보내는 것은 실수입니다. 비밀번호 같은 건 절대 내려보내지 않도록 합시다.

보안과 관련이 없는 데이터들은 자유롭게 프런트엔드로 보내도 됩니다. 자바스크립트 변수에 저장해도 되지만 HTML5에도 HTML과 관련된 데이터를 저장하는 공식적인 방법이 있습니다. 바로 data attribute입니다.

<ul>
    <li data-id="1" data-user-job="programmer">Zero</li>
    <li data-id="2" data-user-job="designer">Nero</li>
    <li data-id="3" data-user-job="programmer">Hero</li>
    <li data-id="4" data-user-job="ceo">Kero</li>
</ul>
<script>
    console.log(document.querySelector('li').dataset); 
    // { id:'1', userJob:'programmer' }
</script>

 

위와 같이 HTML 태그의 속성으로, data-로 시작하는 것들을 넣어줍니다. 이들이 data attribute입니다. data-iddata-user-job을 주었습니다. 화면에 나타나지는 않지만 웹 애플리케이션 구동에 필요한 데이터들입니다. 나중에 이 데이터들을 사용해 서버에 요청을 보내게 됩니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.