북마크 기능
이제 북마크 기능을 만들 차례
북마크 기능 개발 과정을 정리해 보자.
1. 북마크 버튼을 눌렀을 때, 현재 영화의 정보를 로컬스토리지에 배열로 저장
2. 북마크 목록 버튼을 눌렀을 때, 저장한 영화 배열을 출력
이렇게 두번의 과정이 있다.
이 북마크 버튼으로 영화 정보를 로컬스토리지에 저장하는 기능을 넣어야 한다.
이렇게 속성에 영화 데이터를 몽땅 때려넣는 방법이 옳은지는 잘 모르겠다.
이 부분은 한번 검토를 받아봐야 겠다.
replace는 영화 데이터 안에 따옴표가 있으면 오류가 생겨서 프로그래밍 기능이 없는 따옴표로 바꾸어 주었다.
이제 저 버튼에 이벤트를 만들어 영화 정보를 저장할 수 있도록 해야한다.
단순히 저장만을 한다면 이 과정이 전부겠지만,
로컬스토리지에 한 영화 데이터가 여러번 중복되어 저장되는 문제가 있다.
그래서 현재 클릭한 영화가 이미 저장한 영화인지 검증하는 조건문을 만들었다.
confirm 은 왠지 있어야할것 같아서 만들었고,
북마크 여부에 따른 버튼 css도 만들었다
.
그리고 로컬스토리지에 있는 savedMovies 라는 배열로
기본 템플릿과 같은 템플릿을 사용하여 영화 리스트가 출력되도록 하였다.
이제 저장한 영화가 잘 나온다.
이로써 영화 찾기 사이트를 구현하는 프로젝트를 마치게 되었다.
너무 힘든 부분들이 많았다. 배경지식의 한계에 봉착했던 때가 그렇다.
특히 함수나 메서드를 사용할 때, 처음 생각처럼 되지 않아 내가 생각한 것이 맞는 것일까 하는 생각이 들어 불안했었다.
내가 영어를 잘했다면 MDN을, 스택오버플로우를 자유롭게 볼 수 있지 않았을까 하는 생각에
영어 공부의 중요성을 한번 더 깨닫게 되었다.
추가
팀원 분이 북마크 버튼이 다른 장르 버튼들에 동화되어 눈에 전혀 띄지 않는 점을 피드백 해 주셔서
북마크 버튼을 눈에 잘 띄는 곳으로 옮겼다.