노드를 사용한 웹서버는 당연히 클라이언트, 즉 프런트엔드와 데이터를 주고받게 되고 - 이 과정에서 서버에서 보낸 데이터를 프런트엔드에 전달해 저장해야 합니다. (원론적인 얘기를 하자면, 프런트엔드에 데이터를 보낼 때는 보안을 가장 신경 써야 합니다. 민감한 데이터를 내려보내서는 안 되죠)
데이터를 프런트엔드로 전달했을 때, 기본적으로는 자바스크립트 변수에 저장을 해도 되지만 HTML5에서 공식적으로 지원하는 데이터 저장 방식도 활용이 가능합니다. 여기서 활용하는 것이 데이터 속성(data attribute)입니다.
아래 HTML 예제를 살펴보겠습니다. 여기서는 <li> 태그에 속성 값을 선언하는 방식으로 데이터 속성을 부여했습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li data-id="1" data-user-job="aaa">A1</li>
<li data-id="2" data-user-job="bbb">B1</li>
<li data-id="3" data-user-job="ccc">C1</li>
<li data-id="4" data-user-job="ddd">D1</li>
<li data-id="5" data-user-job="eee">E1</li>
</ul>
<script>
console.log(document.querySelector('li').dataset);
</script>
</body>
</html>
<!--
출력
DOMStringMap {id: '1', userJob: 'aaa'}
-->
<li> 태그에 data-id, 그리고 data-user-job이라는 속성을 각각 부여했습니다. 이 속성들을 이용해 나중에 서버에 요청을 보내게 되죠. 그런데, 이와 비슷한 HTML 속성도 있을 텐데 왜 이 데이터 속성을 사용하는 것일까요? 다름 아닌 자바스크립트 접근성 때문입니다.
나중에 자세히 살펴보겠지만, dataset 속성을 이용해 첫 번째 속성에 접근합니다. 참고로 자바스크립트에서 사용할 때는 'data-'를 제외한 id, userJob으로 속성 이름을 지칭해야 합니다.
참고로 역으로도 데이터 삽입이 가능합니다. dataset.monthSalary = 100000;이라고 작성하게 되면 data-month-salary="100000"이 생성되는 것이죠.
'Programming > Node.js' 카테고리의 다른 글
| 4. Node 기능 살펴보기 (2) - 모듈 사용하기 : CommonJS 1 (2) | 2024.03.13 |
|---|---|
| 4. Node 기능 살펴보기 (1) - REPL 사용 (0) | 2024.03.13 |
| 3. Front-end Javascript (3) - encode(decode)URIComponent (0) | 2024.03.09 |
| 3. Front-end Javascript (2) - FormData (0) | 2024.03.08 |
| 3. Front-end Javascript (1) - AJAX [2/2] (0) | 2024.03.07 |
