TIL 최종프로젝트(10) 북마크 기능

2023.06.22 목요일<-화요일

 

#프론트 event.js

      bookmarkIcon.addEventListener('click', async () => {
        const event_id = parseInt(element.id, 10);
        const token = localStorage.getItem("access");
      
        console.log(event_id);
        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("로그인이 필요합니다")
        }
        });

[문제]

1. 로그인 상태에서 북마크를 시도 했을 시, 북마크 기능이 동작하지 않는 문제가 발생

 -> 헤더 부분에 해당 유저의 정보를 넣어 주니 작동 됨

2. event_id가 작동되지 않는 문제가 발생

 -> element에서 받아오는 event_id의 타입을 10진법 정수형으로 변경하여 해결

______________________________________________________________________________________________

이후 상세페이지 값을 가지고 오고 조회하는 것을 event_detail.js에서 구현하였습니다.

 

[느낀점]

js 쉽게 쓰면 쉬운 거 같은데 어렵다 

백엔드 구현 후 프론트 구현 시 필요한 id나 필드를 가져오거나 백엔드를 수정이 필요한데, 와이어프레임이나 API명세서, ERD를 보고, 다른 부분에서 필요한 것을 구현해 주는 등 계속해서 변경이 필요했습니다.

 

혼자 하거나 배포를 하지 않는다면, 실시간을 고치겠지만, 팀 전체가 작업을 하기에 실시간 반영이 어렵습니다.

네 어렵네요 

프론트 js css html도 어렵고 익숙하지 않아 하나에 물려있는 시간이 너무 많고 그러니, 진도도 안나가고 그렇습니다 네.