README
[TOC]
1. 팀원 정보 및 업무 분담 내역
팀원 1. 조성국(본인): Front-end & 팀장 역할
-
TMDB API 활용하여 데이터 수집 & load data
-
백엔드 API활용하여 데이터 가공 & 표시
- html
- css
- bootstrap
- javascript
- Vuejs
- vuex
- vue router
- vue glide
- Ajax 비동기 요청
- axios
-
로고 제작
-
발표용 영상 제작
**팀원 2. 황윤호: Back-end **
- 백엔드 API
- DB 구성 및 ERD
- 추천 알고리즘
- 좋아요/평점/시청기록 활용
- 로그인/회원가입
- JWT token auth
- 관리자 사이트
- superuser
2. 목표 서비스 구현 및 실제 구현 정도
목표 기능 구현 90% 이상
예상 추가 작업
- 추천 알고리즘 고도화
- 평점 디자인 변경 -> 별점
3. 개발환경
3-A. 언어
- Python 3.7.7
- Django 3.1
- Node 14.15.0
- npm 6.14.8
- Vue.js 2.6+
- Vue/cli 4.5.9
3-B. 도구
i. vsCode ii. Chrome Browser
3-C. 아키텍처
i. Django & Vanila JS
ii. Django REST API 서버 & Vue.js
# Back-end 파일 트리
├── .vscode
| ├── settings.json
├── venv
├── watchub
| ├── accounts
| | ├── __pycache__
| | ├── migrations
| | └── templates
| | | ├── accounts
| | | ├── login.html
| | | └── signup.html
| | ├── __init__.py
| | ├── __admin__.py
| | ├── apps.py
| | ├── forms.py
| | ├── models.py
| | ├── serializers.py
| | ├── tests.py
| | ├── urls.py
| | └── views.py
| |
│ ├── movies
│ │ ├── __pycache__
│ │ ├── fixtures
| | | └── Movie.json
│ │ ├── migrations
│ │ ├── __init__.py
│ │ ├── admin.py
│ │ ├── apps.py
│ │ ├── forms.py
│ │ ├── models.py
│ │ ├── serializers.py
│ │ ├── tests.py
│ │ ├── urls.py
│ │ └── views.py
│ ├── watchub
│ │ ├── __pycache__
│ │ ├── templates
│ │ │ └── base.html
│ │ ├── __init__.py
│ │ ├── asgi.py
│ │ ├── settings.py
│ │ ├── urls.py
│ │ └── wsgi.py
│ ├── db.sqlite3
│ └── manage.py
│
├── .gitignore
├── requirements.txt
└── README.md
# Front-end 파일 트리
├── node_modules
| ├── ...
├── public
| ├── index.html
| ├── style.css
| ├── favicon.ico
├── src
| ├── assets
| ├── components
| | ├── Home
| | | ├── Carousel.vue
| | | ├── Classic.vue
| | | ├── Latest.vue
| | | ├── Popular.vue
| | ├── MyMvie
| | | ├── Favorite.vue
| | | ├── Already.vue
| | | ├── Wishlist.vue
| ├── router
| ├── store
| ├── views
| | ├── accounts
| | | ├── Login.vue
| | | ├── Signup.vue
| | ├── Home.vue
| | ├── MyMovie.vue
| | ├── Recommend.vue
| | ├── ReommendCarousel.vue
4. 데이터베이스 모델링(ERD)
5. 필수 기능에 대한 설명
5-A. 커뮤니티
- 좋아요
- user가 영화에 대해 좋아요를 할 수 있음
- 추후 추천 알고리즘에 활용
- 시청기록
- user가 영화에 대해 시청기록을 표기할 수 있음
- 추후 추천 알고리즘에 활용
- 평점
- user가 영화에 대해 rank를 1~10까지 줄 수 있음
- 별점형식으로 Front-end 개선 예정
- 추후 추천 알고리즘에 활용
- 댓글
- user가 영화에 대해 코멘트 남길 수 있음
- 내가 쓴 댓글은 삭제 가능
5-B. 추천 알고리즘
이미 본 영화여서 시청기록이 있다면 추천 알고리즘에서 제외시킨다
좋아요한 영화들의 장르들을 모아 카운팅한다.
가장 좋아하는 장르 top 1~3를 가지고 이 장르의 영화들을 추천 목록에 올린다.
5-C. 마이페이지
- 내가 좋아하는 영화 목록
- 좋아요 누른 영화들의 목록을 보여줍니다.
- 내가 본 영화 목록
- 시청한 영화들의 목록을 보여줍니다.
- 보고 싶은 영화
- 나중에 보고 싶은 영화들을 기록할 수 있는 입력창과 그 데이터들을 보여줍니다.
6. 배포 서버 URL
test용 ID
id: test
pw: test01!7. 기타(느낀점)
-
django 와 Vuejs로 프론트엔드와 백엔드를 따로 분리해서 만드는 과정을 처음으로 협업해보면서 양쪽의 소통이 쉽지 않다는 것을 느꼈습니다. postman을 활용해 백엔드에서 만든 API를 테스트해볼 때에는 잘 작동하던 API도 막상 프론트엔드에서는 필수 요소값을 불러올 수 없어 API를 활용하지 못하는 경우가 많았습니다. 누군가에게는 쉽게 얻을 수 있는 데이터지만 누군가에게는 접근하기 어려운 데이터일 수 있다는 것을 알았습니다.
-
명세서를 구체적이고 꼼꼼하게 작성하는 것이 중요하다는 것을 알았습니다. 명확한 명세서가 없으니 중간 중간 고민하는 부분이 많았고 결과적으로 이 부분에서 많은 시간을 허비했습니다. 처음부터 모든 것을 완벽히 준비할 수는 없겠지만 DB 모델링과 같이 필수적인 내용들은 꼭 구체적으로 미리 작성해두는 것이 좋을 것 같다고 생각했습니다.
-
Front-end부분을 맡으면서 Vuejs와 javascript에 어느 정도 친숙해질 수 있는 시간이어서 좋았습니다.
-
짧은 프로젝트였지만 많이 성장할 수 있었던 좋은 시간이었습니다. 또한 SSAFY과정 중 스스로 얼마나 성장했는지, 그리고 현재 부족한 점이 무엇인지 파악할 수 있는 값진 경험이었습니다.