Movie World!(22.05.20~05.26)

🏁팀원 정보 및 업무 분담 내역(아키텍쳐: Django와 Vanilla Js 사용)

😃안희재(팀장, back-end): Django를 이용한 영화추천 웹서버 구축

😎유이서(팀원, front-end): Vanilla Js와 HTML JavaScript bootstrap5 를 이용한 화면 구성

🏁목표

영화정보

로그인 된 유저는 영화에 대한 평점 등록/ 수정/삭제 등을 할 수 있어야 한다.

커뮤니티

영화 정보와 관련된 소통을 할 수 있는 커뮤니티 기능을 구현해야 한다.
로그인 사용자만 글을 조회/ 생성할 수 있으며, 작성자 본인만 글을 수정/ 삭제할 수 있어야 한다.
사용자는 작성된 게시 글에 댓글을 작성할 수 있어야 하며 작성자 본인만 댓글을 삭제할 수 있어야 한다.
각 게시글 및 댓글은 생성 및 수정 시각 정보가 포함되어야 한다.

기타

5개 이상의 URL 페이지

🏁필수 요구 사항 실제 구현 여부

A. 관리자 뷰

i. 관리자 권한의 유저만 영화 등록 / 수정 / 삭제 권한을 가진다 ( O )
ii. 관리자 권한의 유저만 유저 관리 권한을 가진다 ( O )
iii. Django에서 기본적으로 제공하는 admin 기능을 이용하여 구현한다 ( O )

B. 영화 정보

i. 영화 데이터는 Database Seeding을 활용하여 최소 50개 이상의 데이터를 구성해야 한다 ( O )
- movie.json파일을 자체적으로 제작하여, loaddata하여 데이터 추출
ii. 로그인 된 유저는 영화에 대한 평점 등록 / 수정 / 삭제 등을 할 수 있어야 한다 ( O )

C. 영화 추천 알고리즘

i. 영화를 평가한 유저는 해당 정보를 기반으로 영화를 추천 받을 수 있어야 한다 ( x )
- 유저가 8점 이상의 점수를 준 영화의 장르 정보를 저장하고,
- 그 정보를 바탕으로 평점이 좋은 순으로 10개씩 추천하는 알고리즘을 짜려고 하였으나,
- 오류를 해결하지 못하여 -> 단순 랜덤 추천 알고리즘 코드를 작성
ii. 사용자는 반드시 최소 1개 이상의 방식으로 영화를 추천 받을 수 있어야 한다 ( O )
iii. 어떠한 방식으로 추천 시스템을 구현 했는지 기술적으로 설명할 수 있어야 한다 ( O )

D. 커뮤니티

i. 영화 정보와 관련된 소통을 할 수 있는 커뮤니티 기능을 구현해야 한다 ( O )
ii. 로그인 사용자만 글을 조회 / 생성 할 수 있으며, 작성자 본인만 글을 수정 / 삭제할 수 있다 ( O )
iii. 사용자는 작성된 게시 글에 댓글을 작성할 수 있으며, 작성자 본인만 댓글을 삭제할 수 있다 ( O )
iv. 각 게시글 및 댓글은 생성 및 수정 시각 정보가 포함되어야 한다 ( O )

E. 기타

i. 최소한 5개 이상의 URL 및 페이지를 구성해야 한다 ( O )
ii. HTTP Method와 HTTP response status codes는 상황에 맞게 적절하게 반환되어야 하며, 필요에 따라 메시지 프레임워크 등을 사용하여 에러 페이지를 구성해야 한다 ( O )

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

🏁실제 구현 정도 및 필수 기능에 대한 상세 설명 (프론트엔드 - 나)

# 구현 시연 영상

/movies/index.html

