[항해99] MIL D+92 (4주차)

실전 프로젝트 4주차(09/16 ~ 09/22)

동료 피드백 파티

• 만약 꼼꼼하게 코딩을 하지않은 개발자가 있다면 이 파티에 간다.
• 근데 사실 꼼꼼하게 안하지는 않았다..
• 9/16, 9/17 백엔드, 디자이너, 기획자님께 전반적인 피드백을 받았다..
• 단지 그 목록들은 이 글의 맨마지막에 작성하겠다..

동료 피드백이후 느낀점

• 사실 의외로 느낀점은 처음부터 완벽은 없다 이다.
• 우리가 버그를 안 발견하려 한것도 아니었고 계속해서 프론트작업을 하고 있었다.
• 이와중에 정말 꼼꼼하게 버그없이 디자인적으로 완벽하게 제품을 낸다? 이건 효율이 떨어진다.
• 이번에 느낀것은 적절한 시기에 빠르게 다른 사람들에게 피드백을 꼭!꼭!꼭! 받아야 한다는 점이다.
• 생각지도 못한 피드백들이 나왔다.

지옥에서 돌아온 무한스크롤

• 무한스크롤이 다시 돌아왔다.
• 기술부채가 이런걸까?..
• 나는 이 기간 무한스크롤을 쉽게 놔준것을 후회하고 다시 제대로 공부하였다.
• lodash 라이브러리의 throttle을 이용하여 동일 이벤트가 반복적으로 시행되는 경우, 이벤트의 실제 반복 주기와 상관 없이 임의로 설정한 일정 시간 간격으로 실행하게 하여 함수호출의 빈도를 감소시켰다.
• 서버로부터 더이상 데이터가 없으면 last라는 값을 받아서 무한스크롤을 멈출 수 있게 했다.
• 서버로 부터 데이터를 요청하는 함수는 useCallback을 사용했는데
  • 이유는 해당 스크롤 이벤트 자체가 상위 컴포넌트의 '값 변동(스크롤을 내림으로 값이 추가됨)'으로 인해 여러번 불러와지게 되는데 그 것을 최초 1번만 불러와서 변동사항 없으면 계속 쓰기 위함이다.
• Spinner를 달아서 loading중임을 유저에게 보여줄 수 있게 했다.

중간 MVP 발표 이후

• 이후 우리의 목표는
  • PWA완성
  • web vital 수치개선
  • 카카오맵 api
  • 리프레쉬 토큰
  • redux 코드 async & modules 나누기
  • 비동기 에러처리
• 였다.

PWA

• pwa가 프로젝트 초반부터 아픈 손가락이였다.
• 계속해야하는데 해야하는데 하다가 이제야 시도하게되었다.
• 기존에 예전 맛보기 방식에서는 잘 안됐었는데 꼼꼼하게 해보니까 의외로 금방됐다..
• 우선 public폴더에 servicworker와 manifest.json을 만들어주고
• 각 아이콘 이미지들도 설정해준다.
• 이걸 index.html에 코드적으로 삽입해주고
• 추가로 우리는 pwa install버튼을 만들거기에 install 라이브러리도 설치했으며
• offline 페이지 또한 만들었다.

카카오맵 api

• 드디어 우리가 바라던 카카오 api를 구현하게 되었는데
• 사실 백엔드 리더님께서 주신 html 코드를 리액트로 바꾸면 되는 것이었다.
• 그게 쉽다고는 할 수 없었지만 그래도 나름 html을 전에 다루기도 했고 카카오맵api도 좀 했었어서 비교적 빠른 시일내에 구현해낼 수 있었다.
• 문제가 되는 사항은 우리의 서비스는 근처의 다른 유저들을 그려야했기에 카카오맵 api이외에 자체적인 api가 두개 필요했다는 점이다.
  • 하나는 유저자신의 위치를 서버로 전달하는 api
  • 이후 서버에서는 그 위치를 기반으로 그 주변의 유저들의 정보를 만든다.
  • 그러면 다시 프론트에서 서버에게 자신주변의 유저들의 정보를 배열로 달라고 요청하고
  • 그 배열을 토대로 카카오맵에 그린다.
• 이 비동기 순서를 지키기 위해 나는 redux의 reducers를 사용해서 전역상태를 만들어 체크하고 체크되면 다음 비동기함수를 실행하는걸로 해결했는데 이 부분은 너무 아쉽다..
• 더 좋은 방법이 있는게 분명한데 다음에는 좀 더 정제된 좋은 방법으로 구현하고 싶다.

이제는 실제 배포

• 이제는 실제로 유저들에게 배포해서 피드백을 받을 시간이 왔다
• 프론트 멸망의 날2 D-1

