Sprint 8
22.08.01 ~ 22.08.05
만두피 주기
- 피그마로 Feed UI 디자인 변경 및 검색 시 나오는 UI 고민
- 로그아웃 기능 추가
- refresh token 관련 공부 및 사용법 재정리
- 팔로우 팔로워 modal 동작 오류 해결
- 로딩화면 추가
- (주기) Feed UI 및 검색 결과의 UI를 만들 때 다른 사이트들의 UI를 찾아보면서 UI/UX에 대해 고민할 수 있었다.
- (만두피) JWT토큰과 파일의 구조를 보면서 코드 자체보다 구조적으로 고민할수 있었다.
- (주기) 불러올 댓글이 없어도 계속 빈 배열이 불러와지는 문제가 있었다. 프론트 단에 문제라는 건 알고 있었는데 해결 방법을 며칠 째 찾지 못하고 있었다. 다행히 만두피님에게 이 문제에 대해 얘기했을 때 바로 문제점을 지적해주어서 해결할 수 있었다. post api에서 cursor 부분에 옵셔널 체이닝 연산자를 붙혀 commentId가 없어도 에러가 나지 않도록하여 해결했다.
- (주기) 댓글의 대댓글을 불러올 때 size=10으로 설정하여 10개를 불러오고, 다음 페이지가 있으면 답글 더보기 버튼이 띄워지도록 구현하려고 했다. 하지만 더보기 버튼을 누르기 전까지는 다음페이지가 있는지 확인을 할 수 없어서 더보기 버튼이 띄워지는 문제가 있었다. 이 문제에 대해 PM이 해결 방법을 알려주었다. 대댓글 11개를 불러와서 10개를 띄우고 만약에 마지막 1개가 있으면 다음페이지가 있다고 판단하여 더보기를 띄워주는 것이다. 그리고 cursor는 10번째 인덱스의 commentId 값을 가지게 하면된다.
- (만두피) 팔로우 팔로워 모달창에 들어가는 로직이 매우 골머리를 앓았다 쉽게 가려면 팔로우 팔로워 버튼을 누를떄 API를 다시 불러오면 되지만 이는 UX적으로 보기 안좋기 때문에 이를 해결하고자 하였다 하지만 경우의 수가 많다보니 문제점들이 하나씩 발견이 되었고 그에따라 코드를 2번 바꾸게 되었다 https://github.com/Breaking-Dope/breaking-frontend/pull/168 PS)인스타그램이 어떻게하는지 궁금하다.
- (주기) 이번 스프린트에서 새로운 Feed UI를 디자인했다. 안드로이드 팀의 Feed UI 리뷰했을 때 현재 프론트의 Feed UI가 약간 어색하게 보인다고 생각했다. 인스타그램, 페이스북 같은 SNS의 경우 메인 피드에서 바로 사진과 내용들을 확인할 수가 있기 때문에 메인 피드에서 바로 좋아요를 할 수 있게 두었지만 Breaking의 경우 썸네일과 제목밖에 담고있지 않기 때문에 다르게 가야한다고 생각했다. 또한 이전의 Feed UI는 익명일 때 처리가 애매했었다. 작성자의 닉네임을 담고있지 않았기 때문에 익명일 때와 프로필 사진이 없는 유저를 구분하기 힘들었다. 그래서 다른 사이트의 Feed UI들을 찾아보고 문제점을 개선하여 새로 디자인하였다. 좋아요 및 댓글 개수는 라벨 느낌으로 우측 하단에 두고 상단에는 작성자의 사진과 이름, 장소를 표시했다. 북마크는 더보기 토글에 넣었다. 세로로 조금 길어졌지만 이전의 Feed 보다 답답해보이지 않아 좋다. 다음 스프린트 때 새로운 Feed UI를 적용할 예정이다.
- (만두피) jwt토큰을 검색하면서 사용의미와 한계를 공부해 볼 수 있었다 jwt의 보안적인 문제를 해결하다보면 차라리 쿠키 세션 방법이 쓰는게 낫다라는 생각이 들었다.
- (만두피) 코드량이 점점많아짐에 따라 지금 사용하고있는 구조가 문제가 많다고 생각하였다 코드리뷰를 할때 마다 읽어야 하는 양이 늘고있다보니 리뷰시간도 길어지고 코드의 정체성도 찾기가 힘들었다. 폴더구조를 더 세밀화 하여 리펙토링을 진행하고자 한다. 처음에는 아주 좋아보였던 구조가 코드량이 늘어남에따라 현재는 적용하기 힘든 구조라 생각하였다.
- 폴더 구조
- 폴더 구조 변화로인한 리펙토링
- 새로운 feed UI 적용
- 모든 list에 인피니티 스크롤링적용