Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

카테고리 즐겨찾기에 대한 낙관적 업데이트 구현 #633

Merged
merged 1 commit into from
Sep 19, 2023

Conversation

inyeong-kang
Copy link
Member

🔥 연관 이슈

close: #563

📝 작업 요약

  • 카테고리 즐겨찾기에 대한 낙관적 업데이트를 구현하였습니다.

⏰ 소요 시간

  • 8시간

🔎 작업 상세 설명

  • fast 3g, slow 3g 환경에서도 UI 먼저 수정하도록 하되, 서버와의 통신에서 실패가 일어나면 이전 상태로 롤백하도록 하였습니다.

votogether_category_optimistic

  • 투표 수정에 대한 낙관적 업데이트 역시 시도했지만, 사용성 면에서 큰 의미가 없다고 판단하여 삭제하였습니다,,
    (데일리에서 논의했듯, 선택지에서 1명(100%) 같은 정보는 서버 응답으로 제공하는 것입니다. 따라서 이런 수학적인 부분까지 낙관적 업데이트를 하고자 한다면, 이를 프론트가 미리 계산하기 위한 로직을 별도로 작성해야 합니다. 또한 1명(100%) 같은 정보를 제외하고, 그저 선택했는지 border 색깔만 바꿔서 보여준다면.. 결국 1명(100%) 정보는 나중에 볼 수 있으므로, 사용성 면에서 당황스럽고 불편할 수 있다고 생각합니다.
    이러한 이유로 투표 선택지 수정에 대한 낙관적 업데이트는 진행하지 않았습니다😂)
    image

🌟 논의 사항

  • 데일리에서 논의함.

@github-actions
Copy link

⚡️ Lighthouse report!

Category Score
🔴 Performance 49
🟠 Accessibilty 88
🟠 SEO 85
🟠 PWA 89
Category Score
🟢 First Contentful Paint 0.7 s
🔴 Largest Contentful Paint 4.9 s
🔴 Total Blocking Time 3,180 ms
🟢 Cumulative Layout Shift 0
🟠 Speed Index 5.1 s

Copy link
Collaborator

@chsua chsua left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

낙관적 업데이트를 사용하는 곳이 없었는데
사용해볼 수 있어서 참 좋아요!
모든 곳에 일괄적으로 적용하는 것이 아닌 필요성에 따라 부분적으로 적용했다는 점도 좋아요!
고생하셨습니다!!

fe-리뷰완

},
onError: error => {
onError: (error, _, rollback) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍👍👍

Copy link
Collaborator

@Gilpop8663 Gilpop8663 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

카테고리 즐겨찾기 낙관적 업데이트가 되어서 무척 좋아요 👍👍👍

fe-리뷰완

);
queryClient.setQueryData(queryKey, updatedCategoryList);

return () => queryClient.setQueryData(queryKey, oldCategoryList);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

마지막에 return () => 해주는 것은 무엇을 뜻하나요?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

onError의 rollback() 으로 쓰일 콜백함수를 지칭합니다~!

