강원대 FE _ 구희원 3주차 과제 #88
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
yujo11
requested changes
Jul 13, 2024
| @@ -72,5 +76,9 @@ | |||
| }, | |||
| "overrides": { | |||
| "react-refresh": "0.11.0" | |||
| } | |||
| }, | |||
| "description": "📝 요구사항\r - [ ] 본인만의 기준으로 일관된 코드를 작성해주세요.\r - [ ] 첨부된 oas.yaml 파일을 토대로 Request, Response Type을 정의해요.\r - [ ] React Query를 사용하지 말고 axios 를 사용해서 구현해요.\r - [ ] 첨부된 oas.yaml 파일과 목 API URL을 사용하여 API를 구현해요.\r - 메인 페이지 - Theme 카테고리 섹션\r - [ ] /api/v1/themes API를 사용하여 Section을 구현해요.\r - [ ] API는 Axios또는 React Query 등을 모두 활용해서 구현해도 좋아요.\r - 메인 페이지 - 실시간 급상승 선물랭킹 섹션\r - [ ] /api/v1/ranking/products API를 사용하여 Section을 구현해요. (Axios 사용 가능)\r - [ ] 필터 조건을 선택 하면 해당 조건에 맞게 API를 요청하여 보여지게 해요.\r - Theme 페이지 - header\r - [ ] url의 pathParams와 /api/v1/themes API를 사용하여 Section을 구현해요.\r - [ ] themeKey가 잘못 된 경우 메인 페이지로 연결해요.\r - Theme 페이지 - 상품 목록 섹션\r - [ ] /api/v1/themes/{themeKey}/products API를 사용하여 상품 목록을 구현해요.\r - [ ] API 요청 시 한번에 20개의 상품 목록이 내려오도록 해요.", | |||
| setGoodsList(data.products); | ||
| } catch (err) { | ||
| console.log('Error fetching ranking products:', err); | ||
| if (axios.isAxiosError(err) && err.response) { |
Comment on lines
+63
to
+71
| {loading ? ( | ||
| <Loading /> | ||
| ) : error ? ( | ||
| <ErrorMessage message="No ranking products found" /> | ||
| ) : goodsList.length === 0 ? ( | ||
| <NoDataMessage message="No ranking products found." /> | ||
| ) : ( | ||
| <GoodsRankingList goodsList={goodsList} /> | ||
| )} |
There was a problem hiding this comment.
중첩 된 삼항연산자는 코드 보기를 어렵게 만드는데 개선해보시면 좋을거 같아요 ㅎㅎ
Comment on lines
+36
to
+49
| if (axios.isAxiosError(err) && err.response) { | ||
| switch (err.response.status) { | ||
| case 404: | ||
| setError('Ranking products not found.'); | ||
| break; | ||
| case 500: | ||
| setError('Server error. Please try again later.'); | ||
| break; | ||
| default: | ||
| setError('An error occurred while fetching data.'); | ||
| } | ||
| } else { | ||
| setError('An unexpected error occurred.'); | ||
| } |
There was a problem hiding this comment.
early return을 활용해서 코드를 보기 좋게 개선해보시면 좋겠네요!
|
|
||
| const fetchProducts = useCallback( | ||
| async (reset: boolean = false) => { | ||
| console.log('Starting fetchProducts'); |
There was a problem hiding this comment.
개발 중에 사용한 console.log는 같이 커밋 되지 않게 신경 써주시면 좋을거 같아요 ㅎㅎ
| const [hasMore, setHasMore] = useState(true); | ||
| const [pageToken, setPageToken] = useState<string | undefined>(undefined); | ||
|
|
||
| const fetchProducts = useCallback( |
Comment on lines
+67
to
+77
| if (loading && products.length === 0) { | ||
| return <Loading />; | ||
| } | ||
|
|
||
| if (error) { | ||
| return <ErrorMessage message={error} />; | ||
| } | ||
|
|
||
| if (products.length === 0) { | ||
| return <NoDataMessage message="No products found for this theme." />; | ||
| } |
There was a problem hiding this comment.
Suspense, ErrorBoundary를 사용해 컴포넌트에서는 성공하는 로직에만 집중할 수 있게 만들어보셔도 좋을거 같아요 ㅎㅎ (반드시 사용하라는 뜻은 아닙니다)
| ); | ||
| }; | ||
|
|
||
| export const useGetProductDetail = (params: GetProductDetailRequest) => { |
There was a problem hiding this comment.
useQuery에서 사용가능한 옵션들도 받을 수 있는 형태로 만들어보시면 좋을거 같아요 ㅎㅎ
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
step4 질문에 대한 답
질문 1. CORS 에러는 무엇이고 언제 발생하는지 설명해주세요. 이를 해결할 수 있는 방법에 대해서도 설명해주세요.
A. CORS 에러는 웹 브라우저가 보안 때문에 다른 사이트로부터 데이터를 가져오는 것을 막을 때
발생합니다. 이 문제를 해결할 수 있는 방법은 총 3가지가 있습니다.
질문 2. 비동기 처리 방법인 callback, promise, async await에 대해 각각 장단점과 함께 설명해주세요.
A. - 콜백 : 함수가 끝난 후에 실행된 함수를 미리 전달하는 방법입니다.
.then()과.catch()를 사용하여 작업이 끝난 후의 처리를 할 수 있습니다.- 비동기 작업의 성공과 실패를 명확하게 처리할 수 있습니다.
- 단점 : 초기 학습이 어렵습니다.
- 복잡한 비동기 로직을 다루기에는 부족합니다.
- async/await : async 함수는 항상 프로미스를 반환하며, await 키워드는 프로미스가 처리될 때까지 기다립니다.
- 장점 : 코드를 동기식처럼 작성할 수 있어 가독성이 뛰어납니다.
- 콜백 지옥이나, 프로미스보다 더 간결한 코드 작성이 가능합니다.
- 에러 처리가 명확합니다.
- 단점 : ES2017 이상을 지원하는 환경에서만 사용할 수 있습니다.
- 프로미스에 대한 기본적인 지식이 필요합니다.
질문 3. react query의 주요 특징에 대해 설명하고, queryKey는 어떤 역할을 하는지 설명해주세요.
react query의 주요 특징
데이터 패칭 및 캐싱 : 데이터를 가져와서 캐시에 저장, 다음에 같은 데이터를 필요로 할 때 서버가 아닌 캐시에서 가져옵니다.
자동 재패칭 : 데이터가 변경되면 자동으로 다시 가져옵니다.
배경 데이터 동기화 : 백그라운드에서 주기적으로 데이터를 동기화합니다.
데이터 무효화 : 특정 이벤트 후 데이터가 유효하지 않음을 표시하고 새 데이터를 가져옵니다.
Pagination 및 Infinite Queries : 페이지네이션과 무한 스크롤을 쉽게 구현할 수 있습니다.
querykey의 역할
고유 식별자 : 각 쿼리를 고유하게 식별하는 데 사용됩니다.
캐싱 및 무효화 관리 : queryKey를 사용해 데이터를 캐싱하고, 특정 queryKey의 데이터를 무효화하거나 갱신할 수 있습니다.
의존성 관리 : queryKey를 사용해 쿼리 간의 의존성을 관리하고, 동일한 queryKey를 가진 쿼리들이 자동으로 동기화 됩니다.