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

chsua · 2023-09-15T09:30:33Z

🔥 연관 이슈

close: #619

📝 작업 요약

성능 최적화를 위한 리액트 쿼리 캐시정책 설정 및 불필요한 fetch

⏰ 소요 시간

1일

🔎 작업 상세 설명

리액트 쿼리 캐시 정책
- 마감완료된 post detail 캐싱 1시간
- 통계 결과 캐싱 1시간
  - 리액트쿼리가 도입되어 있지 않아서 해당 부분을 리액트 쿼리로 마이그레이션.
    - 하는 과정에서 각각 통계마다 서스펜스, 에러바운더리 적용
  - 도입 후 캐싱 설정
불필요한 fetch 하지 않기
- 페이지 별 필요하지 않은 fetch가 이루어지고 있는지 확인
- 확인 결과 노션에 올림
- 이상한 부분 없고 캐싱 잘 되어서 별도 처리 없음

🌟 논의 사항

기존 코드에서 랭킹 페이지에서 에러 발생 : 최적화와는 관련 없지만.. 사소해서 묻는 이슈

react-dom.development.js:86 Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table>. Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.

thead, tbody가 없어서 나는 오류여서 해당 부분 수정. 근데, 열정유저의 내 정보가 다른 api여서 따로 서스펜스랑 에러바운더리 적용해줬는데 이렇게 되면 테이블 안에 div를 넣었다고 에러가 남(코드 실행에는 문제가 없으나 리액트에서 나는 에러).

"validateDOMNesting(...): <div> cannot appear as a child of <table>. at div"

해결 방안으로는

에러바운더리와 서스펜스 fallback을 테이블 관련 태그로 수정한다. (그럼 새로 에러바운더리 코드를 만들거나 기존 코드를 수정해야 함)
열정 유저 테이블을 하나의 데이터로 보고 열정유저 10순위가 있고, 내 열정순위가 로딩/에러인 경우 테이블을 통으로 서스펜스/에러바운더리를 그린다.

이렇게 둘이 있을 것 같습니다.
어떻게 생각하시나요?

github-actions · 2023-09-15T09:44:14Z

⚡️ Lighthouse report!

Category	Score
🔴 Performance	49
🟠 Accessibilty	88
🟠 SEO	85
🟠 PWA	89

Category	Score
🟢 First Contentful Paint	0.7 s
🔴 Largest Contentful Paint	4.8 s
🔴 Total Blocking Time	3,650 ms
🟢 Cumulative Layout Shift	0
🟠 Speed Index	5.1 s

inyeong-kang

👏👏쿼리로 리팩터링한 코드 잘 작동한다니 정말 좋네요!

inyeong-kang · 2023-09-15T09:45:29Z

frontend/src/App.tsx

@@ -2,6 +2,7 @@ import { Suspense } from 'react';
 import { RouterProvider } from 'react-router-dom';

 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';


이거 운영(prod) 환경에서는 필요 없을거 같아요! msw처럼 dev에서만 작동하도록 하는거 어떨까요

You can import the devtools like this:

tsx
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
By default, React Query Devtools are only included in bundles when process.env.NODE_ENV === 'development', so you don't need to worry about excluding them during a production build.

기본적으로 개발환경에서만 번들에 포함되서 빌드된대요

tsx
'@tanstack/react-query-devtools'에서 {ReactQueryDevtools} 가져오기
기본적으로 React Query Devtools는 process.env.Node_ENV === 'development'일 때 번들에만 포함되므로 프로덕션 빌드 시 제외할 걱정이 없습니다.

근데 import만 하고 ReactQueryDevtools가 작성된 곳은 보이지 않는데 확인해주실수 있으실까요?

https://tanstack.com/query/v4/docs/react/devtools#install-and-import-the-devtools