@inyeong-kang inyeong-kang merged commit 854ea80 into dev Sep 19, 2023
2 checks passed
@inyeong-kang inyeong-kang deleted the feat/#563 branch September 19, 2023 05:52
chsua added a commit that referenced this pull request Sep 19, 2023
* design: (#541) 글쓰기 페이지 오른쪽 패딩 적용 및 헤더 글씨 크기 조정

- grid 속성 설정 + 내부 자식 width: 100% 설정
- 헤더 내 취소/제출 버튼을 헤더 글씨 버튼 컴포넌트로 수정(다른 헤더와 통일성 위해)

* design: (#482)  safari에서 글 쓸때 확대되어서 보이는 오류 수정

- 원인: 사파리에서는 input, textArea의 폰트 크기가 16px 미만이면 자동 zoom이 됨

* fix: (#482) 사파리에서 날짜가 nan뜨는 오류 수정

+ 현재와 30일 이상 차이나는 날짜는 "yyyy-mm-dd"형식 문자열로 그려지게 수정

* test: 날짜문자열과 현재 시간을 비교하여 문자열을 출력하는 유틸 함수 테스트 코드 작성

* design: (#541) 작성된 게시글 속 사진 가로 길이 80%으로 수정

* feat: 게시글 마감 제한 시간 정책변경에 따라 3일 -> 14일로 수정

- 공통된 Time interface type폴더로 이동 및 적용
- 마감 제한 시간 상수화
- 마감일자 optionList 형태 변경

* feat: 본문 내용에 연속되는 개행은 1회 개행으로 처리되도록 수정

* test: 연속된 개행을 1회 개행으로 수정하는 유틸함수 테스트

* test: 마감시간 버튼용 배열 변경에 따른 테스트 코드 수정

* fix: 선택된 time 객체 확인을 위해 비교하는 로직을 깊은 비교로 수정

* fix: 최대 마감일자 버튼 클릭 후 사용자 지정 클릭시 잘못된 ui가 출력되는 오류 수정

* fix: (#280) 선택지에 사진 등록/삭제 후 동일한 사진 올릴시 안올라가는 버그 수정

* refactor: 사용하지 않는 함수 삭제 및 시간 유효성 검사 함수 분리

* fix: 마감 최대 시간(14일)인 경우 마감시간 유효성 검사에 걸리지 않도록 수정

* fix: (#280) 선택지에 사진 등록/삭제 후 동일한 사진 올라가지 않는 오류 수정

- 누락된 파일 커밋

* feat: 글 등록/수정 api 수정에 따라 formData 형식 수정

* feat: (#541) imageUrl 앞 도메인 삭제

- 기존: 받은 imageUrl에 http-를 붙여야 image가 보여짐. 반대로 http-를 떼서 수정 api를 보내야 함
- 수정: 서버에서 보내주는 url 그대로 받아서 image를 보이고 수정 api를 보냄

* feat: 수정인 경우 수정 api 통신에 optionId를 함께 보내도록 수정

* refactor: 테스트 파일명 컨벤션에 따라 테스트 함수 이름으로 수정하기

* feat: 개행 5번 이상 연속되면 5번 개행으로 고정하도록 수정

* feat: 개행이 가능한 textarea의 value는 5회이상 연속개행을 검열하여 통신

- 코멘트, 선택지 내용 추가

* refactor: 마감시간 유효성 검사코드 중 변수를 선언하여 가독성 향상

* refactor: 글 작성/수정데이터 유효성 검사 type 체크 강화

* refactor: contentInputRefList 의 type중 null 제거

* test: 개행 검열 유틸함수 변경에 따른 테스트 코드 수정

* fix: (#541) 기존 작성한 선택지인 경우 id를 보내고, 아니면 보내지 않도록 수정

* test: 선택지 훅 수정에 따른 테스트 코드 수정

* fix: 선택지 훅에서 isServerId가 무조건 true인 오류 수정

* 로그인, 투표 통계, 회원정보 페이지 lazy import 적용 (#571)

* feat: (#556) lazy import 설정 및 트리쉐이킹 설정

* feat: (#556) 로그인, 투표 통계, 회원정보 입력 페이지 lazy import 적용

* feat: (#556) 번들 이름 매번 바뀌도록 변경 및 수정되었던 코드 복구

* feat: (#556) Suspense 코드 복구

---------

Co-authored-by: jero_kang <81199414+inyeong-kang@users.noreply.github.com>

* 게시글 작성 시 이미지 파일을 보낼 때 webp 로 압축하여 성능 개선 (#614)

* feat: (#555) browser-image-compression 설치 및 본문 이미지 훅에 적용

* feat: (#555) 선택지 옵션 사진을 webp로 변환하도록 구현

* 신고 도메인 리팩터링 (#540)

* refactor: (#513) Report 도메인 코드 가독성 리팩토링

* refactor: (#513) Report 도메인 관련 테스트 코드 리팩토링

* refactor: (#513) Report의 Controller, Service를 컨벤션에 맞춰 클래스명 개선

* refactor: (#513) 전략 패턴 클래스들에 대한 테스트 코드 추가

* refactor: (#513) Transactional 어노테이션 클래스에 붙는 것으로 위치 개선

* refactor: (#513) 닉네임 3회 신고 받은 후 해당 멤버에 대한 닉네임 신고 기록 삭제

* refactor: (#513) 각 신고 전략에 관한 상수는 각 클래스에 두는 것으로 개선

* refactor: (#513) 파라미터가 2개인 메서드의 선언문 개행 되돌리기

* refactor: (#513) deleteByReportTypeAndTargetId 메서드의 테스트 코드 추가

* refactor: (#513) 파라미터 2개인 메서드 선언부 개행 삭제

* 정사각형으로 나오는 이미지를 너비값 기준으로 보이게 변경 (#623)

* chore: (#620) package-lock.json 업데이트

* fix: (#621) 스토리북을 이용하려고 할 때 웹팩 chunk 관련 에러가 나는 것 수정

* style: (#620) 이미지의 가로, 세로 비율에 맞게 이미지를 보여주도록 수정

* style: (#620) 게시글 작성 시  선택지 이미지에 적용

* chore: (#620) 변경된 컴포넌트 이름이 적용되어 있지 않던 스토리북 파일 수정

* style: (#620) 게시글 작성시 본문 이미지에도 적용

* fix: (#627) 개발서버 오리진 url 수정 (#628)

* style: (#622) 선택지가 왼쪽으로 움직이는 버그 수정

* fix: (#629) https 로컬호스트 오리진 url 추가 (#630)

* feat: (#602) 본문 이미지를 붙여넣기 이벤트로 이미지를 첨부할 수 있도록 구현

* refactor: (#602) 선택지 작성에서 중복되는 업로드 이미지 코드를 리팩터링한 것을 적용

* refactor: (#602) 사용하지 않는 async 제거, 부자연스러운 함수명 변경

* 성능 최적화를 위한 리액트 쿼리 캐시정책 설정 및 불필요한 fetch하지 않기 (#626)

* chore: (#619) 리액트 쿼리 캐싱 확인을 위한 세팅

* feat: (#619) 마감된 게시물 상세정보 1시간 캐싱하기

* design: 에러 메세지 컴포넌트 어절 단위로 개행 및 상하 마진 수정

* feat: (#619) 통계 서버데이터 형식을 사용처가 아닌 불러오는 곳에서 형식 변경

* feat: (#619) 통계 페이지 리액트 쿼리로 수정 및 서스펜스, 에러바운더리 적용

* fix: 통계 api msw에서 실서버로 요청 전환

* fix: thead, tbody가 없어서 발생하는 에러 해결

* fix: (#627) 개발서버 오리진 url 수정 (#628)

* style: (#622) 선택지가 왼쪽으로 움직이는 버그 수정

* fix: (#629) https 로컬호스트 오리진 url 추가 (#630)

* feat: (#602) 본문 이미지를 붙여넣기 이벤트로 이미지를 첨부할 수 있도록 구현

* refactor: (#602) 선택지 작성에서 중복되는 업로드 이미지 코드를 리팩터링한 것을 적용

* refactor: (#602) 사용하지 않는 async 제거, 부자연스러운 함수명 변경

* refactor: (#619) 불분명한 변수명 수정

* feat: 열정유저 테이블 내 2개의 api 중 하나라도 로딩/에러 시 테이블 폴백처리

* refactor: (#619) 사용하지 않는 useFetch 삭제

* feat: (#619) 통계 페이지 에러바운더리/ 서스펜스 범위 수정

- 기존: 글 전체 통계에 서스펜스와 에러바운더리 적용, post api에는 에러바운더리만 적용
- 수정: 글 전체 통계와 post Api 한번에 감싸는 서스펜스와 에러바운더리 적용

* refactor: (#619) 서스펜스, 에러바운더리 감싸는 순서를 기존 코드와 통일

- 에러바운더리 안에 서스펜스, 그 안에 api 호출하는 컴포넌트

* feat: 리액트 쿼리 데브 툴 설정

---------

Co-authored-by: lookh <103165859+aiaiaiai1@users.noreply.github.com>
Co-authored-by: Gilpop8663 <wolfye@naver.com>

* chore: (#631) https로 실행되도록 설정 및 스크립트 명령어 추가

* chore: (#631) pem키 gitignore에 추가
발급받은 기기에서만 유효한 pem키이기 때문에 git에 올릴 필요가 없음

* feat: (#563) 카테고리 즐겨찾기에 대한 낙관적 업데이트 구현 (#633)

* feat: (#541) imageUrl 앞 도메인 삭제

- 기존: 받은 imageUrl에 http-를 붙여야 image가 보여짐. 반대로 http-를 떼서 수정 api를 보내야 함
- 수정: 서버에서 보내주는 url 그대로 받아서 image를 보이고 수정 api를 보냄

* refactor: (#541) 불필요한 코드(이미지 업로드 버튼의 클릭이벤트) 삭제

* refactor: (#541) 사용하지 않는 유틸함수(이미지 url 수정) 삭제

* 정사각형으로 나오는 이미지를 너비값 기준으로 보이게 변경 (#623)

* chore: (#620) package-lock.json 업데이트

* fix: (#621) 스토리북을 이용하려고 할 때 웹팩 chunk 관련 에러가 나는 것 수정

* style: (#620) 이미지의 가로, 세로 비율에 맞게 이미지를 보여주도록 수정

* style: (#620) 게시글 작성 시  선택지 이미지에 적용

* chore: (#620) 변경된 컴포넌트 이름이 적용되어 있지 않던 스토리북 파일 수정

* style: (#620) 게시글 작성시 본문 이미지에도 적용

* [REFACTOR] 게시글 도메인 리팩터링 (#549)

* refactor: (#512) 게시글 댓글 도메인 리팩토링

* refactor: (#512) 테스트 엔티티 저장 유틸 클래스 구현

* refactor: (#512) 게시글 도메인 리팩토링

* refactor: (#512) 게시글 DTO 중복 제거 및 리팩토링

* refactor: (#512) 게시글 게스트 조회 기능에 대한 레포지토리 리팩토링

* refactor: (#512) 게스트 게시글 기능 리팩토링

* refactor: (#512) 게시글 조회 관련 레포지토리 리팩토링

* refactor: (#512) 게시글 조회 관련 애플리케이션 로직 리팩토링

* refactor: (#512) 게시글 조회 관련 API 리팩토링

* refactor: (#512) 사용하지 않는 클래스 제거

* refactor: (#512) 게시글 쿼리 기능을 위한 부가 클래스 구현

* refactor: (#512) 게시글 도메인 리팩토링

* refactor: (#512) 게시글 쿼리 관련 레포지토리 기능 구현

* refactor: (#512) 블라인드 게시글 조회 예외 처리

* refactor: (#512) 이미지 파일명 생성 기능 구현

* refactor: (#512) 이미지 저장 및 삭제 기능 구현

* refactor: (#512) 게시글 댓글 블라인드 예외 처리

* refactor: (#512) 게시글 작성, 수정, 삭제 로직 리팩토링

* refactor: (#512) 게시글 작성, 수정, 삭제 API 리팩토링

* chore: (#512) 코드 컨벤션 정리

* refactor: (#512) 게시글 요청, 응답 형식 수정

* refactor: (#512) 게시글 도메인 수정

* refactor: (#512) 요청, 응답 수정에 따른 변화 수정

* refactor: (#512) 게시글 수정 로직 개선

* refactor: (#512) 요청 파일 크기 제한 설정

* refactor: (#512) sequence가 필요한 메서드에서 sequence에 의존하도록 수정

* refactor: (#512) 코드 컨벤션에 맞게 name 속성 제거

* refactor: (#512) 게시글 옵션 예외 분리

* refactor: (#512) 임의의 url로 수정

* refactor: (#512) 람다식 컨벤션 수정

* refactor: (#512) enum 컨벤션 수정

* refactor: (#512) 변수명 수정

* refactor: (#512) 쿼리, 커맨드 트랜잭션 방식 명시

* refactor: (#512) early return 방식으로 수정

* refactor: (#512) 메서드 체이닝 방식으로 수정

* refactor: (#512) early return 방식으로 수정

* refactor: (#512) 게시글에 대한 신고 삭제 기능 구현

* refactor: (#512) 기존 게시글 옵션이 아닌 경우 예외 던지도록 수정

* refactor: (#512) 예외 타입 네이밍 수정

* refactor: (#512) 투표 수 int -> long 전환

* refactor: (#512) 게시글 옵션 ID 검증 로직 분리

* refactor: (#512) 충돌 해결하면서 터지는 테스트 수정

* refactor: (#512) 코드 컨벤션 수정

* refactor: (#512) hikari, JpaTransactionManager 로그 제거

* feat: (#512) tomcat 설정 환경변수 추가

* feat: (#512) 게시글 리팩토링

* design: (#541) 작성된 게시글 속 사진 가로 길이 80%으로 수정

---------

Co-authored-by: jero_kang <81199414+inyeong-kang@users.noreply.github.com>
Co-authored-by: 김영길/KIM YOUNG GIL <80146176+Gilpop8663@users.noreply.github.com>
Co-authored-by: Jun-Hyeok Sin <tjdtls690@gmail.com>
Co-authored-by: lookh <103165859+aiaiaiai1@users.noreply.github.com>
Co-authored-by: Gilpop8663 <wolfye@naver.com>
Co-authored-by: 최우창 <clllickme@naver.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

투표 선택지 생성 및 수정 실패, 카테고리 즐겨찾기에 대한 낙관적 업데이트 적용
3 participants