본 포스트는 프로젝트에 관한 간략한 설명, 관련 포스트 링크 내용등이 작성되어 있습니다.
상세 설명 및 코드, 서비스 화면 등을 확인하기 위해 중간에 작성된 Github 링크를 이용부탁드립니다.
🎁 Phantom
💡 프로젝트 소개
영화관으로의 복귀
가장 대중적인 문화 활동 중 하나인 영화 시청이 코로나가 창궐한 이후 사회적 거리두기로 영화 시청 인구 감소 및 영화관 방문 감소하였습니다.
코로나 백신 2차 접종이 전국 약 80%를 달성한 지금, 이 시점에 위드 코로나로 기존 일상으로 복귀와 함께 영화관으로 복귀를 바라는 사람들의 영화 추천 및 영화관 예매 안내, 넷플릭스 안내 서비스입니다.
📆 프로젝트 기간
2021-11-17 ~ 2021-11-25 (1주)
💻 프로젝트 상세 내용 (Github)
통합 README
프로젝트 소개 및 핵심 기능, Wireframe, 전체 기술 스택, 페이지별 상세 설명
https://github.com/unho-00/phantom
💭 커뮤니케이션
- 스크럼 미팅, 회의, 일정 공유는 Notion을 이용하였습니다.
- 실시간 보이스 채팅, 버그 공유, 코드 리뷰는 Discord를 이용하였습니다.
🙋♂️ 역할
프론트엔드
- 프로젝트 구조 정의, 레이아웃 구성
- 전역 상태 관리
- 비동기 통신
백엔드
- CGV, 넷플릭스 예매 정보 동적 크롤링 이용한 데이터 수집
📚 기술 스택
📌 기술 선정 이유
Vue.js
자바스크립트 프레임워크로 싱글 페이지 애플리케이션(SPA)을 구축하기 위해서 선정하게 되었습니다.
또한, 프레임워크로 사용 방법을 익히면 손쉽게 구현이 가능하며 전역 상태 관리를 위한 Vuex 와 Vue router 적용이 수월하여 사용하게 되었습니다.
Vuex
Vue.js 각각의 컴포넌트에서 상태를 관리하였을때, 타 컴포넌트와의 상태 공유 과정에 복잡합이 존재하였습니다.
컴포넌트가 깊어지고, 많아지는 경우 복잡도가 증가하여 전역적으로 상태를 관리를 도와주는 Vuex 를 사용하게 되었습니다.
Selenium
사용자의 편의 증진을 위하여 사용자가 조회한 영화가 현재 CGV 또는 Netflix 에서 상영(시청)이 가능한 경우, 해당 홈페이지로 연결 시켜주는 서비스를 준비하였습니다.
서비스를 제공하기 위해 CGV 와 Netflix 홈페이지의 영화 목록 정보 크롤링이 필요하였는데, 해당 페이지가 동적 페이지들로 동적 페이지에 맞는 크롤링이 필요하였습니다.
관련된 내용을 학습하던 중 Selenium 을 이용하여 동적 페이지에서 크롤링이 가능한 사실을 알게되어 사용하게 되었습니다.
이후, 추가적인 학습으로 브라우저 개발자 도구를 이용하여 해당 웹페이지에서 서버로 요청 보내는 주소를 파악하여 데이터 수집하는 방법을 학습하였습니다
✨ 프로젝트 성과 및 어려웠던 점
현재 작성 준비 중입니다...
📘 관련 포스팅
현재 작성 준비 중입니다...
'프로젝트' 카테고리의 다른 글
Honey Pick - 사용자 쇼핑 상품 공유 및 추천, 투표 서비스 (0) | 2022.05.01 |
---|---|
말듣꾸 - 방언 분류 서비스 (0) | 2022.04.05 |
댓글