영화 검색 사이트) TroubleShooting 3 : 북마크 기능🍝

밍갱·2025년 1월 16일

PROJECTS

목록 보기

4/20

1. 문제 발생🤯

01. 북마크 추가해. 아니 추가하지마. 아니 삭제해... 이런 내마음 과연 몰까?
미루고 미루던 북마크 기능을 드디어 도전하는 날이다. 구글링을 통해 만난 선배 개발자분들과 내 절친(~~aka 챗GPT~~)의 도움으로 localstorage를 사용해서 해당 영화 데이터를 배열에 추가/삭제하는 방법으로 북마크 기능을 구현할 수 있다는 것을 알게 되었다.

이게 뭐람...? 분명 한번만 클릭했는데, 자기 멋대로 추가했다가 삭제했다가 또 추가했다가 난리가 났다. 이때까지만 해도 몰랐다. 눈물의 코딩쇼 가 될 줄은...

2. 원인 추론🧐

01. console.log로 문제 파악하기
어디서 오류가 발생하는 것인지 알아보기 위해 구석구석 console.log를 심어준 뒤, 다시 북마크를 시도해보았다.

지난번 튜터님의 조언대로, 어디에 심어진 console.log인지 구분하기 위한 텍스트도 넣어주었다.

*빨간색: 첫번째 클릭 이벤트 / 노란색: 두번째 클릭 이벤트
두번째 클릭을 할 때, 이전에 클릭한 영화카드 정보가 또다시 콘솔에 찍히는 것을 확인할 수 있었다. 원인이 뭘까...

02. 동기님들과 튜터님의 TIP
원인을 알았지만, 코드가 너무나 꼬여버려서 도저히 손을 쓸 수가 없는 지경이 되어버렸다. 데이터, 변수, 함수 다 이리저리 날아다니는 상태에서 뭐라도 하나 잘못 건들이면 전체가 다 먹통이 되어버렸다. 그래서 결국 다른 동기분들과 튜터님께 도움 요청...
하지만 튜터님도 가독성 떨어지는 코드를 보시고 바로 문제점을 해결해주시지 못했다.(당연하다) 대신 문제의 원인들을 몇개 추려주셨다.

우선 코드가 너무 꼬였다. (맛난 스파게티가 되었다🍝)
모달창이 열렸다 닫힐 때, 생성/삭제가 아닌 클래스로 display만 조작하기 때문에 누적되는 것 같다.
모달창이 누적이 되다보니 addEventListener도 누적이 되는 것 같다.

3. 해결 방안😇

01. removeEventListener로 삭제해보기
우선 단순하게 생각해보았다. 이벤트가 누적된다면 실행되기 전, 선행된 이벤트를 삭제해보자!

도전!

실패!

01-1. 이벤트가 아예 안먹는다!

무엇이 무엇이 똑같을까~ 북마크 안되는게 똑같아요~ 🎤
위 코드에서 removeEventListener의 위치를 바꿔주었더니 이젠 클릭 이벤트도 아예 먹통이 되어버렸다. 생각해보면 당연하다. 실행하자마자 삭제되었으니까...

02. 포기하려다 발견한 금단의 기술, 전역변수
야 코딩.. 너 모되...? 답답한 마음과 불안한 감정에 결국 터져버린 눈물의 코딩쑈🎪

혼자서 안풀려서 끙끙거리고 훌쩍이고 있으니까 결국 동기님께서 금단의 기술, 전역변수(광역스킬)을 사용해 해결해주셨다. 데이터의 반환과 매개변수에 대한 공부가 덜 된 상태에서 프로젝트를 진행하다보니 코드가 꼬여버린 것이다.

첫번째 클릭

두번째 클릭

02-1. 북마크 로고 문제
어찌저찌 해결이 되었다...! 하지만 북마크 버튼에 사소한 문제가 생겼다. 처음 북마크를 추가하면 다른 카드들에게도 적용이 되는 것. 모달창을 열 때, 이를 초기화해주고 북마크 추가할 때 스타일 변경을 해주는 로직이 필요했다.

03. 최종아니이게진짜찐찐찐최종.js

북마크 추가할 때, 버튼 스타일 변경되도록 수정

모달창 열 때, 북마크에 추가되었는지 판별할 로직 추가

모달창 열 때, 버튼 상태 초기화(북마크 여부 확인) 수정

4. 결과😎

01. 얼레벌레 해결...?

북마크에 잘 추가된다! 근본적인 문제가 해결된 것은 아니기 때문에 굉장히 찝-찝하게 해결된 건 사실이다. 하지만 뭐 어쩌겠는가? 첫 프로젝트인걸!
게다가 눈치 빠른 분들이라면 눈치 채셨겠지만, 북마크 탭에서 영화를 북마크 해제해도 리로딩이 되지 않는 문제가 있다.(~~악마의 편집~~) 이것도 수정을 해야하지만, 나에게 남은 시간과 체력이 없으므로... 프로젝트 제출 후에 개인적으로 도전해볼 생각이다.

02. 이렇게 하지 맙시다! ⚠️