Web/React10

• 

  간단하게 사용해보는 React Hook Form & zod (useFieldArray) "use client";import React from "react";import { zodResolver } from "@hookform/resolvers/zod";import { useFieldArray, useForm } from "react-hook-form";import { z } from "zod";type Props = {};type FormValues = { testObj: { name: string; gender: string; }; pets: { name: string; species: string }[];};const formSchema = z.object({ testObj: z.object({ name: z.string().min(1, "이름은 필수입니다.").. Web/React 2024. 11. 7.

• 

  error boundary로 행복하게 에러처리하기 (react-query) UI의 한 부분에서의 자바스크립트 에러가 전체 앱을 망가뜨려서는 안된다. 에러 처리를 어떻게 공통화해야 할 지 골머리를 앓았다.하염없이 try catch만을 붙이는건 정말 비생산적인 일임을 깨닫고 error boundary를 본격적으로 도입했다. 익숙하게 사용하던 axios와 react query를 계속 사용하는 것을 전제로 error 처리를 했다. 1. axios interceptor에서는 별다른 에러 처리를 하지 않는다. 2. 전역으로 사용할 Errorboundary를 설정한다. class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false, error.. Web/React 2024. 11. 5.

• hover시 나타나는 헤더 네비게이션바 헤더의 메뉴 아이템에 마우스가 호버되었을때 아래에 네비게이션이 나타나는 것을 구현해야 했다. 좌측 네비게이션을 구현할 때와 마찬가지로 ref를 사용해서 mouseover target 이벤트 대상을 확인하면 되겠지 생각했는데 복병이 있었다. 좌측 네비게이션은 ref를 하나만 써서 상관이 없는데 상단 네비게이션은 ref가 두개 필요했다.  -> position relative // 다른 요소 ... ... // -> position absolute // 다른 요소 ...NavContainer의 아이템에  mouseover 이벤트를 걸고 state를 저장후 해당 state에 따라 HoverNavContainer의 visibility를변화시키는 UI이다. 이때 중요한.. Web/React 2024. 8. 26.

• [react query] react query 사용시 주의점(invalidateQueries) react query의 캐싱된 데이터는 invalidateQueries를 통해 refetch 시킬 수 있다. When a query i invalidated whit invalidateQueries, tow things happen- It is marked as stale. This stale state overrides any staleTime configurations being used in useQuery or related hooks- If the query is currently being rendered via useQuery or related hooks, it will also be refetched in the background 나 또한 오래된 값을 갱신시키기 위해 해당 메서드를 사용.. Web/React 2024. 7. 3.

• [Redux Toolkit] 사용 환경 설정 // store.js import { configureStore } from "@reduxjs/toolkit"; import { useMemo } from "react"; import { rootReducer } from "./rootReducer"; import { persistStore, persistReducer } from "redux-persist"; import storage from "redux-persist/lib/storage"; const initializeStore = () => { const persistConfig = { key: "root", storage, whitelist: [""], // 로컬/세션 스토리지에 저장할 reducer 이름 }; const persistedRed.. Web/React 2024. 4. 13.

• [Redux Toolkit] 목적 The redux Toolkit package is intended to be the standard way to write Redux logic. It was originally created to help address three common concerns about Redux: Configuring a Redux store is too complicated I have to add a lot of packages to get Redux to do anything useful Redux requires too much boilerplate code RTK Query It is purpose-built to solve the use case of data fetching and caching, sup.. Web/React 2024. 4. 13.

• access token 자동 갱신 방법 문제 상황 JWT 인증 방법을 사용할 때 access token이 만료되었으면 클라이어트단에서 어떻게 처리를 해야할까? 보통은 만료되었기 때문에 로그아웃시키는 것이 일반적이다. 하지만 로그아웃 시키지 않고 클라이언트단에 저장되어있는 refresh token을 사용하여 access token을 자동 갱신 시키고 사용자가 만료를 알아차리지 않고 자연스럽게 서비스를 이어 나가게 하려면 어떻게 해야할까? 해결법 axios interceptor를 사용하여 response 단에서 error를 받았을때 http 상태 코드를 파악해서 refresh token을 이용하여 access token을 갱신시키는 api를 사용하고 갱신된 access token으로 오류 처리된 api를 return시켜 실행시켜주면 된다. 하지만.. Web/React 2024. 4. 13.

• Context API vs Redux Context API와 Redux의 쓰임에 대해 설명한 블로그 글을 읽어보았다. https://blog.isquaredsoftware.com/2021/01/context-redux-differences/ Blogged Answers: Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux) Definitive answers and clarification on the purpose and use cases for Context and Redux blog.isquaredsoftware.com Q Is context a “state management” tool? - context가 상태관리 도구인가? A 아니다.. Web/React 2024. 4. 3.

• [React] input 태그의 value값 쉽게 바꾸기 const [userData, setUserData] = useState({ name : "", email : "" }) const changeHandler = (e) => { const { name, value } = e.target setUserData({ ...userData, [name] : value }) } {changeHandler(e)}} /> input 컴포넌트를 따로 만들어 관리할 때도 편하다 Web/React 2024. 1. 12.

• [react-query] useMutation의 실행 순서? const [tempState, setTempState] = useState(1); const tempMutation = useMutation(data => console.log(tempState)) // 결과는 바뀐 state값이 적용됨 { setTempState(prev => { return prev + 1; }); tempMutation.mutate(); }}> test tempMutation의 파라미터로 직접 넘기면 당연히 상태 변화가 일어나지 않는다. 공부할게 많다.. Web/React 2024. 1. 9.