README

YINGCHA TEAM

• 기능 별로 역할 분담을 진행했습니다

• 🐯LEADER / 한지운(Full Stack)

  • 알고리즘 구현

  • 영화 상세 기능

  • 유저 관련 기능

• 🐭 MEMBER / 임지민(Full Stack)

  • 음식 검색 기능
  • 음식 상세 기능
  • 게시판 기능
  • 디자인

목표 서비스 구현 & 실제 구현 정도

목표 서비스 구현	실제 구현 정도
음식 검색 기능	completed
음식, 영화 정보를 포함한 게시판 기능	completed
음식과 어울리는 영화 추천 기능	completed
이 영화와 유사한 다른 영화 추천	completed
main carousel	uncompleted
social login	uncompleted
추천 후 사용자로부터 이 추천에 대한 호불호 여부 받기	uncompleted

• 구현하지 못한 이유
  • 주요 기능부터 구현하다보니 저희 계획 상 후순위인 main carousel과 social login은 구현하지 못했습니다.

ERD MODELING

주요 기능

1. 음식 검색 기능

   1. 검색창에 음식을 입력할 경우 그 글자가 들어간 음식을 보여줄 수 있도록 하였습니다
   2. 예를 들어 라를 검색하면 라면, 마라탕, 마라룽샤, 라멘, 오므라이스를 보여주었습니다

2. 음식과 영화 조합에 대한 게시글 작성

   1. 음식과 영화를 검색하여 이 조합에 대한 게시글을 작성할 수 있도록 하였습니다
   2. 작성된 게시글은 음식디테일 페이지에서 확인할 수 있습니다

3. 음식을 검색하면 영화 추천해주기

   1. 음식과 맛을 M:N으로 연결하였고, 맛과 장르를 M:N으로 연결하였습니다
   2. 음식으로 맛을 조회한 후, 맛으로 장르를 조회하였습니다. 선택한 장르를 순회하면서 장르에 연결된 영화를 랜덤으로 하나씩 추천해주었습니다

4. 장르를 기반으로 한 영화 추천해주기

   1. 영화 디테일 페이지에서 해당 영화와 관련된 영화를 추천해주는 알고리즘을 사용했습니다
   2. 영화와 매핑된 장르 데이터를 벡터화하여 장르를 통해 영화의 유사도를 측정하였습니다
   3. 영화 간 코사인 유사도가 높은 영화를 10개 추천해주는 방식을 이용했습니다

어려웠던 점 & 느낀 점

🐭 임지민

총평

• 뭐 하나 쉬운게 없었습니다.
  • 기능 하나 구현하면 에러를 해결하는 데 많은 시간이 소요되어서 심리적으로도 힘들고, 육체적으로도 힘들었습니다.
• 협업이어서 가능했습니다.
  • 페어와 같이 한다는 게 부담으로 다가온 건 사실이었지만, 그 부담이 저를 움직이게 했습니다.
• 개발 계획을 할 때 구체화하는 법을 배웠습니다.
  • 우리 서비스에 있으면 좋을 기능보다 우리 서비스의 의도에 맞는 구현 가능한 기능을 구현 방법과 같이 계획을 해야 실패와 후회가 적다는 사실을 배웠습니다.
• 현재의 저의 한계와 성취 가능한 지점을 구체적으로 알 수 있는 시간이었습니다.
  • 모르는 내용은 공식문서와 구글링, 페어와의 협업으로 많은 것을 배워가면서 진행했습니다. 그렇다 보니 제가 생각보다 할 수 있는 게 많음을 알게 되어 뿌듯했습니다. 반면에, 한계점도 명확히 알 수 있었습니다.

발생했던 주요 문제점

• 백엔드

  • 데이터 호출 문제
    • 장고와 통신을 해서 api를 호출하면 속도가 너무 느려서, vue에서 axios 호출하는 것으로 변경함
  • 데이터 저장
    • dumpdata를 할 때 한글이 깨지는 문제 발생 ➡ 쿼리 입력 시 인코딩 문제 해결
    • python -Xutf8 manage.py dumpdata --indent 4 communities > foods.json

• 프론트 엔드

  • axios에러
    • 401 : 토큰 값 없이 요청을 보냄
    • 404 : 대부분 vue 내부에서 pk값이 제대로 넘어가지 못하는 경우였음
    • 500 : django 내부 오류
  • store에서의 데이터 처리
    • vuex의 흐름을 이해하지 못해 초반에 데이터를 처리하고 받는 과정에서 많은 에러가 발생했었음

🐯한지운

총평

• 이번 프로젝트를 통해 얻은 2가지는 다음과 같습니다
  • 먼저 핵심기능을 제일 우선순위에 두고 먼저 개발하자는 마인드입니다
    • 처음으로 프로젝트를 진행하다보니 구현하고 싶은 기능이 많았습니다. 예를 들어 로그인은 소셜로그인도 됐으면 좋겠고, 로그인창이 팝업처럼 나와서 다른 페이지로 렌더링되지 않았으면 좋겠다라는 생각이 있었습니다. 한정된 시간 안에 개발을 진행해야하다보니, 우선순위를 정하게 되었고 앱의 핵심 기능에 더 집중하였습니다.
  • 깃에 대한 사용법입니다
    • 이번 프로젝트를 하면서 깃 브랜치를 처음 사용해봐서 충돌이 발생하기도 했습니다. 충돌을 깃 허브와 로컬 두 곳에서 해결해보면서 새로운 커밋을 통해 충돌을 해결하는 방법을 배우게 되었습니다. 또한 다른 기능을 구현하다보니 소통의 중요성에 대해서도 자연스럽게 알게 되었습니다. 무심코 말하지 않고 건드린 파일 하나가 결국에는 충돌을 불러일으키기 때문입니다.

발생했던 주요 문제점

• axios요청을 보낸 후 데이터가 오기 전에 다른 axios요청 보내기
  • 영화 디테일 페이지에서 영화에 대한 상세 정보를 비동기 요청으로 보낸 후 감독에 대한 정보가 오기도 전에 감독ID로 감독 이미지를 가져오는 다른 요청을 보냈었습니다. VUEX STATE에는 데이터가 잘 저장이 되어 있어서 디버깅이 힘들었습니다. 비동기 요청 문제라는 것을 인식한 후에는 영화에 대한 상세 정보가 온 후에 감독에 대한 이미지를 불러오는 요청을 처리하도록 코드를 수정하였습니다
  • 서버에 비동기 요청을 보내고, 요청한 데이터가 오기도 전에 데이터를 렌더링하여 계속해서 비슷한 문제가 발생하는 것을 알았습니다. 이를 통해 댓글 기능을 구현할 때는 영화 디테일 페이지보다 더 빨리 디버깅할 수 있었습니다.
• 처음에 데이터베이스에 넣은 초기 데이터를 수집하는 과정에서 어려움
  • TMDB API를 통해 데이터를 수집하는 과정에서 1. JSON 형식을 맞춰서 데이터 저장하기 2. 모델 클래스를 기반으로 인스턴스를 만들어서 데이터베이스에 저장하기 두가지 방법이 있었습니다. 그 중 첫번째 방법으로 시도했는데 N:M 관계에서 데이터를 어떻게 저장해야할지 모르겠어서 두번째 방법으로 변경하였습니다. 먼저 테이블에 정의된 속성들은 API 데이터로 채우고 다대다 관계로 연결된 속성들은 인스턴스 속성에 ADD 하는 방식으로 해결하였습니다