Bootstrap5의 Card Component를 이용하여 화면을 구성하기 위해 movie의 title과 poster image가 필요
views.py의 index 뷰함수를 참고하면 models.py의 Movie에서 모든 것을 불러오고 있기 때문에 context에서 정의한 movie로 models.py의 요소들에 접근해 이를 불러왔다.
또한 영화 이미지를 누르면 movie detail페이지로 이동 해야 하기 때문에 a태그를 이용해 detail 페이지에 접근할 수 있게 하였다.

			<!--bootstrap card code start-->
      <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4">
        {% for movie in movies %}
          <div class="col">
            <div class="card h-100 text-white bg-dark">
              <a href="{% url 'movies:detail' movie.pk %}"><img src="{{ movie.poster_path }}" class="card-img-top" alt="..."></a>
              <div class="card-body text-center">
                {{ movie.title }}
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
			<!--bootstrap card code end-->

/movies/detail.html

form 작성 유저와 평점을 남긴 유저를 비교해 삭제 버튼 표시

form 태그를 POST하기 때문에 CSRF를 막기 위해 난수를 생성해 주는 csrf token을 작성
평점이 없는 경우(empty) 평점이 작성되지 않았다는 문구 출력

{% for rating in ratings %}
    <li>
      {{ rating.user }} / {{ rating.score }}점 - {{ rating.comment }} - {{ rating.created_at }}
      {% if request.user == rating.user %}
        <form action="{% url 'movies:delete_rating' movie.pk rating.pk %}" method="POST" class="d-inline">
          {% csrf_token %}
          <input class="btn rounded-pill" style="font-size:0.75rem; background-color:#F48FB1;" type="submit" value="삭제">
        </form>
      {% endif %}
    </li>
  {% empty %}
    <p>아직 작성된 평점이 없습니다! ╯︿╰</p>
  {% endfor %}

form 작성 유저가 이미 평점을 남겼을 경우

이미 작성 완료했다는 문구를 출력
만약 평점을 남기지 않은 경우 is_authenticated를 이용해 로그인 여부를 체크했다.

{% if request.user.id in user_ids %}
    <strong>평점을 이미 등록하셨습니다!</strong>
  {% else %}
    {% if request.user.is_authenticated %}
      
      <form action="{% url 'movies:create_rating' movie.pk %}" method="POST">
        {% csrf_token %}
        {% bootstrap_form rating_form %}
        <div class="text-left">★평점(1 ~ 10점)을 입력해주세요!</div><br>
        <div style="text-align: center;">
          <input class="btn rounded-pill" style="background-color : #B3E5FC;" type="submit" value="댓글 + ">
        </div>
        
      </form>
    {% else %}
      <a href="{% url 'accounts:login' %}" class="btn btn-dark rounded-pill">평점을 남기시려면 로그인하세요.</a>
    {% endif %}
  {% endif %}

/accounts/signup.html

bootstrap5를 이용해 쉽게 form을 구현했다.
bootstrap5를 사용하기 위해 {% load django_bootstrap5 %} 를 block content 안에 작성하였다.
form태그가 POST 요청 이므로 CSRF를 막기 위해 csrft token 작성하였다.

{% block content %}
{% load django_bootstrap5 %}
<div style="text-align: center; max-width:500px; margin:4rem auto"> 
  <div> 
    <h2>
      <span class="badge rounded-pill col-10 mt-3" style="background-color : #B3E5FC;">회원가입</span>
    </h2>
  </div> 
  <hr>
  <div> 
    <form action="" method="POST"> 
      {% csrf_token %} 
      <!-- {{ form }} --> 
      {% bootstrap_form form %} 
      <br>
      <hr> 
      <input type="submit" class="btn rounded-pill col-6 mt-3" style="background-color : #E1F5FE;"value="가입하기"> 
    </form> 
  </div> 
</div>
{% endblock  %}

/accounts/login.html

singup.html과 마찬가지로 bootstrap5 form을 사용하게 위해 {% load django_bootstrap5 %}
form태그가 POST 요청 이므로 CSRF를 막기 위해 csrft token 작성하였다.
회원이 아닌 경우 회원 가입 창을 찾기 쉽게 아래에 button을 만들었다.

