경북대 FE_정서현 3주차 과제 Step3 ~ 4 #89
Conversation
| 'react-hooks/exhaustive-deps': 'off', | ||
| 'simple-import-sort/imports': 'error', | ||
| 'simple-import-sort/exports': 'error', | ||
| "@typescript-eslint/no-explicit-any": "off", | ||
| '@typescript-eslint/consistent-type-imports': 'warn', | ||
| '@typescript-eslint/no-shadow': 'off', |
There was a problem hiding this comment.
끄신 린트 룰들 전부 켜고 사용해주세요!
특히 exhaustive-deps는 절대 끄지 말아주세요!
| "react": "^18.2.0", | ||
| "react-dom": "^18.2.0", | ||
| "react-intersection-observer": "^9.13.0", | ||
| "react-query": "^3.39.3", |
There was a problem hiding this comment.
react-query는 현재 이름이 tanstack query로 변경되었고, 버전이 5까지 나왔을거에요. 확인하셔서 최신 버전으로 개발하시는 것을 추천드립니다.
| @@ -8,13 +8,13 @@ import { breakpoints } from '@/styles/variants'; | |||
| import type { GoodsData } from '@/types'; | |||
|
|
|||
| type Props = { | |||
| goodsList: GoodsData[]; | |||
| goodsList: GoodsData[] | undefined; | |||
There was a problem hiding this comment.
굳이 undefined를 추가해야할까요? goodsList가 반드시 GoodsData[] 타입이도록 보장해줄 수 있지 않을까요?
| @@ -8,13 +8,13 @@ import { breakpoints } from '@/styles/variants'; | |||
| import type { GoodsData } from '@/types'; | |||
|
|
|||
| type Props = { | |||
| goodsList: GoodsData[]; | |||
| goodsList: GoodsData[] | undefined; | |||
| }; | |||
|
|
|||
| export const GoodsRankingList = ({ goodsList }: Props) => { | |||
There was a problem hiding this comment.
파일명과 컴포넌트명을 일치시켜주세요~! List -> GoodsRankingList
| const params = { | ||
| targetType: filterOption.targetType, | ||
| rankType: filterOption.rankType | ||
| } |
There was a problem hiding this comment.
params를 만들지 않고 filterOption을 그대로 사용해도 되지 않을까요?
| targetType: filterOption.targetType, | ||
| rankType: filterOption.rankType | ||
| } | ||
| const response = await axios.get(`${BASE_URL}api/v1/ranking/products`, { params }) |
There was a problem hiding this comment.
BASE_URL을 매번 지정해주기보다는 axios instance를 만들면 좋을 것 같아요~! 그리고 보통 BASE_URL에는 ~/api/까지 포함하는 경우가 많아요
| fetchRankingList(filterOption) | ||
| ) | ||
|
|
||
| const renderingFunc = () => { |
There was a problem hiding this comment.
조금 더 적절한 함수명을 고민해봐도 좋을 것 같습니다~
그리고 이렇게 컴포넌트를 반환하는 함수를 사용할때는 렌더링 관점에서 손해를 보지 않을지 고민해보시는 것도 좋을 것 같습니다~
| useEffect(() => { | ||
| if (inView && hasNextPage) { | ||
| fetchNextPage(); | ||
| } | ||
| }, [inView, hasNextPage, fetchNextPage]); |
마지막 남은 무한 스크롤 구현과 react-query 를 이용한 API 재 구현입니다.
📌 3주차 질문
🤔 1. CORS 에러는 무엇이고 언제 발생하는지 설명하라, 이를 해결할 수 있는 방법에 대해서도 설명하라.
언제 발생하는가?
http://naver.com → https://naver.comhttps://api.naver.com → https://naver.comhttps://naver.com:8080 → https://naver.com해결 방법
프록시 (Proxy)설정하기 : 클라이언트와 서버 사이의 중계 Point 설정Access-Control-Allow-Origin헤더 세팅🤔 2. 비 동기 처리 방법인 callback, promise, async await 에 대해 각각 장단점과 함께 설명하라.
callbackpromise.catch() 와 .then()메서드를 사용하여 에러 처리와 연속적인 비동기 작업을 처리할 수 있다.Async & Await장점은 코드가 동기적으로 작성되어 비동기 작업을 처리하는 것으로 보여 가독성이 매우 좋다.
try-catch블럭을 통해 간편하게 에러를 처리할 수 있다.단점은 Async 함수 내에서는 Promise 를 사용해야 하므로, 기존에 Promise 가 없는 코드와의 호환성 문제가 발생할 수 있다.
🤔 3. React query의 주요 특징에 대해 설명하고 queryKey는 어떤 역할을 하는지 설명하라.
주요 특징
queryKey의 역할