22/05/18/수 Vue 응용, 1학기 마지막 프로젝트- API

220517 Today I learned!

• Vue 응요
• 1학기 마지막 프로젝트

---

1. Fact

(1) Vue 응용

• Navigation Guard: 전역가드
• Vuex Module
• Vue Component 구성
• 서버와의 통신을 통한 article, comment, account 구현

(2) 1학기 마지막 프로젝트

• Article게시판 필터 API
  • 인기게시판 (7일이내 인기순)
  • 자유게시판, 영화게시판, 배우 게시판
• ArticleComment API
  • CRUD API
  • 좋아요 API
• User관련 API와 Serializer
  • 회원가입 Serializer 재 정의
  • 프로필 페이지, 회원정보 수정 API
• 프로젝트 깃허브
• 프로젝트 노션

2. Feeling

오늘은 정말 정신이 없었다. 마지막 vue 수업이기 때문에 코드를 따라칠 시간도 없이 진도가 진행되었다. 프로젝트에서 직접 구현해보면서 해당 내용을 학습해야 할 것 같다.

프로젝트는 잘 진행되고 있다. 내일 백엔드를 어느정도 완성하는 것이 목표이다. 오류도 많이 발생하고 Serializer에 머리가 많이 아프지만,…🙃

아쉬운 점

1. 회원정보 수정에서 비밀번호를 수정하지 못했다.
2. 회원 탈퇴를 구현하지 못했다.

3. Finding

너무 과한 모듈화는 하지 말자.

Serializer 오버라이드를 할 때 과한 모듈화는 독이 된다. most likely due to a circular import에러가 계속 발생해서 진행이 더뎌졌는데, Serializer가 계속 오버라이드가 되다보니 서로 참조가 되는 상황이 자연스럽게 발생하게 되어 오류가 계속 발생했다. 그래서 다음과 같이 보기 싫은 코드가 나왔다 😥

from rest_framework import serializers
from movies.serializers.movie import MovieListSerializer
from movies.serializers.movie_review import ProfileMovieReviewSerializer
from articles.serializers.article_comment import ProfileArticleCommentSerializer
from articles.models import Article, ArticleType
from django.contrib.auth import get_user_model
User = get_user_model()

class UserProfileSerializer(serializers.ModelSerializer):
    class ProfileArticleSerializer(serializers.ModelSerializer):
        class ArticleTypeSerializer(serializers.ModelSerializer):
            class Meta:
                model = ArticleType
                fields = ('pk', 'name')
        article_type = ArticleTypeSerializer(read_only=True)
        like_count = serializers.IntegerField(source="like_users.count", read_only=True)

        class Meta:
            model = Article
            fields = ('pk', 'article_type', 'title', 'content', 'created_at', 'article_type','like_count',)
    like_movies = MovieListSerializer(many=True, read_only=True)
    article = ProfileArticleSerializer(many=True, read_only=True)
    comment = ProfileArticleCommentSerializer(many=True, read_only=True)
    review = ProfileMovieReviewSerializer (many=True, read_only=True)
    class Meta:
        model = User
        fields = ('pk', 'nickname', 'region', 'age', 'profile_image','like_movies',  'article',  'comment',  'review',)

하나의 Serailizer에 모듈을 통한 참조와 직접 참조하는 것이 섞인 상황…이다.. 프로젝트 진행할 시간이 촉박해서 따로 수정하지 않고 넘어가지만, 나중는 꼭..!!

다음에는 반복되는 코드가 많더라도, circular import에러방지와 코드의 가독성을 위해 직접참조만 사용하는 방식으로 코드를 작성할 것이다.

DJango에서는 datetime.now()보다는 timezone.now()를 써야 한다.

1주일이내 작성된 글을 필터링 해야하기 때문에 먼저 datetime.now()를 활용하여 현재 시각을 구하려 했다.

now = datetime.now()
    before_one_week = now - timedelta(weeks=1)
    now = now.strftime('%Y-%m-%d')
    since = before_one_week.strftime('%Y-%m-%d')
articles = Article.objects.filter(created_at__range=[since, now])

그런데, warnings.warn("DateTimeField %s received a naive datetime (%s)라는 경고가 터미널창에 뜨는 것을 확인할 수 있었다. 참고블로그

datetime 객체의 종류는 크게 Navie 객체(timezone 정보를 포함하지 않는 datetime)와 Aware 객체(timezone 정보를 포함하는 datetime)가 있다.

현재 Settings.py에서 Use_TZ=True로 설정을 했기문에 Aware datetime 객체를 사용하게 되는데, 현재 시간을 구하기 위해 사용한 datetime.now()는 Navie datetime 객체이다.

즉, 이 둘의 차이 때문에 경고를 하는 것이다. 호환성을 위해 Naive datetime 객체를 사용해도 Awatr datetime 객체로 변환하지만 다른 문제가 발생할 여지가 있기 때문에 경고를 띄워준다.

# 해결 방안: timezone.now()활용
now = timezone.now()
articles = Article.objects.filter(created_at__range=[now-timedelta(days=6), now])

annotate를 활용하여 새로운 필드를 만들고 이를 이용하여 정렬을 할 수 있다.

좋아요가 많은 순서에 따라 데이터를 정렬을 해야 했다. 하지만 model에는 좋아요를 한 사람들에 대한 정보는 있지만 숫자를 기록하는 필드가 지정되지는 않았다.

그래서 annotate를 통해 새로운 필드를 생성하고 이를 통해 좋아요가 많은 순서로 정렬을 할 수 있었다.

# 최근 1주일 게시글, 좋아요 순으로 나열
    articles = Article.objects.filter(
        created_at__range=[now-timedelta(days=6), now]
    ).annotate(
        like_count=Count('like_users', distinct=True)
    ).order_by('-like_count')

4. Future Action & Feedback

Future Action	진행 상황	Feedback
DOM을 깨우치다	pause 🤦‍♀️	잠시 중단!
why 리액트?	Not Start🌙