피드백 목록 (바로 아래에 더보기토글 있어요!)

• 게시글 작성시 기본이미지가 호박머리(준수) O
• 상세페이지에서 좋아요 누를 수 있게 하기(수정) O
• 회원가입, 로그인 창에서 알림토글 안보이게(수정) O
• 디테일 페이지에서 자신이 아니면 점 세개 안보이게 하기(준수) O
• 글자수 제한 기능 만들기(업로드 시)(input에 max Length)(준수) O → 더 유저 친화적으로 만들어야함
• hotPosts에서 누르면 걔네의 상세페이지로 갈 수 있게 하기(준수) → hotPosts get할시에 userId받아오기 → api 수정시 완료 O
• 댓글 달았을때 바로 보이게 하기(준수) → 댓글 작성 API에서 댓글 작성과 댓글조회가 같은 양식으로 나올 수 있게 해야함 → 댓글 새로고침을 그 리스트 부분만 할 수 있는지(전체말고) → api 수정시 완료 O
• 무신사 선택시 선택된거 알 수 있게 색깔을 넣는다던지 알려줘야함(준수) O
• 무신사 다 선택하면 다시 사진창으로 가는 버튼 만들기(완료버튼)(준수) O
• 무신사 선택시 뺄수 있는 기능(준수) O
• 프로필 수정시 반드시 닉네임을 바꿔야 하는 부분(수정) O ⇒ 닉네임 변경하기 버튼을 새로 만들어 변경하고 싶을 때만 변경할 수 있도록 처리
• 댓글에서 누르면 그 댓글이 다 보이게 만들기, 대댓글 포함(준수) -ㅅ
• 다른 유저 이름이나 동그란 이미지 누르면 그사람 옷장으로 갈 수있게 하기(준수) O
• 검색창에서 작성자로 검색하기 누르면 자동으로 제목으로 검색하기로 바뀌어요! 작성자검색이 안 됨(수정) ⇒ O
• 대표게시물 지정 눌렀을 때 뭔가 반응이 있으면 좋을 것 같다(준수) O
• 프로필 수정창에서 성별 남자 여자로 변경(수정) O
• 로그아웃이 안 되는 이슈(수정) ⇒O → confirm에서 그냥 alert 띄우는 것으로 수정해서 해결
• 작성자 검색 대표게시물 있으면 잘 됩니다. 대표게시물 없는 경우 처리가 필요하다. (수정) O ⇒ 검색 결과창에서 대표게시물이 없으니 다시 검색해달라는 문구 작성
• 댓글부분 1분이상 지나도 방금전 으로 뜨는 부분(준수) → 요청후 응답이 방금전에서 변하지 않음 → 해결 O
• 알림페이지에서 문구를 줄임 (전에는 세줄로 뜸) O
• 다른 사람의 댓글 수정&삭제 안보이게 하기(수정) O 대댓글까지 완 → 준수(제)가 했었나요?… 기억이 안납니다.. ㅜ 일단 저도 했어요 →제 이름으로 되어 있길래…제가 했는데…그랬군요…ㅎㅎㅎㅎ
• !!!!!!! 게시물 출력 with 좋아요 페이지와 메인페이지 옷장페이지 !!!!!!!!! 새로고침눌러야만 적용되는 이슈 (준수) O → 굴욕적인 성능저하로 해결 → 꼭 다시 다른 방법으로 해결해야함
• 무디로 변경한적이 없는데 유저정보창 무디로 바뀌는 부분(수정) ⇒확인중 → async await을 이용한 비동기 요청으로 유저 정보가 들어왔을 때 아이콘을 띄워주도록 변경 //새로고침시 → 새로고침 막는 것으로….임시방편……….
• 무디아이콘 옆에 등급표시도 같이 없어짐(수정) ⇒ 확인중 → async await을 이용한 비동기 요청으로 유저 정보가 들어왔을 때 아이콘을 띄워주도록 변경 //새로고침시→ 새로고침 막는 것으로….임시방편……….
• 네비게이션 바 하트로 통일하기(수정) O….→하트가 흐려지는 현상발생ㅜㅜ 준수님 Help!!! → 우리 merge하고 확인해봐요 →감사합니다!!
• 디테일페이지에서 좋아요 버튼과 좋아요 개수를 사진 밑으로 내리기 (수정) )O
• 작성자로 검색선택후 검색물을 타이핑하면 제목으로 검색하기로 바뀌는 이슈 & 새로고침시에만 적용되는 이슈(URL은 작성자로 기능상은 괜찮)(수정) O → keyword가 바뀔 경우 재렌더링하도록 수정/렌더링시 URL에 있는 sort값으로 작성자 검색일 경우 작성자에 체크되어 있도록 수정
• 알림창에서 문구를 누르면 관련 게시물로 이동하게(수정) O →postId가 -1이 아닐 경우만 이동가능
• 마이페이지에서 대표게시물 클릭했을때 대표게시물 상세페이지로 갈 수 있게(수정) O
• 댓글 삭제시 알럿창 뜨게 하기(준수) O
• 댓글 수정했을때도 바로 반영할 수 있게(준수) O → 시간없어서 야매로… post or patch시 변경할 수 있는 방법으로 해야함
• 댓글 창에서 프로필이미지눌렀을때 옷장페이지로 갈 수 있게(준수) O

