sorrow4468 / SSAFY-final-pjt

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

PROJECT - MOVINUS

목차

  1. 코드 실행
  2. 목표 서비스 구현 및 실제 구현 정도
  3. 데이터베이스 모델링(ERD)
  4. 기능에 대한 설명
  5. 실행화면
  6. 기타(느낀점)

코드 실행

.../final-pjt/final-pjt-front/

위 경로에 .env.local 파일을 생성해주세요

Back-End


cd final-pjt-back

python -m venv venv

source venv/Scripts/activate

python manage.py migrate

python manage.py loaddata movies.json

python manage.py runserver
Front-End


cd final-pjt-front

npm i

npm run serve
VUE_APP_YOUTUBE_API_KEY='발급 받은 API키를 '' 없이 KEY값만 입력해주세요'

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

목표 서비스

  • 여러가지 영화 정보를 얻을 수 있습니다.
  • 커뮤니티 기능을 통해 영화에 대해 유저들 간 소통이 가능합니다.
  • 유저는 영화에 "좋아요"를 표시할 수 있습니다.

실제 구현

  • 여러가지 영화 정보를 얻을 수 있도록 구현하였습니다.
  • 커뮤니티에서 영화에 대해 유저들 간에 리뷰를 작성할 수 있습니다.
  • 댓글 작성을 통해 소통이 가능하게 구현하였습니다.
  • 유저는 장르를 바탕으로 영화를 추천 받을 수 있습니다.

기획, 회의록, 로드맵, 타임라인, 일지 (팀 Notion)

https://dented-mango-660.notion.site/dd755b27b3564da5b72da98d8022f062?v=8862febce01a49158391d51108aed6df

image-20211125170828926

모델링(ERD)

DB

ERD

Vue

![Vue ERD](README.assets/Vue ERD-16378137100511.png)

기능에 대한 설명

  • 메인
    • DB에 들어있는 영화 전체를 랜덤하게 보여줍니다
    • 영화 클릭 시 해당 영화의 상세페이지로 이동합니다
    • 상단 nav에 로그인 되어있을 시 "로그아웃"을, 아닐 시 "로그인"과 "회원가입"을 표시합니다
  • 상세 페이지
    • 영화의 제목 평점 줄거리를 보여줍니다
    • YoutubeAPI를 활용하여 해당 영화의 예고편을 받아옵니다
      • 예고편이 없을경우 동작하지 않을 수 있습니다
    • 영화의 장르를 보여줍니다
    • 장르를 클릭하면 해당 장르의 다른 영화들을 보여줍니다
      • 상세 페이지로 처음 이동할 때 받아오는 장르추천영화들은 해당 영화의 장르중 첫번째 장르입니다
      • 장르로 추천받은 영화를 클릭하면 추천받은 영화의 상세 페이지로 이동합니다
  • 커뮤니티
    • 리뷰 및 댓글을 생성, 수정, 삭제 할 수 있습니다
      • 본인이 작성한 리뷰, 댓글만 수정, 삭제할 수 있습니다
    • 리뷰 제목 클릭시 리뷰 상세페이지를 보여줍니다
      • 리뷰 상세페이지는 리뷰 제목, 작성자, 평점, 내용, 댓글을 보여줍니다
  • 영화추천
    • 영화를 분류하는 전체 장르를 보여줍니다
    • 장르를 클릭하면 해당 장르의 영화 8개를 보여줍니다
      • 해당 장르의 영화가 8개 미만일 경우, 8개가 표시되지 않을 수 있습니다
    • 추천된 영화를 클릭하면 해당 영화의 상세 페이지로 이동합니다
  • 계정
    • 회원가입
      • 비밀번호와 비밀번호확인이 일치하는지 확인합니다
      • 회원가입 후 로그인 페이지로 이동합니다
    • 로그인
      • 로그인 후 메인페이지로 이동합니다
      • 회원이 아닐경우 회원가입을 할 수 있도록 안내합니다

실행화면

image-20211125132203399

image-20211125132838591

image-20211125132308220

image-20211125132411705

image-20211125132433180

image-20211125132752558

image-20211125132724915

기타(느낀점)

  • 이번 PJT하면서 과로도 경험해봤고 기획이 틀어지는 등 영향을 끼쳤기 때문에 당초 기획했던 결과물을 내는데 있어서 중요한 것에 대해 생각을 많이 해보는 기회가 되었습니다. "실력+체력+시간 > 명세" 의 값이 참이어야 결과물을 낼 수 있다는 것을 실전 경험을 통해 배웠습니다.
  • 깔끔한 코드를 쓰기 위한 노력을 더 많이 해야 할 것 같습니다. Vue같은 경우 컴포넌트 단위로 쪼개서 관리하기 쉽도록 하기위함이 있는데, 당장 개발하기 편하자고 Vue를 활용하지 못한 채, 코드를 너무 휘갈긴 것 같습니다. 스타일링도 불필요한 내용이 많았고 가독성도 많이 안좋은 것 같습니다. 결국 어제 짠 코드를 오늘은 이해하지 못하는 일도 꽤 있었습니다. 첫 실전경험으로 보자면 매우 만족스러운 결과물이지만, 이후 작성해나갈 코드들도 생각하면서, 여러 개선점들을 스스로 피드백해볼 수 있었습니다.

About


Languages

Language:Vue 44.3%Language:Python 33.2%Language:JavaScript 18.8%Language:CSS 2.8%Language:HTML 0.9%