{% extends 'base.html' %}
{% block content %}
{% load django_bootstrap5 %}
<div style="text-align: center; max-width:500px; margin:4rem auto"> 
  <div> 
    <h2>
      <span class="badge rounded-pill col-10 mt-3" style="background-color : #B3E5FC;">로그인</span>
    </h2>
    <br>
    <hr>
  </div> 
  <br>
  <div> 
    <form action="" method="POST"> 
      {% csrf_token %} 
      <!-- {{ form }} --> 
      {% bootstrap_form form %}  
      <input type="submit" class="btn rounded-pill col-6 mt-3" style="background-color : #E1F5FE;"value="LogIn"> 
    </form> 
  </div>
  <br>
  <hr>
  <p>아직 회원이 아니신가요?</p> 
  <a class="btn rounded-pill btn-primary" href="{% url 'accounts:signup' %}">회원 가입하기</a>
</div>
{% endblock content %}

accounts/follow.html

follow.html은 views.py에서 확인할 수 있듯이 follow상태를 HttpRequest 인스턴스를 인자로 리턴하기 위해 FBV(Function Based View)의 방법 중 하나 인 JSON 형식 response를 해주었다.
따라서, follow.html은 bootstrap5의 기능 중 하나 인 jumbotron 을 이용해 profile.html에서 include해 출력하는 방식을 택했다.
follow 상태가 아니라면 follow 버튼이 회색으로 처리 되게 구현했다. (fontawesome CDN 활용)
다음 구현 페이지 설명에서 이 follow.html을 JS의 axios를 통해 비동기화 했다.

<div class="container jumbotron text-left text-black ">
  <h1 class="display-4">@ {{ person.username }}</h1>
  <hr>
  {% with followings=person.followings.all followers=person.followers.all %}
  <div class="d-flex justify-content ">
    <!-- 팔로우 버튼 -->
    {% if request.user != person %}
      <form id="follow-form" data-user-id="{{ person.pk }}">
        {% csrf_token %}
        {% if request.user in followers %}
          <button class='btn btn-link btn-outline-light' role="button">
          <i id='follow-{{ person.pk }}' class='fa-solid fa-ticket' style='color:crimson;'> Follow</i>
          </button>
        {% else %}
          <button class='btn btn-link btn-outline-light' role="button">
          <i id='follow-{{ person.pk }}' class='fa-solid fa-ticket' style='color: gray;'> Follow</i>
          </button>
        {% endif %}
      </form>
    {% endif %}
  </div>
  <div class="d-flex justify-content-end ">
    <p class="lead">
      팔로잉 : 
      <span id='followings-count-{{ person.pk }}'>{{ followings|length }}</span>
       | 팔로워 :
       <span id='followers-count-{{ person.pk }}'>{{ followers|length }}</span>       
    </p>
  </div>
  {% endwith %}
</div>

accounts/profile.html

follow.html에서 작성된 Bootstrap의 jumbtron을 {% include 'accounts/follow.html' %} 통해 상단에 표시했다.
Bootstrap의 Component중 하나 인 Accordion을 활용해 프로필 유저의 평점 목록과 작성한 게시글 및 댓글, 좋아요 한 게시글을 표현했다.
{% include 'accounts/follow.html' %}해서 불러온 follow.html에서 follow버튼을 눌렀을 때 새로 고침이 일어나지 않게 하기 위해 JS를 사용해 이를 구현했다.

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  const form = document.querySelector('#follow-form')
  const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value

  form.addEventListener('submit', function (event) {
    event.preventDefault()
    console.log(event)
    const userId = event.target.dataset.userId

    axios({
      method: 'post',
      url: `/accounts/follow/${userId}/`,
      headers: {'X-CSRFToken': csrftoken},
      }).then((response) => {
      const followed = response.data.followed
      const followersCount = response.data.followers_count
      const followingsCount = response.data.followings_count
      
      const followButton = document.querySelector(`#follow-${userId}`)
      if (followed) {
        followButton.style.color = 'crimpson'
      } else {
        followButton.style.color = 'gray'
      }
      
      const followingsNum = document.querySelector(`#followings-count-${userId}`)
      followingsNum.innerText = followingsCount
      const followersNum = document.querySelector(`#followers-count-${userId}`)
      followersNum.innerText = followersCount
      
    })
  })
</script>