지금 로컬이랑 비교해보았는데 기본적으로 개발환경에서만 번들에 포함되서 빌드된대요라고 말씀 주셨던 것처럼 로컬에는 작성되어있는데 깃허브로 올라오면서 삭제되나봐요😅

inyeong-kang · 2023-09-16T08:13:15Z

frontend/src/pages/VoteStatisticsPage/index.tsx

 <S.LoadingWrapper>
- <Skeleton isLarge={true} />
+ <LoadingSpinner size="sm" />


오 왜 로딩스피너로 바꾸셨는지 궁금해요!

그래프 컴포넌트가 그려지는 데에는 스켈레톤보다는 로딩스피너가 더 어울린다고 생각을 했습니다.
여기 api가 2개 불리지만 구역이 나뉘어져 있지는 않아서 이걸 어떤 로딩화면을 보여줘야 하는지 확신은 들지 않습니다🥲

inyeong-kang · 2023-09-16T08:20:05Z

논의사항의 이슈가 왜 뜨는지 궁금했었는데 알려주셔서 감사합니다👍
저는 2번이 낫다고 생각합니다! 1번은 뭔가.. 유효한 내용이 없는 table 태그를 보여주는건,, 시맨틱적으로 바람직한거 같진 않아요.. fallback ui면 에러메시지 div를 보여주는 것이 시맨틱적으로나, 웹접근성 면에서 이해하기 쉽다고 생각합니다🙂

fe-리뷰완

Gilpop8663

논의사항 중 저도 2번째가 좋아보여요

첫번째로 저 데이터만을 위한 서스펜스나 기존 코드를 수정하는 것은 리소스가 많이 든다고 생각이 들었구요. 실패한 것 데이터만 재시도하는 기능을 제공하지 않으니까 둘 중 하나만 실패해도 사용자에게 안보여주는 것이 더 좋은 사용자 경험이라고 생각이 들었어요

예시) 열정랭킹

<통 서스펜스>
<열정랭킹 순위>
<내 열정 랭킹 순위>
</통 서스펜스>

리엑트 캐싱 정책과 함께 통계 리팩터링까지 너무 좋아요 💯💯💯

fe-리뷰완

Gilpop8663 · 2023-09-16T09:17:42Z

frontend/src/App.tsx

@@ -2,6 +2,7 @@ import { Suspense } from 'react';
 import { RouterProvider } from 'react-router-dom';

 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';


You can import the devtools like this:

tsx
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
By default, React Query Devtools are only included in bundles when process.env.NODE_ENV === 'development', so you don't need to worry about excluding them during a production build.

기본적으로 개발환경에서만 번들에 포함되서 빌드된대요

tsx
'@tanstack/react-query-devtools'에서 {ReactQueryDevtools} 가져오기
기본적으로 React Query Devtools는 process.env.Node_ENV === 'development'일 때 번들에만 포함되므로 프로덕션 빌드 시 제외할 걱정이 없습니다.

근데 import만 하고 ReactQueryDevtools가 작성된 곳은 보이지 않는데 확인해주실수 있으실까요?

https://tanstack.com/query/v4/docs/react/devtools#install-and-import-the-devtools

Gilpop8663 · 2023-09-16T09:19:47Z

frontend/src/hooks/query/useVoteStatistics.tsx

+ optionId ? [QUERY_KEY.VOTE_STATISTICS, postId, optionId] : [QUERY_KEY.VOTE_STATISTICS, postId],
+ () => (optionId ? getOptionStatistics({ postId, optionId }) : getPostStatistics(postId)),


삼항연산자를 굉장히 잘 작성하시네요 👍👍👍

Gilpop8663 · 2023-09-16T09:30:08Z

frontend/src/pages/VoteStatisticsPage/OptionStatistics/index.tsx

- const { isToastOpen, openToast, toastMessage } = useToast();
-
- const {
- data: voteResult,
- errorMessage,
- isLoading,
- } = useFetch(() => getOptionStatistics({ postId, optionId: voteOption.id }));


