1. 프로젝트 소개 🎉🏆1학기 관통프로젝트 우수상🏆🎉

Django와 Vue.js를 이용한 영화 커뮤니티 웹사이트

MoviEars

팀장 : 방상제 | 팀원 : 김한결

• 업무 분담

  이름	담당 영역
  방상제	- 프론트엔드 - 백엔드 데이터를 받아와 프론트엔드 기능 구현 및 디버깅, 프론트엔드 디자인 정교화
  김한결	- 백엔드 및 프론트엔드 - DB 모델링, 백엔드 데이터 로직 작성, 프론트엔드 기능 구현 및 디버깅

• 개발 기간 : 2023. 05. 17 ~ 2023. 05. 25

• 기획 의도 : 기본적으로 영화에 대한 정보를 제공하고, 영화 OST에 대한 퀴즈와 감상 컨텐츠를 제공하여 영화에 대한 관심을 높이고, 의견을 공유할 수 있는 커뮤니티를 제공한다. = > 핵심 컨셉은 영화 OST

• 기술 스택 : Django RestFramework, Vue.js, SQLite

2. 프로젝트 구현 기능

• 영화 정보 제공 {{ 영화 목록, 영화 상세 정보 }}
  • 영화 상세 정보에서 예고편과 영화 음악 재생 가능
• 영화 OST 퀴즈
• 영화 OST 감상
• 영화 추천
• 커뮤니티 {{ 게시판, 댓글, 좋아요 }}
  • 게시글 작성 및 삭제, 댓글 작성 및 삭제
• 회원가입, 로그인, 로그아웃

3. 데이터베이스 모델링 (ERD)

4. 영화 추천 알고리즘

• 영화 음악 퀴즈에서 유저가 정답을 많이 맞춘 상위 영화 5개를 추천.

5. 프로젝트 상세 화면

| 랜딩 페이지 (로그인 & 회원가입)

• 첫 화면으로 로그인 화면 구성
• 회원가입 버튼을 누르면 회원가입 화면으로 이동
• tailwind CSS를 이용하여 디자인

| 영화 목록 페이지

• 로그인하면 영화 목록 화면으로 이동
• 상단은 스크롤 이동시 메인 영화 변경
• 하단은 영화 목록을 보여줌

| 영화 상세 페이지

• 평점, 개봉일, 영화 OST, 줄거리, 예고편을 제공

| 영화 OST 퀴즈 페이지

• 무작위 3개 영화 중에서 하나는 정답이고 나머지는 오답
• 정답 또는 오답을 고르면 모달창이 뜨며 정답 여부를 알려줌
• 재생과 일시 정지 버튼 제공
• 새로 고침 버튼을 누르면 새로운 퀴즈를 시작
• 퀴즈 정답횟수를 영화 추천 알고리즘에 반영

| 영화 OST 감상 페이지

• 무작위 6개 영화의 포스터를 원형으로 보여줌.
• 화면 중앙에 위치한 원형 버튼이 재생 버튼이자 일시정지 버튼.
• 원형 버튼은 lp판에서 모티브를 얻음.
• 포스터 원형 버튼을 클릭하면 회전하며 해당 영화 OST를 재생.
• 외부 원판을 회전시키면 영화 OST 교체.

| 영화 추천 페이지

• 영화 OST 퀴즈에서 유저들이 정답을 맞춘 횟수를 기준으로 상위 5개 영화를 추천.

| 커뮤니티 페이지

• 게시글 목록 및 상세 조회
• 게시글 작성 및 삭제
• 상세 조회 페이지에서 해당 게시글의 좋아요 & 댓글 작성 및 삭제 가능

6. 프로젝트 후기

• 방상제 : 처음에는 Vue.js 를 활용하지 않고 Vanilla JS 로 진행하려 하다가 Vue.js 를 활용하기로 하면서 비동기 통신과 Vuex에 대해 공부가 더 필요하다고 느껴서 Vue.js 에 대해 공부를 하면서 프로젝트를 진행하였습니다. 이론적으로 충분히 이해했다고 생각했던 부분이지만, 실제 백엔드에서 넘어온 데이터를 프론트에서 다루는 과정에서 의도했던 대로 동작하지 않음을 발견할 수 있었습니다. 이를 디버깅하기 위해 시간을 투자해서 해결하며 이론적으로만 공부하는 것이 아니라 실제로 코드를 작성하면서 이해하는 것의 중요성을 알게 되었습니다.
  

  간단한 로직 같아 보이지만 실제 신경써야 할 부분이 꽤나 많았고 권한, 에러 메세지, 접근 차단 등 고려할 점이 많았습니다. 수업에서는 배우지 않았던 부분들도 있어 구글링과 공식 문서 그리고 팀원의 도움으로 해결하면서 협업의 중요성을 다시금 깨달았습니다.
  

  이번 프로젝트를 통해 백엔드에서 프론트엔드로 데이터를 넘겨주는 과정을 이해하고, 프론트엔드에서 받은 데이터를 활용하여 웹 페이지를 구성하는 과정을 이해할 수 있었습니다. 사람들이 왜 프로젝트를 해보는 것이 중요하다고 말하는지 깨달았고 어디가 부족했는지 무엇을 더 공부해야 하는지 알게 된 소중한 경험이었습니다.
  

• 김한결 : 기획을 시작하고 기획을 토대로 하나하나 구현을 해가며 완성되어가는 과정이 너무 재미있었습니다. 또한, 매주 금요일에 했던 관통 프로젝트와 달리 혼자 하는 게 아닌 팀원과 협업을 하니 더욱 즐겁게 프로젝트를 진행할 수 있었습니다.
  

  프로젝트를 진행함에 있어 어려움도 있었습니다. Git의 사용 경험 부족으로 인한 Git 사용의 어려움과 개발을 진행하면서 끊임없이 발생하는 에러들이 저희를 괴롭혔습니다. 하지만 이러한 어려움들을 극복해가면서 새로운 것들을 배우며 SW 역량을 향상시킬 수 있었습니다.
  

  약 4개월간 배웠던 python(django)과 javascript(vue)를 직접 개발에 사용해 보면서 그동안에 배웠던 것들이 의미가 있었다는 것을 느낄 수 있었습니다. 이번 프로젝트가 앞으로 진행할 여러 프로젝트에 도움이 될 소중한 경험이 될 거라고 생각합니다.