addEventListener을 통해 follow 버튼을 클릭하면 POST 요청이 가도록 작성했다.

  form.addEventListener('submit', function (event) {
    event.preventDefault()
    console.log(event)
    const userId = event.target.dataset.userId
	...

POST요청이기 때문에 CSRF를 막기 위해 csrf token을 사용해야 하기 때문에 axios에 직접 csrf token을 지정해 주었다. (전역 변수로 csrf token을 작성하는 방법도 있다.)

    axios({
      method: 'post',
      url: `/accounts/follow/${userId}/`,
      headers: {'X-CSRFToken': csrftoken},
      }).then((response) => {
      ...

follow 버튼을 클릭하면 버튼은 팔로우 상태가 되고(회색에서 다른 색으로), 팔로우 버튼을 누른 사람의 팔로잉이 +1 되게 하고, 팔로워가 생긴 사람은 팔로워가 +1 되게 구현하였다.
반대의 경우엔 -1이 되고 버튼 색도 다시 회색이 되게 된다.

.then((response) => {
      const followed = response.data.followed
      const followersCount = response.data.followers_count
      const followingsCount = response.data.followings_count
      
      const followButton = document.querySelector(`#follow-${userId}`)
      if (followed) {
        followButton.style.color = 'crimson'
      } else {
        followButton.style.color = 'gray'
      }
      
      const followingsNum = document.querySelector(`#followings-count-${userId}`)
      followingsNum.innerText = followingsCount
      const followersNum = document.querySelector(`#followers-count-${userId}`)
      followersNum.innerText = followersCount
      
    })

community/index.html

글을 작성하기 위해서는 로그인을 하도록 is_authenticated 해 로그인 여부를 체크해 주었다.
만약 로그인이 되어 있다면 +new 버튼이 보이도록 설정했다.

{% if user.is_authenticated %}
  <a class="btn rounded-pill text-black" style="background-color : #E1F5FE;" href="{% url 'community:create' %}">+ New</a>
{% else %}
  <a href="{% url 'accounts:login' %}">새 글을 작성하려면 로그인하세요</a>
{% endif %}

영화 제목, 작성자, 평점, 작성 시간, 좋아요 버튼, 좋아요 한 사람의 수가 나오도록 구현했다.
여기도 마찬가지로 POST 요청이기 때문에 csrf token을 작성했다.
좋아요 버튼을 하트로 바꾸었으며 이를 누르면 하트가 빨간색(좋아요 상태), 다시 한번 더 누르면 검은색(좋아요 취소 상태)으로 나타나게 하였다.
더불어 버튼을 누를 때 좋아하는 사람의 수가 증감되도록 했다.

{% for review in reviews %}
      <a class="fw-bold text-decoration link-dark" href="{% url 'community:detail' review.pk %}">{{ review.title }}</a>
      <br>
      <a>영화 제목 : {{ review.movie_title }}</a>
      <br>
      작성자 : <a class=" link-secondary" href="{% url 'accounts:profile' review.user.username %}">{{ review.user }}</a>
      <br>
      <a>평점 : {{review.rank}}</a>
      <br>
      <a>작성시간 : {{review.created_at}}</a>
      
      <!-- 좋아요 start -->
      <div class="d-flex justify-content-end ">
        <form class="like_form" data-id='{{ review.pk }}'>
          {% csrf_token %}
          {% if user in review.like_users.all %}
            <button class="btn btn-link">
              <i id="like-{{ review.pk }}" class="fas fa-heart fa-lg" style="color:crimson;"></i>
            </button>
          {% else %}
            <button class="btn btn-link">
              <i id="like-{{ review.pk }}" class="fas fa-heart fa-lg" style="color:black;"></i>
            </button>
          {% endif %}
        </form>
        <span id="like-count-{{ review.pk }}">{{ review.like_users.all|length }}</span>명이 이 글을 좋아합니다.
      </div>
      <hr>
    {% endfor %}

accounts/profile.html과 마찬가지로 좋아요 버튼을 axios처리하는 코드를 작성했다.

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    const forms = document.querySelectorAll('.like_form')
    const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value

    forms.forEach(function (form) {
      form.addEventListener('submit', function (event) {
        event.preventDefault()
        const reviewId = event.target.dataset.id
  
        axios.post(`http://127.0.0.1:8000/community/${reviewId}/like/`, {},
        {headers: {'X-CSRFToken': csrftoken}
        }).then(function (response) {
          const liked = response.data.liked
          const count = response.data.count

          const likeButton = document.querySelector(`#like-${reviewId}`)
          if (liked) {
            likeButton.style.color = 'crimson'
          } else {
            likeButton.style.color = 'black'
          }
          const likeCount = document.querySelector(`#like-count-${reviewId}`)
          likeCount.innerText = `${count}`
        })
      })
    })
  </script>

community/create.html

create.html 페이지는 bootstrap5의 form을 활용하는 방식을 택했다.

{% extends 'base.html' %}

{% block content %}
{% load django_bootstrap5 %}
<div style="max-width:500px; margin:4rem auto">
  <h1 class="text-center">Create</h1>
  <br>
  <form action="" method="POST">
    {% csrf_token %}
    {% bootstrap_form form %}
    <div style="text-align: right;">
      <input class="btn rounded-pill " style="background-color : #B3E5FC;" type="submit" value="create!">
      <hr>
      <a class="btn  rounded-pill " style="background-color : #E1F5FE;" href="{% url 'community:index' %}">Back</a>
    </div>
  </form>
</div>
{% endblock %}

community/detail.html

로그인 된 유저와 리뷰작성자가 일치하면 삭제 버튼이 보이고 삭제도 가능하게 구현했다.

{% if request.user == review.user %}
    <a href="{% url 'community:update' review.pk %}" class="btn rounded-pill" style="font-size:0.75rem; background-color: #BBDEFB;">수정</a>
      <form action="{% url 'community:delete' review.pk %}" method="POST">
        {% csrf_token %}
        <button class="btn rounded-pill" style="font-size:0.75rem; background-color:#F48FB1;">삭제</button>
      </form>
  {% endif %}

community/update.html

다른 페이지와 마찬가지로 update.html도 bootstrap5의 form을 활용하는 방식을 택했다.

{% extends 'base.html' %}

{% block content %}
{% load django_bootstrap5 %}
  <div style="max-width:500px; margin:4rem auto">
    <h1>Update</h1>
    <br>
    
  <form action="" method="POST">
    {% csrf_token %}
    <div style="text-align: left;">
      {% bootstrap_form form %}
    </div>
    <div style="text-align: right;">
      <input class="btn rounded-pill " style="background-color : #B3E5FC;" type="submit" value="update!">
      <hr>
      <a class="btn  rounded-pill " style="background-color : #E1F5FE;" href="{% url 'community:detail' review.pk %}">Back</a>
    </div>
  </form>
</div>
  {% endblock %}

후기

지난 페어 프로젝트 이후로 두 번째로 다른 사람과 협업하여 진행하는 프로젝트였는데, 
좋은 팀원을 만나서 수월하게 프로젝트를 완성해낸 거 같습니다. 
프로젝트를 구상할 때 목표하는 바와 구현 페이지 구상에 대한 의견이 비슷해서 빠르게 진행할 수 있었습니다. 
또한 싸피 과정에서 배웠던 것을 이용해 해보는 점에서 뜻깊었습니다.
지난 관통 프로젝트들에서는 하루 만에 기본 기능만을 구현하는 데에 힘 쏟아 
어딘가 엉성하고 가독성 없는 페이지들을 만들었었는데, 
이번에는 기능들을 며칠간 페어와 나누어 구현하고 홈페이지를 
좀 더 가독성 있고 심플하게 구현해 낼 수 있어서 뿌듯했습니다! 
또한 혼자가 아닌 다른 사람과 함께 프로젝트를 해내어 의미있는 결과를 만들었다는 점에서 
5개월 동안 많은 성장을 했다고 생각합니다😃

저작자표시 비영리 변경금지

일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

𝘭𝘶𝘮𝘪𝘯𝘰𝘶𝘴