3주차는 넷플릭스 클론 프로젝트였다.

3주차에서 배운 것들은

• csv로 저장된 데이터를 DB에 올리는 법

• DB에 저장된 데이터를 가져오는 법

• 무한 스크롤을 구현하는 방법

• 그리드를 사용해서 요소들을 배치하는 법

• /[id] 폴더를 만들어 동적 페이지를 만드는 법

이런 것들을 배웠다. 지금 진행 중인 팀 프로젝트에서도 동적 페이지와 그리드 배치는 적용할 수 있어 보여서 이번 주 강의도 열심히 들었다.

과제

그리고 이번 주의 과제는 찜하기 기능을 만들어서 내가 찜한 영화를 메인 페이지 리스트 최상단에 뜨도록 하는 것이었다. 찜한 목록과 그렇지 않은 목록을 별도로 만들어서 구현할 수도 있었지만, 그냥 단순하게 찜한 영화를 최상위 리스트로 열거하는 방법을 적용했다.

일단 supabase로 들어가서 찜한 영화를 표시할 수 있는 새로운 컬럼을 하나 만들었다.

dibs_on이라는 이름의, bool 값이 저장되는 컬럼이다. 기본값은 false로 지정했다.

영화의 상세 페이지에 접속하면 '찜하기' 기능을 쓸 수 있도록 만들었다. 나의 넷플릭스 이용 패턴과 동일하게, 영화나 드라마의 상세 정보를 확인한 다음 찜할 수 있는 유저 시나리오이다.

상세 페이지에 접속하면 찜하기 버튼이 나오고, 이 버튼을 누르면 클릭 이벤트가 실행되면서 DB까지 찜한 상태를 동기화한다.

찜하기 버튼은 영화 이름 옆에 나오도록 배치했다.

찜하기를 누르면 실행되는 함수이다. 찜하기 버튼을 누르면 true와 false의 값이 바뀌고, 바뀐 값을 setDibsOn 함수로 전달한다.

movieActions.ts에 setDibsOn 함수를 구현했다. DB까지 상태값의 변화를 전달해준다.

이제 웹으로 돌아와서 적당히 아래쪽에 있는 영화의 상세페이지로 들어간다. 찜하기 버튼을 누르고 메인 페이지로 돌아오면 아까 찜했던 영화가 제일 첫 리스트로 나타난다.

찜하기 전은 하얀 하트, 찜한 후는 빨간색 하트로 표시된다.

메인 페이지로 돌아오면 아까 찜한 영화가 제일 첫 리스트로 나타난다!

과제 끝!

3주차 후기

평일에는 부트캠프 팀 프로젝트를 하고 있어서 매주 금, 토, 일 강의를 듣고 일요일에 과제를 한다. 시간 텀이 길어서인지 cmd에서 supabase로 로그인을 하고 db 데이터를 가져오는 과정이 매주 헷갈린다. 프로젝트를 생성하는 초기 설정에서도 매주 비슷한 지점에서 버벅거리는 것 같다. 다음 4주차에는 시간을 좀 더 내서 이제까지의 설정 과정들을 한 번 더 정리하고, 평일에도 조금씩 강의를 듣고 실습해야겠다는 다짐을 했다.