분류 전체보기

[TS] onSubmit와 formData를 사용하여 form 유효성 검사하기

onSubmit로 폼 제출시 유효성 검사하기요구사항에 따르면 MessageForm과 CashReceiptForm 값에 대한 유효성을 한번에 검사해야 한다. 이전에 구현한 내 코드를 보자.가장 상위의 orderPage에서 여러 하위 컴포넌트들을 하나의 폼 태그로 감싸주고 있다. 폴더구조를 살펴보면 OrderMainSection 하위에 메세지 폼이, OrderAsideSection 하위에 현금영수증 폼이 있는 구조이다.📦Order ┣ 📂OrderAsideSection ┃ ┣ 📜component.tsx ┃ ┗ 📜index.tsx ┗ 📂OrderMainSection ┃ ┣ 📂MessageFormSection ┃ ┃ ┗ 📜index..

[TS] useInfiniteQuery와 useInView 훅으로 무한스크롤 구현하기

useInfiniteQuery나는 suspense와 infiniteQuery를 함께 사용하고 싶어서 useSuspenseInfiniteQuery 를 사용했다.tanstack React Query v5부터는 initialPageParam 옵션도 추가적으로 작성해줘야 됨.아니면 나처럼 에러 난다. 참고const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useSuspenseInfiniteQuery({ queryKey: ['goodsData', themeKey], queryFn: ({ pageParam = '1' }) => fetchGoodsData(themeKey, pageParam), initialPageParam: '1', getNex..

[TS] React Query와 Suspense, ErrorBoundary 함께 사용하기

처음에는, 전역에서 suspense 옵션을 index.tsx의 queryClient에 전역으로 설정하려고 했다.const queryClient = new QueryClient({ defaultOptions: { queries: { suspense: true, }, },});하지만 아래와 같은 에러가 발생.🚫 개체 리터럴은 알려진 속성만 지정할 수 있으며 'OmitKeyof, "suspense" | "queryKey", "strictly">' 형식에 'suspense'이(가) 없습니다.ts(2353) (property) suspense: boolean아차차.. 리액트 쿼리 v5에서는 suspense: boolean 옵션은 제거되고 useSuspenseQuery, useSuspens..

프론트엔드에서 효과적으로 비동기 처리하기(feat. TanStack Query & Suspense)

프론트엔드에서 비동기 처리 방식보통은 React-Query와 같은 라이브러리를 사용해서 비동기를 처리하는 부분을 정의한다.const {data, error} = useAsyncValue(() => { return fetchSomething();}Promise를 반환하는 함수를 리액트 훅의 인자로 넘기고, Promise의 상태 변화에 따라 hook이 반환하는 data와 error의 값을 적절히 채워준다.그리고 컴포넌트에서 로딩과 에러 처리를 조건문을 사용해서 동시에 수행한다. (나같은 경우도…) if (fetchState.isLoading) { return 로딩 중...; } if (fetchState.isError) { return 상품 목록을 불러오지 못했습니다.; }이와 같은 경..

[TS] 타입 단언(as Type)과 타입 선언(: Type)을 비교해보자

타입 단언 vs 타입 선언타입 단언은 타입 체커에게 해당 객체가 특정 타입임을 강제적으로 알리는 역할을 하지만, 실제 객체의 타입이 변하지는 않는다. 반면, 타입 선언은 객체의 타입을 명시적으로 정의해서 타입 체커가 해당 객체의 속성과 메서드를 올바르게 인식하고 검사할 수 있도록 한다.타입 단언(as Type)보다는 타입 선언(: Type)을 사용하기당연한 말이지만, 타입 단언을 사용하면 타입 체크를 할 수 없다.타입 선언은 할당되는 값이 해당 인터페이스를 만족하는지 검사하는데, 타입 단언은 강제로 타입을 지정했으니 타입 체커에게 오류를 무시하라고 하는 것과 같은 셈이다.속성 추가- 타입 단언(as Type): 속성 추가 시 타입 체커가 이를 무시하게 되어 런타임 에러가 발생할 수 있다. interfac..

🌳7월12일 TIL🎶

HTTP status에 따른 에러 핸들링하기fetchState에 errorMessage status를 추가해준다.export interface FetchState { isLoading: boolean; isError: boolean; isDataNull: boolean; data: T | null; errorMessage: string | null;}데이터를 불러오는 fetchData 함수에 status가 200인 경우에는 ok로 반환하도록 수정했다.import apiClient from '.';export const fetchData = async ( apiEndpoint: string, params?: object,): Promise => { const res = await apiCli..