포트폴리오 기록 사이트, Graphy
현재 테커에서 진행하고 있는 팀프로젝트인 Graphy의 POC 기능 개발을 마치고, 중간 점검 겸 각 팀 프로젝트의 진행 상황을 공유하는 '테커인의 낮' 행사가 있었다. 그때 공유했던 내용을 블로그에 기록하려고 한다.
Graphy에 대하여 간단하게 말하자면, 개발자가 완성했던 프로젝트를 사용했던 기술 스택 태그와 함께 소개하고, 간단하게 기록 및 공유하는 플랫폼 서비스이다.
Backend Issue - 댓글 API 개선
백엔드 개발에서는 댓글 관련하여 꽤나 긴 여정을 보냈었다.
우리는 위처럼 댓글과 답글이 있는 형식의 댓글 기능을 원했고, 삭제 같은 경우에도 답글은 삭제 시에 화면에서 보이지 않게 하고, 댓글 같은 경우에는 삭제해도, 저렇게 "삭제된 댓글입니다" 라고 보이길 원했다.
문제
따라서 처음에 설계한 로직은 아래와 같다.
사실 딱 봐도 너무 복잡하고, 효율이 떨어질 것 같은 로직이다.
다중 if문까지 사용해가며 구현해보았지만, 서버에 부담이 될 수도 있고, 응답 속도 저하가 우려되어 백엔드는 상의 하에 개선하기로 결정했다.
해결 방법
- 댓글과 답글 모두
삭제된 댓글입니다로 표시하도록 결정 - soft delete 후에 데이터 유지를 위해서 DB 내의 댓글, 답글의 내용은 유지했어야 했다
->삭제된 댓글입니다으로 마스킹하는 것을 서버 내 로직이 아닌, 조회시 쿼리문을 이용해 삭제된 댓글을 마스킹하는 것으로 해결
결론
서버 내에서 처리했던 로직을 최대한 쿼리문으로 처리하도록 변경했다
문제
현재 글 하나의 댓글을 조회할 때 댓글과, 답글 모두 한 번에 조회하는 방식은 괜찮은가?
해결 방법
우리 모두의 친구 Youtube 의 댓글을 참고하여 댓글만 먼저 조회하고, 사용자가 클릭 시에 답글을 pagination을 적용해 조회하는 것으로 결정하였다.
결과적으로는 위와 같은 개선 결과를 얻을 수 있었다!
Frontend Issue - Quill 에디터 이미지 처리
우리 프로젝트 특성상, 텍스트 에디터가 필요했고, Quill 에디터를 선택하게 되었다.
문제
직접 사용해본 결과, 이미지를 넣은 글의 포스팅 속도가 오래 걸린다는 것을 알 수 있었다.
- 기존 방식의 문제: 프론트에서 이미지를 서버로 넘기고, 그 이미지를 S3로 업로드 하는 방식
- Quill의 이미지 파일 인코딩: BASE64 특성으로 인해, 33%의 용량 증가가 발생하여, 긴 문자열을 다시 이미지로 표현할 때 오랜 시간 소요
해결 방법
따라서, 이미지 처리 방식을 아래와 같이 변경하였다.
결론적으로는 아래와 같은 로딩 시간 개선을 얻을 수 있었다.
