TIL 최종 프로젝트(11) 또 북마크

2023.06.22 목 <-수요일

 

이전 event.html 부분에서 북마크 기능을 구현했습니다.

event-detail.html에서 해당 기능을 가져와 북마크 및 좋아요 기능을 구현하려고 했지만, 문제가 발생하였습니다.

 

[문제]

왜, 이벤트리스너로 등록이 되지 않는지

  bookmarkElement.addEventListener('click', async () => {
    const token = localStorage.getItem("access");
    if (payload) {
      try {
        const bookmarkResponse = await fetch(`${backend_base_url}/events/${event_id}/bookmark/`, {
          method: 'POST',
          headers: {
            "Authorization": `Bearer ${token}`
          }
        });
  
        const bookmarkData = await bookmarkResponse.json();
        alert(bookmarkData.message);
      } catch (error) {
        console.error('Error bookmarking event:', error);
      }
    } else {
      alert("로그인이 필요합니다.");
    }
  });
  

  heartElement.addEventListener('click', async () => {
    const token = localStorage.getItem("access");
    if (payload){
      try {
        const heartResponse = await fetch(`${backend_base_url}/events/${event_id}/like/`, {
          method: 'POST',
          headers: {
            "Authorization": `Bearer ${token}`
          }
        });
    
        const heartData = await heartResponse.json();
        alert(heartData.message);
  
      } catch (error) {
        console.error('Error likes event:', error);
      }        
    }
    else{
      alert("로그인이 필요합니다")
    }
    

  });
};

크게 코드가 변경되지 않았습니다.

똑같이 이벤트리스너로 등록하여 북마크와 좋아요를 클릭했지만, 작동이 되지 않았습니다.

 

해결에 하루가 걸렸습니다.

이전 event.html은 리스트형태로 출력했어야 하기 때문에, forEach를 사용하고 createElement를 사용하여, 새롭게 형태를 만들어주고 그 곳에 각각 이벤트 정보를 넣어주었습니다.

 

event-detail.html의 경우 하나의 이벤트만 가져오고 형태도 변경이 없었기에, createElement을 사용하지 않고, 미리 만들어진 html에 값을 넣는 형태로 만들었습니다,

(지금 생각해보면, 뭐가 다르지 싶습니다)

 

그렇기에 createElement, appendChild를 사용하여 구조를 새롭게 만들어 주었고,

  async function EventDetail() {
  const urlParams = new URLSearchParams(window.location.search);
  event_id = urlParams.get('event_id');
  const eventDetailURL = `${frontend_base_url}/event-detail.html?event_id=${event_id}`;


  const response = await fetch(`${backend_base_url}/events/${event_id}`, { method: 'GET' });
  const response_json = await response.json();

response_json을 사용하여 해당 값을 구조에 넣어주었습니다.

 

전부 확인하고, console.log를 사용하여 코드 자체에 문제가 없다는 것을 확인하였지만, 여전히 이벤트리스너로 등록되지 않아 클릭 이벤트가 작동되지 않았습니다.

 

여기서 이제 짜증이 치밀어 올라 튜터님을 찾아갔고, 정확한 해결 방법을 찾을 수 없을 수는 없었지만, 힌트를 찾았습니다.

 

                <div class="event-wrap">

                    <div class="main-page">
                        <!-- <img id= "event_img", class="image" src="assets/img/image-2.jpg" alt="">
                        <div class="card-txt">
                            <div>
                                <a class="category">전시/행사</a>
                                <h3 id="event_title", class="title">경복궁 야간관람</h3>
                                <p id="event_date", class="event-date">23.05.10 - 23.06.10</p>
                                <div class="card-icon">
                                    <div class="heart">
                                        <img src="/assets/img/Heart-outline.svg" alt=""><span id="like_count">1</span>
                                    </div>
                                    <div class="bookmark">
                                        <img id= "bookmarkIcon", src="/assets/img/Bookmark-outline.svg" alt="">
                                    </div>
                                </div>
                            </div>
                        </div> -->
                    </div>
                    <div class="contant-page">
                        <!-- <button id="SelectItem()" class="reservation-btn" type="button">예약하기</button>
                        <div class="sub-content">
                            <p class="content-title">행사개요</p>
                            <p id="event_content", class="content-txt">달 밝은 밤 도심 속 궁궐 야경 이색체험을 통해 우리 궁궐의 역사 문화적 가치와 아름다움을 감상하며 널리 알리기 위한
                                2023년 봄 경복궁 야간 관람에 여러분을 초대합니다.</p> -->
                        <!-- </div> -->
                    </div>

event_wrap이 main-page를 덮고 있었기에, 이벤트리스너가 등록되었어도 event_wrap을 클릭하고 있어, 북마크와 좋아요 기능이 작동하지 않았던 것입니다.

해당 부분은 css를 담당하신, 팀장님에 의해 event_wrap의 구역이 수정되었고, 이벤트리스너가 잘 작동되었습니다.

 

[느낀점]

정말 간단한 문제였습니다.

css 부분에서 이런 문제가 있다고 생각조차 못했기에 다른 곳에서 하루종일 삽질만 했습니다.

코드를 뜯어고치고, 책상을 치며, 머리를 뜯었습니다.

튜터님을 찾아가 함께 코드를 살펴보고, 해보라 하는 것을 했지만, 1시간 넘게 원인을 찾지도 못했습니다, 그 과정 속에서 화도 나고, 왜 안되는지 정말 짜증도 나고, 심술이 잔뜩 났었네요

 

결국 컨트롤+쉬프트+c 클릭을 사용하여, 무엇이 선택되는지 확인했고, 원인을 짐작할 수 있게되었습니다.

 

이 문제도 첫 째로 제 자신이 css, html에 무지해서 생긴 것이고 둘 째로는 팀원과 문제 공유를 하지 않았다는 점(다들 정말 바빴고 원인을 다른 곳에서 찾고 있었기 때문에...) 때문이였습니다.

 

협업이 중요하다, 달라지자 마음먹고, 달라지기 위해 행동했지만, 아직도 이런 부분이 문제가 됩니다.

이전 보다는 발전하였지만, 아직도 부족하네요

 

같은 날 작성 중이지만, 이전 TIL을 작성해야 했던 날보다 확실히 js를 다루고 백엔드와 연결하는 부분은 발전했습니다.

또 22일 오늘도 발전했습니다, 그래도 협업에서는 여전히 부족하다 느껴집니다.