localstorage 사용하여 장바구니(즐겨찾기) 만들기
이번 프로젝트는 영화 검색 웹페이지를 구현하는 것이다.
구현하고자 하는 기능
[1] TMDB 또는 영화진흥위원회 오픈 API 이용(택 1 또는 중복 사용)
[2] 영화정보 상세 페이지 구현
[3] 상세 페이지 영화 리뷰 작성 기능 구현
[4] github PR(=Pull Request) 사용한 협업
[5] UX를 고려한 validation check
- 영화 검색 시
- 댓글 작성 시
- 추가 기능 구현 시 반드시 삽입[6] 페이지 네이션
[7] 영화 즐겨찾기 목록 추가
팀 회의
과제 주제와, 구현하고자 한 기능을 토대로 팀원들과 역할 분담 및 github 레포지토리를 생성 후 각자의 브랜치를 만들었다.
즐겨찾기 기능 구현
먼저 이 코드들은
상세페이지에서즐겨찾기 추가버튼을 눌렀을때 발생하는 이벤트들을 위한 코드들이다.
즐겨찾기 추가를 누르면 각 영화의 ID값과 title값을localstorage의 favorites에 객체 배열로 저장하였다
추가적으로 이미
localstorage에 동일한 영화의 id가 있다면이미 즐겨찾기에 존재 합니다라는 alert창을 띄움으로써 중복 저장을 방지하는 기능도 추가하였다.
처음엔 내가 맡은 기능을 코딩하기 전, 프로젝트 코드들을 전체적 로직 흐름을 이해하기 위한 코드리뷰를 하는데 시간이 꽤 걸렸다, 하지만 그런 작업이 있었기에 로직의 흐름에 따라 모듈화 되어 있는 함수들을 적절히 사용함으로써 코드를 더욱 간략하게 짤 수 있었으며 가독성 또한 좋게 만들 수 있었다.
다음으로 localstorage에 저장 된 id와 title 값을 불러와
favlistArr배열에 담아 준 뒤favListArr을result변수에 누적 저장해준다. 그런 다음result를 지정한#favContent위치에 innerHTML으로 삽입시켜준다.
각 리스트를 클릭했을 때 해당 영화의 상세페이지로 넘어가는 로직을 구현하고자 했다.
각 리스트 요소를queryselector로 지정 한 뒤click이벤트를 감지 후 팀원이 상세페이지에서 모듈화 시켜 놓은moviedetailAPI함수를 실행시켜 주도록 코드를 작성했다.
클릭 하니까 잘 이동 된다.
마지막으로 남은 삭제 버튼 클릭 시 목록에서 지우는 기능을 구현해야 했다.
노마드코더에서 보았던 내용에서filter()를 사용해 해당 값을 지워 준 뒤 innerHTML 했던 해당 요소 삭제,localstorage에setitem해줄때 올라가는 배열에 앞서 사용한filter()로 배열을 업데이트 해준다.
그렇게 최종적으로localstorage에 해당 값을 삭제 한 뒤 업데이트를 마치면 삭제 기능도 구현이 완료 되었다.
느낀 점
미니 프로젝트, 개인 프로젝트를 경험하며 주먹구구식으로 다른 사람들의 코드를 긁어 와 내 코드에 일부 변형 후 적용 시키는 방식, 인터넷에서 무조건 찾아서 코드를 긁어와 적용시키는 방식으로 어떻게든 구현만 할 줄 아는 실력이어서 항상 아쉬운점 이라면 직접 내가 코드를 짜야 될 때 변수 선언부터 막히는 것이었다.
이래서는 성장하는 속도가 늦다 못해 개발자가 아닌 코더가 되어버릴 것 같아서 긁어오는 코드로만 기능을 구현하는데 급급하지말고 직접 로직을 생각 해보고 원하는 기능을 구현할 줄 아는 개발자가 되고 싶었기에
두 가지 공부 방식을 추가했었다.
1. 먼저 알고리즘 테스트를 통하여 기본 코드 작성 능력을 향상 시킨다 (훈련)
2.모던 자바스크립트 딥 다이브에서 하루 하루 궁금했던 개념을 골라 공부 한 뒤 TIL에 작성한다.
3. 정규 학습 시간이 끝난 뒤 스터디를 같이 하는 사람과하룻동안 공부하면서 어려웠던 점 애로사항을 회고,코드를 리류한다.
4. 노마드코더 등 외부 학습 자료도 적극 이용하여 공부한다.
물론 이런식으로 공부하기 위해서는 정규시간을 제외하고도 투자 해야하는 시간이 필요하다...
그래서 스터디를 같이 하는 사람들과 새벽 늦게까지 코딩하는 시간대를 조금 일찍 자는걸로 바꾸는 대신, 학습 시간이 시작 되기 2시간 전 일찍 모여서 공부를 하는 것이었다.
신기하게도, 아침에 일어나서 공부하니까 집중도가 무척 높아져서 공부가 잘 되었고 일주일동안 많이 발전 한 것 같다.
7시 모엿!!!!!