𝐓𝐨𝐝𝐚𝐲 𝐈 𝐋𝐞𝐚𝐫𝐧 2022.05.06.금

Today I Learn 220506

오늘은 AJAX통신을 이용해 서버에서 JSON데이터를 받아와 비동기로 화면을 구성하는 과제를 진행하였다. 언제나 그렇듯 오류를 만났다. 아직 axios를 사용하는 방법이 익숙하지 않아서 휴먼에러가 많이 났었다.

<유저 팔로우 기능>

어려웠던 점

---

 

유저 팔로우 기능을 구현하는데 url을 착각해서 accounts/pk/follow/가 되어야 하는데, accounts/username/follow로 만들었다. 그래서 404 오류를 만나서 1시간 넘게 구글링 하다가 network 보는법을 공부했다...^.ㅠ 그 중 나중에 기억하기 위해 남겨놓는 블로그 링크(https://github.com/Lagom92/TIL/blob/master/web/400%20%EC%97%90%EB%9F%AC%20%ED%95%B4%EA%B2%B0%20%ED%95%98%EA%B8%B0.md )

 

그래서 경로에 넣어주는 값이 문제라는 점을 알게되어 **profile.html**을 다음과 같이 구현했다.

{% extends 'base.html' %}

{% block content %}
  <h1>{{ person.username }}의 프로필 페이지</h1>
  {% with followings=person.followings.all followers=person.followers.all %}
    <div>
      <div id="follow-count">
        팔로잉 : {{ followings|length }} / 팔로워 : {{ followers|length }}
      </div>
      {% if request.user != person %}
        <div>
          <form id="follow-form" data-user-id="{{ person.pk }}" action="{% url 'accounts:follow' person.pk %}" method="POST">
            {% csrf_token %}
            {% if request.user in followers %}
              <button id="followBtn">언팔로우</button>
            {% else %}
              <button id="followBtn">팔로우</button>
            {% endif %}
          </form>
        </div>
      {% endif %}
    </div>
  {% endwith %}
{% endblock %}


{% block script %}
<script>
  const form = document.querySelector('#follow-form')
  const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value
  
  form.addEventListener('submit', function (event) {
    event.preventDefault()
    const userId = event.target.dataset.userId
  
    axios({
      method: 'post',
      url: `http://127.0.0.1:8000/accounts/${userId}/follow/`,
      headers: {'X-CSRFToken': csrftoken},
    })
      .then(response => {
        const isFollowed = response.data.is_followed
        const followersCount = response.data.followers_count
        const followingsCount = response.data.followings_count
        const followBtn = document.querySelector('#followBtn')
        const followCountDiv = document.querySelector('#follow-count')
        
        if (isFollowed === true) {
          followBtn.value = '언팔로우'
        } else {
          followBtn.value = '팔로우'
        }
  
        followCountDiv.innerText = `팔로잉 수: ${followingsCount} / 팔로워 수: ${followersCount}`
      })
      .catch(response => {
        console.log(response);
      })
  })
  

</script>
{% endblock script %}

<리뷰 좋아요 기능 구현>

어려웠던 점

---

위의 유저 팔로우 기능과 같이 404 오류를 만났다...

오랜시간 앞에서 오류를 만나 시간이 많이 흐른 상태라 마음이 급해져서 찬찬히 보지 못했는데 다시 보니 view함수에서 context에 count를 'is_count' 라고 지정해주고

views.py

@require_POST
def like(request, review_pk):
    if request.user.is_authenticated:
        review = get_object_or_404(Review, pk=review_pk)
        user = request.user

        if review.like_users.filter(pk=user.pk).exists():
            review.like_users.remove(user)
            is_liked = False
        else:
            review.like_users.add(user)
            is_liked = True
        context = {
            'is_liked':is_liked,
            'is_count':review.like_users.conunt()
        }
        return JsonResponse(context)
        # return redirect('community:index')
    return redirect('accounts:login')

index.html

{% extends 'base.html' %}

{% block content %}
  <h1>Community</h1>
  <hr>
  {% for review in reviews %}
    <p>작성자 : <a href="{% url 'accounts:profile' review.user.username %}">{{ review.user }}</a></p>
    <p>글 번호: {{ review.pk }}</p>
    <p>글 제목: {{ review.title }}</p>
    <p>영화 제목: {{ review.movie_title }}</p>
    <p>글 내용: {{ review.content }}</p>
    <form class="like-form" action="{% url 'community:like' review.pk %}" method="POST" data-review-id="{{ review.pk }}" class="d-inline">
      {% csrf_token %}
      {% if user in review.like_users.all %}
        <button id="like-{{ review.pk }}">좋아요 취소</button>
      {% else %}
        <button id="like-{{ review.pk }}">좋아요</button>
      {% endif %}
    </form>
    <p id="like-count-{{ review.pk }}">{{ review.like_users.all|length }} 명이 이 글을 좋아합니다.</p>
    <a href="{% url 'community:detail' review.pk %}">[detail]</a>
    <hr>
  {% endfor %}
{% endblock %}


{% block script %}
  <script>
    const forms = document.querySelectorAll('.like-form') 
    const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value

    forms.forEach(form => {
      form.addEventListener('submit', function (event) {
        event.preventDefault()
        const reviewId = event.target.dataset.reviewId
        axios({
          method: 'post',
          url: `http://127.0.0.1:8000/community/${reviewId}/like/`,
          headers: { 'X-CSRFToken': csrftoken },
        })
          .then(response => {
            const likeCount = response.data.is_count
            const isLiked = response.data.is_liked
            const likeButton = document.querySelector(`#like-${reviewId}`)
            const likeCountText = document.querySelector(`#like-count-${reviewId}`)

            if (isLiked === true) {
              likeButton.innerText = '좋아요 취소'
            } else {
              likeButton.innerText = '좋아요'
            }
            likeCountText.innerText = `${likeCount} 명이 이 글을 좋아합니다.`
          })
      })
    })
  </script>
{% endblock script %}

index.html에서는 response.data.like_count라고 적어서였다.

그래서 response.data.is_count로 바꾸어 주었다!

그리고 axios url 링크를 community로 안적고 다른걸 적어주어 경로때문에 계속 오류가 난거였다.

프로젝트를 끝내고 느낀점

---

오늘도 휴먼 에러가 가득한 하루였는데... 그래도 오류를 하나씩 고쳐나가면서 구글링을 통해 배워가는거 같다. axios의 기본 틀과 흐름에 대해 주말에 정리를 한 번 더 해야겠다.