자바스크립트 - React.js

[React.js] TDD(Test-Driven-Development)방법론 사전

이번 포스팅은 여태 했던 포스팅과는 달리 React Testing Library와 jest, vitest에 대해 학습하며 얻은 지식들을 모두 한 곳에 모아서 포스팅 할 예정이라 학습에 대한 순서가 조금 뒤죽박죽일 수는 있다. 바로 시작해보자 ! ❗️ getByText()와 queryByText()의 차이 React Testing Library를 사용한 테스트 맥락에서 'getByText' 및 'queryByText'는 모두 React 구성 요소에서 렌더링된 요소를 쿼리하고 상호 작용하는 데 사용되는 메서드이다. 그러나 요소의 유무를 처리하는 방법에는 차이점이 있다. getByText와 queryByText는 텍스트 내용을 기반으로 요소를 찾는 데 사용되는 공통점을 가지고 있지만, getByText는 정의..

[React.js] TDD(Test-Driven-Development) 방법론에 대해서 알아보자

❗️ TDD란 ? TDD란 Test Driven Development의 약자로 '테스트 주도 개발'이라고 한다. 반복 테스트를 이용한 소프트웨어 방법론으로, 작은 단위의 테스트 케이스를 작성하고 이를 통과하는 코드를 추가하는 단계를 반복하여 구현한다. ❗️ TDD를 사용하는 이유 ✅ 초기 버그 감지 기능을 구현하기 전에 테스트를 작성하면 개발 프로세스 초기에 버그와 문제를 파악하는 데 도움이 된다. 이렇게 하면 나중에 디버깅할 때 상당한 시간과 노력을 절약할 수 있습니다. ✅ 코드 신뢰도 TDD는 개발자에게 안전망을 제공하여 코드베이스 변경으로 인해 기존 기능이 중단되지 않도록 보장한다. 수정 시 테스트를 실행하여 모든 것이 여전히 예상대로 작동하는지 빠르게 확인할 수 있다. ✅ 튼튼한 객체 지향적인 코..

[ReactQuery] useSuspenseQuery를 사용해서 Suspense 성능 개선 및 최적화를 해보자 !

❗️서론 최근 프로젝트를 진행하며 react-query의 Suspense를 적용하는 과정에서 그림에서 보는 것 처럼 데이터가 폭포(Waterfall)처럼 순차적으로 호출이 되어 로딩 화면이 장시간 노출되어버리는 골머리를 앓고있었다. 그러던 중에 링크드인의 일촌분께서 해당 방법을 해결할 수 있는 방법을 공유해주셔서 드디어 해결을 하였다 ... https://tech.kakaopay.com/post/react-router-dom-csr-prefetch/ CSR 환경에서 Suspense로 발생한 문제 해결하고 성능 개선하기 | 카카오페이 기술 블로그 react-router-dom 기반의 CSR 환경에서 Suspense를 사용하면서 발생한 순차적 API호출 문제를 프리패칭을 통해 개선한 경험을 공유합니다. te..

[ReactQuery] useMutation과 useQuery에서 TypeScript 적용하기

❗ useMutation에 TypeScript 적용 export function useMutation ✔ TData: Mutate 함수가 반환하는 데이터의 타입) const { data } = useMutation(/* mutateFn */); ✔TError: Mutate 함수 실행 중 발생할 수 있는 오류의 타입) const { error } = useMutation(/* mutateFn */, { onError: (err) => console.error(err) }); ✔TVariables: Mutate 함수에 전달되는 변수의 타입 const { mutate } = ..

[React.js] Recoil의 atom, atomfamily와 selector, selectorFamily에 대해서 알아보자

❗ atom atom은 단일 값 또는 객체를 나타내는 불변 상태를 정의하고 애플리케이션 전체에서 공유된다. 모든 컴포넌트에서 동일한 atom을 사용하며, 해당 atom에 대한 변경 사항은 모든 구독 컴포넌트에 자동으로 전파된다. ✔ 예제 import { atom, useRecoilState } from 'recoil'; const counterState = atom({ key: 'counterState', default: 0, }); function CounterComponent() { const [count, setCount] = useRecoilState(counterState); return ( Count: {count} setCount(count + 1)}>Increment ); } 해당 예제는 ..

[ReactQuery] useMutation에 대해서 알아보자 ! (feat. Optimistic Updates, invalidateQueries)

먼저 useQuery와 useMutation의 차이점에 대해 가볍게 알아보자. ❗ useQuery와 useMutation 차이 1. no cache data : useMutation은 일회성이고 fetching이나 reFetching 그리고 업데이트할 데이터가 없기 때문에 캐시 데이터라는 정의가 존재하지 않는다. 2. no retries : 직접 재시도를 구현할 수는 있지만 기본적으로는 재시도가 없다. (useQuery는 기본적으로 3번 재시도 함) 3. no refetch : 관련된 데이터가 없으므로 refetch가 없다. 4. no isLoading vs isFetching : useMutation은 캐시데이터도 없고 isLoading은 데이터가 없을 때 이루어지는 fetching이기 때문에 isLo..

[ReactQuery] refetch에 대해서 알아보자 ! (feat. 전역 refetching, Polling)

❓ refetch refetch와 refetch가 일어나는 조건에 대해서는 해당 링크에서 가볍게 다뤘으니 살펴보도록 하자. ❗ refetch와 관련된 옵션 ✔ refetchOnMount 이 옵션은 boolean 타입을 가지며 구성 요소가 마운트될 때 (즉, 처음 렌더링될 때) 데이터를 다시 가져와야 하는지 여부를 결정한다. 'false'로 설정되면 구성 요소가 마운트(초기 렌더링)될 때 데이터를 자동으로 다시 가져오지 않고, 'true'로 설정하면 구성 요소가 마운트 될 때 데이터를 자동으로 다시 가져온다. ✔ refetchOnWindowFocus 이 옵션은 boolean 타입을 가지며 창이 포커스를 얻을 때 데이터를 다시 가져와야 하는지 여부를 결정한다. 'false'로 설정되면 창이 포커스를 얻을 때..

[ReactQuery] useQuery의 select 옵션을 사용해보자 !

❗ useQuery의 select 옵션 useQuery의 select 옵션은 react-query 라이브러리에서 제공하는 기능으로 response 데이터에서 원하는 데이터를 선택하는 역할을 한다. select 옵션은 useQuery의 세 번째 인자로 전달되며, 선택적으로 사용할 수 있고 이 옵션을 사용하면 서버로부터 받은 response 데이터에서 특정 필드나 속성을 선택하여 사용할 수 있다. 예를 들어, user 객체가 있고 해당 객체에 username 필드가 있다고 가정해보자면 select 옵션을 사용하여 user 객체에서 username 필드만 선택하도록 설정할 수 있다. import { useQuery } from 'react-query'; function User() { const { data ..