마지막 useFetch가 사라졌네요 😂

useFetch를 사용하는 곳이 없다면 useFetch 훅을 삭제해야할지 혹은 사용했던 역사를 존중해서 내비둬야할지 고민이 되네용

와.. 이제 fetch를 사용하지 않는다면 없애버려야겠네요...
우리 마음속에 언제나 있을 fetch..

Gilpop8663 · 2023-09-16T09:36:18Z

frontend/src/pages/VoteStatisticsPage/OptionStatistics/index.tsx

- if (!voteResult) return openToast('투표 통계 불러오기를 실패했습니다.');
-


투표 통계를 불러오지 못했을 때는 이제 에러 바운더리로 데이터를 불러오지 못했다고 알려주겠네요

Gilpop8663 · 2023-09-16T09:49:05Z

frontend/src/pages/VoteStatisticsPage/index.tsx

+ <ErrorBoundary>
+ <OptionWrapper postId={postId} />
+ </ErrorBoundary>


여기는 usePostDetail을 불러오는데 마감된 게시글은 쿼리키가 1시간으로 되어 있으니 따로 Suspense를 적용하지 않으신걸까요??

바로 통계 URL로 들어온다면 Suspense가 필요해보여요

서스펜스를 적용해야하는지 고민이 되었던 부분인데요!
캐시보단 해당 코드 위에서 글 전체 통계 그래프와 연관이 있습니다.

글 전체 통계 그래프도 서스펜스가 적용되고 있어서 여기에 서스펜스를 그린다면 권역 구별 없이 풀백이 두개가 그려지게 됩니다.
해당 부분을 처음 보는 사용자한테는 이상하다고 느껴질 것 같아서 1개만 그리는 것이 좋다고 생각했고,
그렇다면 좀더 본질인 게시글 통계가 그려지는 것이 맞다고 느꼈습니다.

현재 방식으로는 에러가 발생했을 때 에러메세지도 2개 뜰 것 같습니다.
우스와 대면 협의 결과 글 전체 통계 서스펜스와 에러바운더리가 모든 api를 감싸도록 수정하겠습니다!

Gilpop8663 · 2023-09-16T09:52:19Z

frontend/src/pages/VoteStatisticsPage/index.tsx

+ <Suspense
+ fallback={
 <S.LoadingWrapper>
- <Skeleton isLarge={true} />
+ <LoadingSpinner size="sm" />
 </S.LoadingWrapper>
- )}
- {voteResultResponse && (
- <VoteStatistics voteResultResponse={voteResultResponse} size="md" />
- )}
- {postDetail.voteInfo.options.map(option => {
- const { postId, voteInfo } = postDetail;
- return (
- <OptionStatistics
- key={option.id}
- postId={postId}
- isSelectedOption={voteInfo.selectedOptionId === option.id}
- voteOption={option}
- size="sm"
- />
- );
- })}
- </S.OptionContainer>
- )}
+ }
+ >
+ <ErrorBoundary>
+ <StatisticsWrapper postId={postId} size="md" />
+ </ErrorBoundary>
+ </Suspense>


StatisticsWrapper에서 Suspense를 에러바운더리 부모로 사용하신 이유가 있으실까요? 기존에 순서가 항상 에러바운더리로 서스펜스를 감싸는 것에 익숙해졌어서 눈에 들어오네요!🔥

<Suspense> <ErrorBoundary> <StatisticsWrapper /> </ErrorBoundary> </Suspense>

통일성 있게 수정했습니다!

Gilpop8663 · 2023-09-16T09:58:30Z

frontend/src/pages/VoteStatisticsPage/OptionWrapper/index.tsx

