오늘 점심 : 곰바로 곰탕
오늘 목표 :
FE
메인 페이지 태그 추가시 state초기화 안되는 버그 수정
BE
ERD 업데이트
POST, FOLLOW, POST_LIKE 테이블에 is_deleted 칼럼 추가
TYPE의 type → tag로 변경
MODEL의 mode → tag로 변경
api 리드미 문서작업
모든 자기가 구현한 기능 테스트코드
- repository 테스트 코드
좋아요 최적화?
발표 시나리오
안녕하세요 2조 카북 팀의 발표를 시작하겠습니다.
저희 프로젝트의 프론트엔드는 김은아, 정동환 님이, 백엔드는 임수민, 이재훈, 최주형 님이 담당했습니다.
- 프로젝트 이름은 “카북”으로, 차를 사랑하는 사람들이 친구들과 자신의 멋진 차량 사진을 공유할 수 있는 SNS 입니다.
- 사용자는 차 모델과 종류를 입력하고 자신이 원하는 해시태그를 차량 사진과 함께 게시물을 올릴 수 있으며, 다른 사용자는 자신이 원하는 해시태그를 검색하여 필터링 되어진 차 사진을 볼 수 있습니다.
벡엔드의 기술적 도전 내용으로는,
BE
- 1번째로 AWS S3를 이미지 저장소로 사용하고 있습니다.
- 글을 등록하거나 수정할 때, 프론트에서 넘겨주는 이미지 파일을 백엔드에서 s3와의 연동을 통해 업로드하고, 또한 프론트에서 s3 이미지를 백엔드를 거치지 않고 이용하는 경우를 위해 s3의 cors 설정을 해주었습니다.
- 2번째로 무한 스크롤 기능입니다. 현재 백엔드에서는 무한 스크롤을 구현하기 위해 offset을 사용한 페이지네이션을 사용하고 있습니다.
- 하지만 이 방식을 사용하면, 추가로 글이 생성되면 글이 중복되어 보일 수 있고, 글이 삭제되었을 때는 사용자가 보지 못하는 글들이 생길 수 있습니다. offset을 사용하면 백엔드에서는 현재 사용자가 어떤 게시글까지 봤는지 알 수 있는 방법이 없기 때문입니다.
- 이러한 문제점을 개선하기 위해, 벡엔드가 응답을 보낼 때 가장 마지막으로 조회한 게시글 id를 넘겨주고, 프론트에서 다음으로 요청을 보낼 때 응답 받은 게시글 id를 보내어, 글이 중복되거나 사용자가 보지 못하는 페이지가 없도록 수정 중입니다.
- 3번째로 좋아요 기능 최적화입니다. (ERD) 기존의 방식에서는 좋아요 테이블을 만든 뒤, 매 게시물마다 좋아요 테이블에서의 count를 통해 좋아요 수를 도출하였습니다. 그러나 sns의 특성 상 유저가 많아질수록 게시물 또한 많아지며, 이러한 방식은 성능적 저하를 발생할 수 있다고 느꼈습니다.
- 이에 따라 반정규화를 통해 좋아요 수를 게시글 테이블에 추가하기로 결정하였습니다. 이 경우 좋아요 Table을 거칠 필요 없이 게시글 table만으로 좋아요 수를 알 수 있기에 성능 개선이 가능합니다.
- 그러나 반정규화를 한다면 동기화 문제가 발생됩니다. 다중 유저가 동시에 좋아요를 누를 때, 데이터 정합성에서 문제가 발생가능하기 때문입니다. 이에 대한 해결책으로 조회에 lock을 건다던가, select와 update를 분리하지 않고 한번에 하는 방식이 있지만, 성능적으로 좋지 않습니다. 따라서 평소에는 데이터 정합성을 맞추지 않고, 주기적으로 정합성이 맞도록 update하는 스케쥴러 방식을 선택하였습니다.
- Repository test in-memory h2 db로 테스트 중
- 마지막으로 또한 저희는 각 기능의 테스트 코드 작성에 많은 노력을 했습니다. 컨트롤러, 서비스, 리포지토리 단 각각의 테스트 코드를 mock 라이브러리를 사용해 작성하였고, 특히 리포지토리단 테스트는 실제 mysql db를 사용하지 않고 테스트용 인메모리 DB를 통해 빠르게 테스트하고 있습니다.
- 현재 테스트 커버리지가 클래스 기준으로 87%가
프론트엔드의 기술적 도전내용은 정동환님이 이어서 발표하겠습니다.
FE
- 컴포넌트 구조를 사용하여 코드 재사용성을 높이고 뷰를 조직적으로 관리하였다.
- 메인 페이지 observer api를 이용하여 데이터를 한번에 받아오지 않고 제일 마지막 요소를 관찰할 시 부분적인 데이터를 불러와 렌더링을 최적화 하였다.
- 무한 스크롤 시 새로 불러오는 데이터에 대해서만 렌더링 하도록 처리하여 렌더링 속도를 높였다.
- redux라이브러리를 이용하지 않고 직접 구현하여 전역적으로 관리되어야 하는 데이터의 변경에 따른 렌더링을 최적화 하였다.
동작 데모
- 메인페이지(비로그인)
- 태그 검색
- 맑 > 맑음
- 태그 없애지마
- 아이오닉 > 무한스크롤
- 다른곳 로그인 해야 들어갈 수 있음
- 회원가입
- 로그인 (새로고침 한번 하고
- 메인페이지(로그인)
- 프로필페이지
- 내 게시물
- 내 게시물 누르지마
- 팔로워 목록
- 팔로워 삭제 되는데 숫자 안바뀜
- 팔로잉 목록
- 되는데 숫자 안바뀜
- 회원정보 변경
- 로그아웃
- 타인 프로필 페이지 보여주고
- 다른거 누르지 말고 나와(뒤로가기)
- 글 작성 페이지
- 작성하는 모습 보여주기
- 프로필 가서 생긴 모습 보여주기
- 글 상세 페이지
- 수소/전기차 눌러야 수정할수있음
- 글 수정 페이지
- 태그 누르면 삭제도됨
팀 활동 내용
- 저희 팀은 팀 활동의 대부분을 노션에 기록하고 있으며 매일 돌아가면서 회의록을 기록하고 있습니다. 아침마다 스크럼 진행하고 스크럼에서 점심메뉴를 정하고 오늘 할 일을 정합니다. (2/6, 2/9)