Loading...

Spring/Tistory / / 2022. 5. 9. 11:14

블로그-V3. 좋아요 기능 테스트

반응형

id를 줘서 이벤트를 거는 것은 외부에서 눌려지는지 확인하는 것

onclick은 스스로 내가 눌려지는지 확인하는 것

 

테스트해보자.

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
    <script src="https://kit.fontawesome.com/6b3377d2bb.js" crossorigin="anonymous"></script>
    <title>Document</title>
    <style>
        .item_box {
            border: 1px solid black;
            padding: 20px;
        }

        .item {
            border: 1px solid black;
            padding: 5px;
        }
    </style>
</head>

<body>
    <div class="item_box">
        <div class="item">
            1: <i class="fa-solid fa-heart"></i>
        </div>
        <div class="item">
            2: <i class="fa-solid fa-heart"></i>
        </div>
        <div class="item">
            3: <i class="fa-regular fa-heart"></i>
        </div>
    </div>

    <script>

    </script>
</body>

</html>

 

1. 이벤트 리스너 방식

 

fa-solid가 붙어있으면 좋아요를 취소하고 안 붙어있으면 좋아요를 누른 상태이다.

이렇게 하면 헷갈리니까 체크용 class="my_fake_like"를 만들어주자.

디자인용이 아닌 체크용이다.

 

하나의 메서드 내부에서 좋아요, 좋아요 취소를 다 만들수도 있는데

따로 분리시켜서 만들자.

 

하나의 책임만 갖도록!

 

메서드를 호출하기만 하면 좋아요가 되는지 취소가 되는지 헷갈릴 수 있기 때문에

원하는 메서드를 때릴 수 있게 분리시켜준다.

 

이를 KISS(Keep It Simple Stupid) 원칙이라고 한다!!

소스코드가 불필요하게 장황하거나 복잡해지지 않게!

단순할수록 이해하기 쉽고 이해하기 쉬울수록 버그가 발생할 가능성이 줄어든다.

 

소프트웨어 개발 3대 원칙

 

KISS Keep It Simple Stupid 단순하게 해라

 

YAGNI You Ain't Gonna Need It 필요한 작업만 해라

현재는 사용하지 않지만 확장성을 고려해서 미리 작업해 놓은 것들이 있는데

그런 작업을 하지 말라는 원칙이다.

 

DRY Do not Repeat Yourself 반복하지 마라

 

원칙이라고 말했지만 결국 개발 습관에 관한 이야기인 것 같다.

 

 

<body>
    <div class="item_box">
        <div class="item">
            1: <i class="fa-solid fa-heart my_fake_like" id="h-1"></i>
        </div>
        <div class="item">
            2: <i class="fa-solid fa-heart" id="h-2"></i>
        </div>
        <div class="item">
            3: <i class="fa-regular fa-heart" id="h-3"></i>
        </div>
    </div>



    <script>
        $("#h-1").click((event) => {
            let isLike = $("#h-1").hasClass("my_fake_like");

            if (isLike) {
                postUnLike(1);
            } else {
                postLike(1);
            }

        });

        $("#h-2").click((event) => {
            let isLike = $("#h-2").hasClass("my_fake_like");

            if (isLike) {
                postUnLike(2);
            } else {
                postLike(2);
            }

        });

        $("#h-3").click((event) => {
            let isLike = $("#h-3").hasClass("my_fake_like");

            if (isLike) {
                postUnLike(3);
            } else {
                postLike(3);
            }

        });

        function postLike(id) {
            // fetch();
            $(`#h-${id}`).addClass("my_fake_like");
            $(`#h-${id}`).removeClass("fa-regular");
            $(`#h-${id}`).addClass("fa-solid");
        }

        function postUnLike(id) {
            // fetch();
            $(`#h-${id}`).removeClass("my_fake_like");
            $(`#h-${id}`).removeClass("fa-solid");
            $(`#h-${id}`).addClass("fa-regular");
        }
    </script>
</body>

 

 

이렇게 하면 아이디가 h-1인 돔만 수정된다.

그렇다고 이벤트 리스너의 event 객체를 받아와서 사용하려고 하니

제이쿼리와 자바 스크립트를 같이 사용할 수 없다.

 

event.target.addClass와 같이 사용할 수 없다는 것이다.

 

제이쿼리는 CSS 선택자로 돔을 찾아서 제어가 가능하지만

자바스크립트 변수에 담아서는 제어가 불가능하다.

만약 제이쿼리를 사용하려면 onclick으로 바꿔야 한다.

 

onclick에서 postLikeClick( )을 호출할 때 나중에 머스태치에서

좋아요의 id를 넣어주면 되겠다.

 