+
+import OptionStatistics from '../OptionStatistics';
+
+export default function OptionWrapper({ postId }: { postId: number }) {


데이터만 불러오는 컴포넌트 너무 좋네요

앞으로 비슷한 역할을 하는 컴포넌트는 불러오는 데이터명 + Wrapper 와 같이 컴포넌트를 만들어서 사용하는 것을 회의해보고 싶어요

데이터를 사용하는 컴포넌트에서 데이터를 불러와서 사용하면 기존의 스토리북 코드가 전부 사라져버려서 너무 아쉬웠거든요

수아 짱💯💯💯

Gilpop8663 · 2023-09-16T10:38:38Z

fe-리뷰완

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

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

github-actions · 2023-09-19T01:01:33Z

Test Results

253 tests 253 ✔️ 24s ⏱️
  64 suites     0 💤
  64 files     0 ❌

Results for commit f5e4a2b.

* 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>

* 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>

chsua added 7 commits September 15, 2023 01:39

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

ddc6b8b

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

adfd841

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

88dea16

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

891cb8f

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

20ca82a

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

3c00764

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

8a8506c

chsua added FE 🐾 개발 labels Sep 15, 2023

chsua requested review from Gilpop8663 and inyeong-kang September 15, 2023 09:30

chsua self-assigned this Sep 15, 2023

Merge branch 'dev' into feat/#619

e218541

inyeong-kang approved these changes Sep 16, 2023

View reviewed changes

Gilpop8663 reviewed Sep 16, 2023

View reviewed changes

Gilpop8663 approved these changes Sep 16, 2023

View reviewed changes

aiaiaiai1 and others added 11 commits September 18, 2023 18:21

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

e39f5c3

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

4e9d264

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

4081b70

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

65f999e

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

4693eea

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

2b8b602

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

71a3830

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

8af09a4

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

8e9883b

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

856ef74

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

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

f5e4a2b

chsua merged commit 864f2b7 into dev Sep 19, 2023
4 checks passed

chsua deleted the feat/#619 branch September 19, 2023 01:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

chsua commented Sep 15, 2023

github-actions bot commented Sep 15, 2023 •

edited

Loading

inyeong-kang left a comment

inyeong-kang Sep 15, 2023

Gilpop8663 Sep 16, 2023

chsua Sep 18, 2023

inyeong-kang Sep 16, 2023

chsua Sep 18, 2023

inyeong-kang commented Sep 16, 2023 •

edited

Loading

Gilpop8663 left a comment

Gilpop8663 Sep 16, 2023

Gilpop8663 Sep 16, 2023

Gilpop8663 Sep 16, 2023

chsua Sep 18, 2023

Gilpop8663 Sep 16, 2023

Gilpop8663 Sep 16, 2023

chsua Sep 18, 2023

chsua Sep 18, 2023

Gilpop8663 Sep 16, 2023

chsua Sep 18, 2023

Gilpop8663 Sep 16, 2023

Gilpop8663 commented Sep 16, 2023

github-actions bot commented Sep 19, 2023

		optionId ? [QUERY_KEY.VOTE_STATISTICS, postId, optionId] : [QUERY_KEY.VOTE_STATISTICS, postId],
		() => (optionId ? getOptionStatistics({ postId, optionId }) : getPostStatistics(postId)),

		if (!voteResult) return openToast('투표 통계 불러오기를 실패했습니다.');


		import OptionStatistics from '../OptionStatistics';

		export default function OptionWrapper({ postId }: { postId: number }) {

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

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

Conversation

chsua commented Sep 15, 2023

🔥 연관 이슈

📝 작업 요약

⏰ 소요 시간

🔎 작업 상세 설명

🌟 논의 사항

github-actions bot commented Sep 15, 2023 • edited Loading

inyeong-kang left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

inyeong-kang commented Sep 16, 2023 • edited Loading

Gilpop8663 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Gilpop8663 commented Sep 16, 2023

github-actions bot commented Sep 19, 2023

Test Results

github-actions bot commented Sep 15, 2023 •

edited

Loading

inyeong-kang commented Sep 16, 2023 •

edited

Loading