전체 글

[react-Query] useMutation 사용해서 데이터 변경과 예외처리 하기

useMutation카테고리 생성 기능을 구현하던 중, 카테고리 데이터를 서버로 POST 해줘야했다.서버 데이터를 변경하는 요청은 (POST, DELETE 등) 대부분 특정 이벤트가 발생할 때 실행되어야 한다.이는 useMutation 의 mutate 를 사용하여 구현할 수 있다.카테고리의 name을 post하는 비동기 함수를 작성하고,const categoryRequest = async (name: string) => { const requestData = { name: name, }; const response = await axiosInstance.post(`${BASE_ENDPOINTS.CATEGORY}`, requestData); return response;};useMutation..

리다이렉션과 동적 경로 생성하기

리다이렉트란?리다이렉트(Redirect)는 사용자가 처음 요청한 URL이 아닌, 다른 URL로 보내는 것을 뜻한다. 예를 들어, 로그인 하지 않은 유저가 로그인이 필요한 페이지에 접속하려고 했을 때, 로그인 페이지로 리다이렉트를 걸어줄 수 있는 것이다.리다이렉션 URL 생성하기사용자를 로그인 페이지로 리다이렉션할 때, 로그인 후에 다시 원래 위치로 돌아갈 수 있도록 현재 페이지 URL 또는 주어진 URL을 쿼리 매개변수로 포함시킨다.//getDynamicPath 내의 login 함수login: (redirect?: string) => { const currentRedirect = redirect ?? window.location.href; return `${RouterPath.login}?redire..

[Test] CRA 프로젝트의 Testing Library

Testing LibraryCRA로 만든 프로젝트에서는 package.json에 테스팅 라이브러리가 포함되어있다."@testing-library/jest-dom": "^5.17.0","@testing-library/react": "^13.4.0","@testing-library/user-event": "^13.5.0",@testing-library/jest-dom@testing-library/jest-dom은 Jest와 함께 DOM 노드에 대한 추가적인 매처(matcher)를 제공하는 라이브러리이다.테스트 코드에서 더 읽기 쉬운 assertions(단언문)을 작성할 수 있게 도와준다. 예를 들어, toBeInTheDocument(), toHaveClass(), toHaveTextContent() 등의 매..

[Test] 단위 테스트와 통합 테스트, MSW

테스트 코드를 작성하는 이유테스트 코드를 작성하다 보면 테스트를 가능하게끔 작성하다보니 코드를 간결하고 유연하게 작성하거나 의존성을 최소화 하는 방향으로 코드를 작성하게 된다.⇒ 자연스럽게 유지보수성과 재사용성이 높아진다.E2E 테스트란?E2E 테스트는 End To End 테스트의 약자로 애플리케이션의 흐름을 처음부터 끝까지 테스트하는 것을 의미한다. 유닛 테스트나 통합 테스트는 모듈의 무결성을 증명할 수 있는 강력한 테스트이지만, 모듈의 무결성이 애플리케이션 동작의 무결성까지는 증명해 줄 수 없다.E2E 테스트 과정에서는 실제 사용자의 시나리오를 테스트함으로써 애플리케이션 동작을 테스트하게 되고, 이 테스트를 통과함으로써 애플리케이션의 무결성을 증명할 수 있게 되는 것이다.테스트 툴최신 테스트 도구 중..

🌳7월22일 TIL🎶

❓제어 컴포넌트와 비제어 컴포넌트제어와 비제어 컴포넌트의 차이가 무엇이고 제어 컴포넌트로 Form을 만들어야 하는 경우가 있다면 어떤 경우일까?폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어한다. 주로 useState와 같은 상태 관리 훅을 사용한다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 제어 컴포넌트 (controlled component)라고 한다. 대부분 경우에 폼을 구현하는데 제어 컴포넌트를 사용하는 것이 좋다.반면, 비제어 컴포넌트는 DOM 자체에서 폼 데이터가 다루어진다. 모든 state 업데이트에 대한 이벤트 핸들러를 작성하는 대신 비제어 컴포넌트를 만들려면 ref를 사용하여 DOM에서 폼 값을 가져올 수 있다.//예시import Rea..

[TS] useQuery 커스텀 훅 사용하기

❓UseQueryOptions UseQueryOptions는 react-query의 useQuery 훅에서 쿼리의 동작을 제어하는 옵션을 정의하는 타입이다. 이 타입을 사용하여 쿼리의 캐싱, 데이터 재검증, 에러 핸들링, 리트라이 로직 등 다양한 동작을 설정할 수 있다. UseQueryOptions 타입을 사용할 때 react-query에서 총 네 가지 타입 인수를 받는다.TData: 쿼리에서 반환되는 데이터 타입TError: 쿼리에서 반환되는 에러 타입TResult: select 함수를 사용한 후의 데이터 타입 (기본적으로 TData와 동일함)TQueryKey: 쿼리 키의 타입export const useProductDetailsQuery = ( productId: number, options?: ..