개요👀
영화 정보 제공, 추천 프로젝트를 진행해 봤습니다. 백엔드를 맡아준 팀원 한량 분과 같이 진행했고, 저는 프론트엔드와 백엔드 일부, 더구나 추천 알고리즘 부분을 담당했습니다. 프로젝트가 끝난 후에는 개인적으로 총체 코드를 디벨롭하고 있습니다. 기본적으로 구현해야 하는 부분을 제외하고, 서비스의 차별화를 위해서는 “어떻게 추천할 것인가” 에 대한 고민이 필요했습니다. 회원 가입할 적기 좋아하는 장르를 입력받을까? 영화에 좋아요 기능을 달아서 이이 데이터를 기반으로 추천할 것인가? 전야 식상하게 느껴졌습니다. 실제 업무가 아니기 그리하여 제가 끽휴 보고 싶은 대로, 넣고 싶은 기능을 잔뜩 넣어 보고 싶었습니다. 감상 끝에 소개팅 어플리케이션 틴더에서 영감을 받아, 영화 포스터를 좌우로 넘기면서 사용자의 데이터를 입력받고 그에 따라 영화를 추천한다는 아이디어가 떠올라 구현해 보기로 했습니다. “영화와의 소개팅” 이죠. 포스터를 휙휙 넘기면서 “오? 이런 영화도 있네?” 혹은 “심심한데 영화 포스터나 넘겨 볼까” 하는 느낌의 사용자 경험을 제공함으로써 습관적으로 이용할 운명 있게 하는 것이 목표였습니다. 유난히 할 일이 없어도 습관적으로 SNS를 켜는 것처럼 자연스럽게 서비스를 이용하게 하는 것이 조용하지만 강력한 경쟁력이라고 생각했기 때문입니다.방술 스택⚙️
프론트엔드- Vue.js, vuetify
- vuex, vue-router
- HTML5, CSS, JavaScript
- Django
- Sqlite
주요 기술⚙️
CORS (Cross Origin Resource Sharing)- Django와 Vue 사이의 교차 출처 리소스 공유를 위해 장고에서 처리해 주었습니다.
- 사용자 인증에 사용했습니다.
- tmdb : 영화 정보를 받아오기 위해 사용했습니다.
- Youtube : 상세 데이터 페이지에 유튜브 영상을 임베드 염절 위해 사용했습니다.
- vue와 django, 클라이언트와 서버가 정보를 주고받을 때 REST하도록 하였으며 주고받는 정보의 형태는 Json 타입이었습니다. SPA 프로젝트였기에 대부분이 Axios로 비동기식 전송이었습니다.
고민했던 내용😮
영화 정보를 DB에 어느 시점에 넣어야 하는가?- 첨단 정보를 제공해야 한다는 생각에, 데이터베이스에 영화 정보를 모처럼 받아와서 넣는 시점을 ‘클라이언트가 정상적으로 로그인하여 jwt이 발급된 상태로 영화 정보가 로드되어야 하는 페이지에 접속했을 때’ 로 생각했었습니다.
- 얼마간 극히 바보같은 생각이었습니다. 위와 같은 흐름으로 간다면 데이터베이스가 클라이언트에 좌지우지 되기 때문입니다. 백엔드가 수요 없게 되어 버리는 것이죠. 데이터는 서버에서 다뤄야 하는데, 간단한 부분에서 시간을 세상없이 낭비했습니다. ㅠ 결국 tmdb에서 데이터를 받아온 후경 dump 하는 방식으로 진행했습니다. 서버 구동 단계에서 미리미리 DB를 준비해 놓는 것입니다.
- SPA라고 오히려 모든 것을 비동기로 처리한다면 되려 사용자로 하여금 ‘글이 작성된 게 맞는건가?’ 라는 혼란에 빠트리지 않을까 생각했습니다.
- 우회 끝에 리뷰의 작성과 삭제는 동기, 리뷰의 수정과 댓글의 작성, 수정, 삭제는 비동기로 처리되도록 했습니다. 어떻게 처리하는 것이 좋을지는 다음에도 고민해봐야 할 부분이라고 생각합니다.