'블렉스 이야기' 시리즈BLEX 2021 5월 개발노트

🔨 개선된 항목

💬 다크모드
  • 시스템 테마로 변경되던 사이트 테마를 직접 변경할 수 있도록 다크모드 토글 재추가

추후 다양한 테마를 추가하려고 봤더니 현재 구조로는 어려움이 많아서 변경중에 있습니다. 처음 방문한 유저인 경우에는 이전과 동일하게 시스템 설정을 따라가도록 하였습니다.

💬 사이트
  • 디자인 상당수 수정
  • 뒤로가기시 스크롤이 유지되지 않던 버그 수정
💬 글작성 > PNG to JPG
  • PNG 이미지 업로드시 JPG로 변경

용량 절약을 위함이며 위와같은 이유로 PNG 이미지를 업로드하는 경우 이미지가 열화될 수 있으며 투명 배경화면이 적용되지 않습니다.

💬 프로필 > 포스트
  • 페이지 링크 변경
    • 기존 : @baealex/posts/프로그래밍
    • 변경 : @baealex/posts?tag=프로그래밍
  • 카테고리 정렬 기능 추가

💬 설정 > 분석
  • 조회수 추이 그래프 하단에 총 조회수 추가
  • 신규 유입경로 개선 및 링크에 대한 상세 정보 제공

💻 월간회고

이번 달에 가장 중점을 둔 부분은 리팩토링이다. 사실 전체적인 코드 리팩토링은 점진적으로 진행하고 있으나 시급하게 리팩토링이 필요하다고 느꼈던 부분은 아래와 같다.

  • 스타일시트 관리 개선
    • 디자인 변경시 시간을 지체시킴
  • 프론트엔드 API 관련 코드 개선
    • API 재활용이 어려움
스타일시트 관리 개선

스타일시트는 필자가 개인 블로그를 운영하던 시절부터 만들었던 파일이 계속해서 넘어 온 것이라 사용하지 않는 스타일이 종종 보이고 한 파일에 몰려있으니 구분하기가 만만치 않다. 앞으로도 계속 CSS in CSS 형식으로 개발을 할 예정이지만 좀 더 효율적으로 스타일시트를 관리할 필요가 있다. 현재는 CSS moduleclassNames를 이용하여 개선중에 있다.

API 관련 코드 개선

프론트엔드에서 응답 데이터에 미리 타입을 선언해 두고자 하였는데 어떤 API는 오브젝트로 어떤 API 스트링으로 응답을 반환하고 있어서 통합이 불가능 했다. 그래서 우선 백엔드의 응답을 통일시켰다. 응답에 타입이 명시되니 API를 호출한 순간부터 타입을 알게되어 다양한 페이지에서 재활용이 쉬워진 것 같다.

다음달에는

백엔드의 코드를 좀 더 구조적으로 분리하고 ORM 쿼리 최적화를 진행중이다. 아마 다음달에도 계속 진행되지 않을까 싶다. 그간에는 정말 아무생각 없이 쿼리를 작성하고 있었기에 10개 가량의 댓글을 요청하는데 60개 가량의 질의가 발생했다 😅 다시금 장고의 문서를 읽어보면서 작업중이다.

개선전

comments = Comment.objects.filter(post=post).order_by('created_date')

return StatusDone({
    'comments': list(map(lambda comment: {
        'pk': comment.pk,
        'is_edited': comment.edited,
        'text_html': comment.get_text_html(),
        'time_since': timesince(comment.created_date),
        'total_likes': comment.total_likes(),
        'is_liked': comment.likes.filter(id=request.user.id).exists(),
    }, comments))
})

개선후

comments = Comment.objects.select_related(
    'author',
    'author__profile'
).annotate(
    total_likes=Count('likes'),
    is_liked=Case(
        When(
            Exists(
                Comment.objects.filter(
                    id=OuterRef('id'),
                    likes__id=request.user.id
                )
            ),
            then=Value(True)
        ),
        default=Value(False),
    )
).filter(post__url=url).order_by('created_date')

return StatusDone({
    'comments': list(map(lambda comment: {
        'pk': comment.pk,
        'author': comment.author_username(),
        'author_image': comment.author_thumbnail(),
        'is_edited': comment.edited,
        'text_html': comment.get_text_html(),
        'time_since': timesince(comment.created_date),
        'total_likes': comment.total_likes,
        'is_liked': comment.is_liked,
    }, comments))
})

조금만 관심을 기울였다면, 초반에 좀 더 잘 만들었다면 좋았겠지만 지금이라도 개선해야 하는 이유를 깨닫게 되어서 감사하다. 결과적으로는 현재는 3개의 질의만 발생하고 있다. 다른 것들도 빨리 개선하고 싶다.

🎸 기타

'블렉스 이야기' 시리즈

블렉스는 제가 애정을 가지고 개발하는 하나의 취미이자 한명의 자식(?)이며 처음으로 서비스를 시작한 프로젝트입니다. 혼자서 풀사이클 개발을 하다보니 부족한 점이 많을 수 있지만 부족한 점은 채워나가면 된다고 생각합니다. 이곳은 블렉스의 부족한 점을 채워나가는 모습을 그려놓은 시리즈입니다.
baealex
0분전
작성된 댓글이 없습니다. 첫 댓글을 달아보세요!
    댓글을 작성하기 위해 로그인이 필요합니다.