최종 회고

yoon Y·2022년 1월 1일

[3rd_Project] MonthSub

목록 보기

3/11

프론트 깃허브
배포 링크
협업 노션

3~4차 스프린트 구현 기능

1~2차 스프린트 구현 코드 리팩토링
프론트 전체 코드 리팩토링
게시글 좋아요 추가, 취소, 조회 기능 구현
전체적인 스타일 디벨롭

5차 스프린트

발표 자료, 영상 준비

트러블 슈팅

좋아요 기능 구현 시도

처음 기획 (효율적이지 않다고 판단)

로그인 시 좋아요 누른 시리즈 id 리스트를 받는다

좋아요 시리즈 id리스트를 전역상태에 저장한다

좋아요를 할 시 - 서버요청 + 전역상태의 좋아요 시리즈 id리스트에 새로운 id를 추가한다

좋아요 해제를 할 시 - 서버요청 + 전역상태의 좋아요 시리즈 id리스트에 해제할 id를 삭제한다

좋아요 ui를 렌더링 해야할 시 - 시리즈 각각의 id가 전역상태의 좋아요 시리즈 리스트에 포함되는지 여부로 스타일을 한다

api로 받아온 seriesId를 Like컴포넌트의 props으로 넘긴다

Like컴포넌트 내부에서 (전역 상태인) 좋아요 시리즈 id리스트를 불러와 seriesId props가 포함되는지 판단해서 스타일을 적용한다

최종 구현 방법

시리즈 정보 get시(상세,리스트)에 토큰이 보내진다면 그 사용자의 isLike를 상태를 같이 보내준다

좋아요 추가 삭제 api요청 전에 상태를 먼저 변경해준다(낙관적 업데이트)

좋아요의 카운트는 실시간으로 불러오기에 한계가 있다

LikeToggle 컴포넌트에 likeCount를 받아와 상태에 저장 후 토글이 될 때 +,-1을 해주어 낙관적 업데이트를 해준다

로그인 안 되어있을 시 좋아요 버튼이 안보여지게 조건부 렌더링한다

PropsType bool타입 관련 에러

지정한 bool타입으로 사용했는데도 오류가 난다

ImageUpload.propTypes = {
  onChange: PropTypes.func,
  circle: PropTypes.bool,
  buttonName: PropTypes.string,
  src: PropTypes.string,
  name: PropTypes.string,
  wide: PropTypes.bool,
};

<StyledImageUpload
        onChange={handleImageUpload}
        name="thumbnail"
        src={values.thumbnailUrl}
        wide
      />

해결책

숫자로 사용하되 사용시 bool값에 연산자를 붙힌다

ImageUpload.propTypes = {
  onChange: PropTypes.func,
  circle: PropTypes.bool,
  buttonName: PropTypes.string,
  src: PropTypes.string,
  name: PropTypes.string,
  wide: PropTypes.number,
};

<StyledImageUpload
        onChange={handleImageUpload}
        name="thumbnail"
        src={values.thumbnailUrl}
        wide={+true}
      />

회고 질문

힘들었던 점(개발, 협업, 문서화)
- 예상치 못한 버그가 계속 튀어나와서 처리하는데 시간이 많이 들었던 점.
- 처음부터 디자인을 잡고 시작하지 않아 막판에 마크업을 하면서 디자인을 생각하다보니 시행착오가 많아 시간이 많이 걸렸다.
- 시간에 쫒겨 클린코드를 작성하지 못한 점.
- 비교적 기능에 빨리 들어갔다고 생각하는데 그럼에도 마감때까지 여유없이 수정의 수정을 거듭했던 게 좀 지쳤었다.
깨달은 점 혹은 새로 알게된점
- 기능 구현 외에도 예외처리, 오류처리가 중요하다는 것을 느꼈다.
- 발표자료를 준비하면서 아토믹 디자인을 잘 반영하지 못했다는 것을 깨달았다.
- 빨리 빨리 기능을 구현해내는 것보다는 재사용성과 효율성을 고려해가며 코드를 짜는 것이 결국은 더 빠른 방법이라는 것을 알았다. (전자일 때 리팩토링 시간이 더 걸렸음)
처음 목표를 달성했다고 생각하시나요 ?

목표달성도는 개인적으로 85퍼센트라고 생각합니다. 리팩토링할 점도 많고 버그도 완전히 처리하지못했지만 이제 뭐가 부족하고 뭘 개선해나가야하고 뭘 배워야할지 알게되었다는 점에서 만족스러운 프로젝트였습니다!