Phantom - 영화 추천 서비스

프로젝트

언호 2021. 12. 17. 22:48

본 포스트는 프로젝트에 관한 간략한 설명, 관련 포스트 링크 내용등이 작성되어 있습니다.

상세 설명 및 코드, 서비스 화면 등을 확인하기 위해 중간에 작성된 Github 링크를 이용부탁드립니다.

🎁 Phantom

영화관으로의 복귀

가장 대중적인 문화 활동 중 하나인 영화 시청이 코로나가 창궐한 이후 사회적 거리두기로 영화 시청 인구 감소 및 영화관 방문 감소하였습니다.

코로나 백신 2차 접종이 전국 약 80%를 달성한 지금, 이 시점에 위드 코로나로 기존 일상으로 복귀와 함께 영화관으로 복귀를 바라는 사람들의 영화 추천 및 영화관 예매 안내, 넷플릭스 안내 서비스입니다.

2021-11-17 ~ 2021-11-25 (1주)

프로젝트 소개 및 핵심 기능, Wireframe, 전체 기술 스택, 페이지별 상세 설명

자바스크립트 프레임워크로 싱글 페이지 애플리케이션(SPA)을 구축하기 위해서 선정하게 되었습니다.
또한, 프레임워크로 사용 방법을 익히면 손쉽게 구현이 가능하며 전역 상태 관리를 위한 Vuex 와 Vue router 적용이 수월하여 사용하게 되었습니다.

Vue.js 각각의 컴포넌트에서 상태를 관리하였을때, 타 컴포넌트와의 상태 공유 과정에 복잡합이 존재하였습니다.

컴포넌트가 깊어지고, 많아지는 경우 복잡도가 증가하여 전역적으로 상태를 관리를 도와주는 Vuex 를 사용하게 되었습니다.

사용자의 편의 증진을 위하여 사용자가 조회한 영화가 현재 CGV 또는 Netflix 에서 상영(시청)이 가능한 경우, 해당 홈페이지로 연결 시켜주는 서비스를 준비하였습니다.

서비스를 제공하기 위해 CGV 와 Netflix 홈페이지의 영화 목록 정보 크롤링이 필요하였는데, 해당 페이지가 동적 페이지들로 동적 페이지에 맞는 크롤링이 필요하였습니다.

관련된 내용을 학습하던 중 Selenium 을 이용하여 동적 페이지에서 크롤링이 가능한 사실을 알게되어 사용하게 되었습니다.

이후, 추가적인 학습으로 브라우저 개발자 도구를 이용하여 해당 웹페이지에서 서버로 요청 보내는 주소를 파악하여 데이터 수집하는 방법을 학습하였습니다

현재 작성 준비 중입니다...

현재 작성 준비 중입니다...