[Spring Boot] 42. 스프링부트 블로그 v2 (JPA) (12) 게시글 좋아요 3 - Dataset 적용

김주희

Apr 08, 2025

[Spring Boot] 42. 스프링부트 블로그 v2 (JPA) (12) 게시글 좋아요 3 - Dataset 적용

Contents

1. Dataset 2. 게시글 좋아요 기능에 dataset 적용

1. Dataset

1. Dataset (data-*)

HTML의 dataset 속성은 사용자 정의 데이터를 DOM 요소에 저장할 수 있는 속성이다.

JS로 해당 데이터에 쉽게 접근하여 읽어오거나 수정할 수 있다.

data-* : 사용자 정의 속성명

2. 예제

div 태그 안에 id를 설정하고 data-liked라는 속성을 설정해 빨간색일 경우 true, 검은색이면 false라고 지정한다.


    <!-- element에 데이터를 심은 것 -> js로 땡길 수 있음 -->
    <div id="likeIcon1" data-liked="true">빨간색 좋아요</div>
    <div id="likeIcon2" data-liked="false">검은색 좋아요</div>

JS로 id로 요소를 가져온다.


let icon1 = document.querySelector("#likeIcon1");

div 태그 안의 data-liked 속성을 dataset.liked 형태로 가져올 수 있다.


let value1 = icon1.dataset.liked;

console.log로 확인해본다.

전체 코드


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DataSet</title>
</head>
<body>
    <!-- element에 데이터를 심은 것 -> js로 땡길 수 있음 -->
    <div id="likeIcon1" data-liked="true">빨간색 좋아요</div>
    <div id="likeIcon2" data-liked="false">검은색 좋아요</div>

    <script>
        let icon1 = document.querySelector("#likeIcon1");
        let value1 = icon1.dataset.liked;
        console.log(value1);

        let icon2 = document.querySelector("#likeIcon2");
        let value2 = icon2.dataset.liked;
        console.log(value2);
    </script>

</body>
</html>

2. 게시글 좋아요 기능에 dataset 적용

1. 좋아요 상태 바인딩

서버에서 전달받은 좋아요 상태(model.isLove)에 따라 data-liked 속성으로 초기 상태를 HTML에 바인딩한다.

2. dataset으로 좋아요 초기 상태 가져오기


let liked = document.querySelector("#likeIcon").dataset.liked; // isLove가 true이면 true로 시작, false이면 false로 시작해야 됨

3. likeToggle의 매개변수로 boardId 대입


<!-- AJAX 좋아요 영역 -->
    <div class="my-3 d-flex align-items-center">
        {{#model.isLove}}
            <i id="likeIcon" data-liked="true" class="fa fa-heart" style="font-size:20px; color:red"
               onclick="likeToggle({{model.id}})"></i>
        {{/model.isLove}}
        {{^model.isLove}}
            <i id="likeIcon" data-liked="false" class="fa fa-heart" style="font-size:20px; color:black"
               onclick="likeToggle({{model.id}})"></i>
        {{/model.isLove}}
        <span class="ms-1"><b id="likeCount">{{model.loveCount}}</b>명이 이 글을 좋아합니다</span>
    </div>

4. JS (완성X)


<script>
    let boardId = {{model.id}};

    async function saveLove() {
        let requestBody = {boardId: boardId};
        let response = await fetch(`/love`, {
            method: "POST",
            body: JSON.stringify(requestBody),
            headers: {"Content-Type": "application/json"}
        });
        let responseBody = await response.json(); // { loveId, loveCount }

        // DOM 업데이트
        let icon = document.querySelector('#likeIcon');
        let likeCountSpan = document.querySelector('#likeCount');
        icon.style.color = 'red';
        icon.setAttribute('onclick', `deleteLove(${responseBody.loveId})`);
        likeCountSpan.textContent = responseBody.loveCount;
    }

    async function deleteLove(loveId) {
        let response = await fetch(`/love/${loveId}`, {
            method: "DELETE"
        });
        let responseBody = await response.json(); // { loveCount }

        // DOM 업데이트
        let icon = document.querySelector('#likeIcon');
        let likeCountSpan = document.querySelector('#likeCount');
        icon.style.color = 'black';
        icon.setAttribute('onclick', `saveLove()`);
        likeCountSpan.textContent = responseBody.loveCount;
    }
</script>