09/19 디자이너님 피드백

• 마이페이지
  • mood Point 물음표 오른쪽 맨 아래쪽으로 O
  • 닉네임 컬러 #2D273F 로 변경 O
  • my closet 위치 정가운데로 O
• 검색페이지에서 선택부분을 네모 체크박스로 O
• 검색페이지에서 폰트 맞춰서 O
• 아이콘 알람 컬러 뒤로가기 컬러 등 전체적인 아이콘 컬러 맞춰주세요
  • 푸터 부분들도 조금 차이가 있고
  • 검색 부분의 색깔도 차이가 있고 헤더에 있는 아이콘들도 차이가 있음
• 메인페이지에 mycloset의 폰트를 변경 O
• 메인페이지와 로그인 페이지에서 뒤로가기 부분이 없었으면 O→ 로그인, 회원가입 페이지에서만 제거
• 검색페이지에서는 헤더에서 mood catcher → search로 변경되도록 O
• 메인페이지에서의 디자인 수정 O
• 내비게이션 바에서 클릭시 그 부분 위쪽에 검정색 부분 생겼으면 O
• 사진에 있는 그림자들은 모두 제거 되었으면 O

---

9/22 10시 회의 피드백

• 비밀번호 찾기 버튼 와이어프레임처럼 수정하기 O
• 비밀번호를 다르게 입력하고 로그인했을 경우 로그인이 되는 이슈 O
  • 암호화하는 방식을 다르게 하여 해결 O
• 마이페이지(수정)
  • 알림버튼이랑 환경설정버튼 위치가 다름 → 두 개의 위치를 같게 수정할 것
  • mood point, catch grade 폰트 → 좀 더 얇게 O
  • 마이 페이지에서 옷장이 비어있을 때 글자가 하나 내려가는 현상 O
  • 마이페이지에서 프로그래스바 → 위로 올려주세요 캐릭터 위치에 맞춰서 O
    • 글씨 왼쪽 정렬 O
  • 마이페이지에서 물음표도 있고 숫자를 눌렀을 때도 이동할 수 있게 O
    • 크기를 조금 더 줄이고 숫자와 끝선에 맞춰서 오른쪽으로 O
  • 마이페이지에서 이모티콘과 닉네임이 센터에 맞춰졌으면 좋겠습니다
  • 마이페이지에서 휴대폰으로 봤을 때 마이클로젯 부분이 맞지 않음
• 헤더의 글씨를 중앙으로 맞추기(
• 서치페이지에서 한 글자 내려오는 문제 (수정) O
• 수정페이지에서 줄을 흰색이나 회색으로 줄을 맞추기 O(수정)
  • 닉네임 수정에서 그림자를 인풋박스에도 O
• 알림페이지에서도 깨지는 현장(수정) O
• 헤더의 뒤로 가기 버튼의 컬러를 맞췄으면 좋겠습니다.(수정)
• upload에서 사진기 모양 조금 줄이기 (준수)
• 좋아요 페이지의 업로드시간이나 양식을 메인페이지의 대표게시물에 맞추기(준수)
• 대표게시물이 없을때 누르면 대표게시물을 지정할 수 있게 설계하기(준수)
• 기기마다 스크롤이 달라지는 이슈(준수)
• 기기마다 폭이 줄어드는 이슈(준수)
• 대표게시물을 눌렀을 때 나의 옷장이 안뜨는 이슈(준수)
• 댓글창이 배율에 맞추어서 닫기 버튼이 안보이는 이슈(준수)
• 상세페이지에서 좋아요 상태가 유지 안되는 이슈(수정)
• 아이폰에서는 앱 다운받기를 해도 안되는 이슈(준수)
  • 사파리에서는 홈화면에 추가가 있고 → 대부분
  • 크롬에서는 그마저도 없음
• 로그인시 다른 비밀번호를 쳐도 로그인이 되는 이슈 O
  • 로그인시 패스워드가 똑같은 번호로 가는 상황 → 암호화하는 방식 다르게 해서 해결!
• 카카오맵 페이지(준수)
• 명예의 전당 페이지(수정)