<body>
    <div class="item_box">
        <div class="item">
            1: <i class="fa-solid fa-heart my_fake_like" id="h-1" onclick="postLikeClick(1)"></i>
        </div>
        <div class="item">
            2: <i class="fa-solid fa-heart" id="h-2" onclick="postLikeClick(2)"></i>
        </div>
        <div class="item">
            3: <i class="fa-regular fa-heart" id="h-3" onclick="postLikeClick(3)"></i>
        </div>
    </div>



    <script>
        function postLikeClick(id) {
            let isLike = $(`#h-${id}`).hasClass("my_fake_like");

            if (isLike) {
                postUnLike(id);
            } else {
                postLike(id);
            }
        }

        function postLike(id) {
            // fetch();
            $(`#h-${id}`).addClass("my_fake_like");
            $(`#h-${id}`).removeClass("fa-regular");
            $(`#h-${id}`).addClass("fa-solid");
        }

        function postUnLike(id) {
            // fetch();
            $(`#h-${id}`).removeClass("my_fake_like");
            $(`#h-${id}`).removeClass("fa-solid");
            $(`#h-${id}`).addClass("fa-regular");
        }
    </script>
</body>

 

게시글 상세보기에만 좋아요를 만들려면 이벤트리스너를 만들어서 사용해도 되지만

만약 리스트에서 좋아요를 만드려면 onclick을 만들어줘야 한다.

 

 

이제 원래 프로젝트에 적용시켜보자.

{{>/layout/main-header}}

<div class="container">
    <input id="postId" type="hidden" value="{{data.post.id}}" />
    <input id="pageOwnerId" type="hidden" value="{{data.post.user.id}}" />

    <div class="my_post_detail_title">
        <h2>{{data.post.title}}</h2>
    </div>
    <hr />

    <div class="my_post_detail_content">
        <!-- html 읽기 위해 중괄호 3개 사용 -->
        {{{data.post.content}}}
    </div>

    <div class="my_post_info_box d-flex">
        <div class="my_post_info">
            <i class="fa-solid fa-heart my_fake_like my_mr_sm_1" id="heart-{{data.post.id}}"
                onclick="postLikeClick('{{data.post.id}}')"></i>
            by <b>{{data.post.user.username}}</b> <span class="my_text_body_sm">{{data.post.formatCreateDate}}</span>
        </div>
    </div>

    {{#data.isPageOwner}}
    <div>
        <a class="btn btn-outline-success" href="#">수정</a>
        <button id="btn-delete" class="btn btn-outline-danger">삭제</button>
    </div>
    {{/data.isPageOwner}}

    <br />

    <div class="my_livere">
        <!-- 라이브리 시티 설치 코드 -->
        <div id="lv-container" data-id="city" data-uid="MTAyMC81NjI3OS8zMjc0Mg==">
            <script type="text/javascript">
                (function (d, s) {
                    var j, e = d.getElementsByTagName(s)[0];

                    if (typeof LivereTower === 'function') { return; }

                    j = d.createElement(s);
                    j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
                    j.async = true;

                    e.parentNode.insertBefore(j, e);
                })(document, 'script');
            </script>
            <noscript>라이브리 댓글 작성을 위해 JavaScript를 활성화 해주세요</noscript>
        </div>
        <!-- 시티 설치 코드 끝 -->
    </div>

</div>

<script src="/js/post/detail.js"></script>
{{>/layout/footer}}
// 게시글 좋아요 체크
function postLikeClick(id) {
    let isLike = $(`#heart-${id}`).hasClass("my_fake_like");

    if (isLike) {
        postUnLike(id);
    } else {
        postLike(id);
    }
}

function postLike(id) {
    // fetch();
    $(`#heart-${id}`).addClass("my_fake_like");
    $(`#heart-${id}`).removeClass("my_fake_un_like");
    $(`#heart-${id}`).removeClass("fa-regular");
    $(`#heart-${id}`).addClass("fa-solid");
}

function postUnLike(id) {
    // fetch();
    $(`#heart-${id}`).addClass("my_fake_un_like");
    $(`#heart-${id}`).removeClass("my_fake_like");
    $(`#heart-${id}`).removeClass("fa-solid");
    $(`#heart-${id}`).addClass("fa-regular");
}

 

 

 

[출처]

 

https://cafe.naver.com/metacoding

 

메타코딩 : 네이버 카페

코린이들의 궁금증

cafe.naver.com

메타 코딩 유튜브

https://www.youtube.com/c/%EB%A9%94%ED%83%80%EC%BD%94%EB%94%A9

 

메타코딩

문의사항 : getinthere@naver.com 인스타그램 : https://www.instagram.com/meta4pm 깃헙 : https://github.com/codingspecialist 유료강좌 : https://www.easyupclass.com

www.youtube.com

 
반응형
저작자표시
Spring/Tistory 관련 글
글 더보기

티스토리툴바