1. useMutationReact Query 라이브러리에서 제공하는 훅으로, 서버에 데이터를 생성, 수정, 삭제하는 비동기 작업을 간단하고 효과적으로 처리할 수 있도록 도와준다. 주로 POST, PUT, DELETE 요청과 같은 작업에 사용되며, React 상태 관리와 결합하여 데이터 갱신 및 UI 업데이트를 효율적으로 처리한다. 1-1. 주요 특징비동기 데이터 조작: 데이터를 서버에 전송하거나 수정하는 작업을 처리한다.상태 관리isLoading: 요청이 진행중인지 나타냄isError: 요청이 실패했는지 나타냄isSuccess: 요청이 성공했는지 나타냄옵션을 통한 제어성공 또는 실패 시 호출되는 콜백 함수를 설정할 수 있음(onSuccess, onError 등)자동 리패치데이터 변경 후 React Qu..

1. React useQueryReact Query에서 제공하는 훅으로, 서버에서 데이터를 가져오고 이를 관리하는 강력한 도구이다. 비동기 데이터 패칭, 캐싱, 업데이트, 에러 핸들링 등을 간편하게 처리할 수 있다. 1-1. 주요 특징비동기 데이터 패칭데이터를 서버에서 가져오기 위해 사용된다. 내부적으로 데이터를 자동으로 가져오고 캐싱한다.캐싱 및 데이터 일관성같은 키(queryKey)로 요청하면 이미 캐싱된 데이터를 사용하고, 필요 시 다시 패칭한다.자동 갱신 및 리패치데이터를 갱신하거나 특정 조건에서 자동으로 다시 요청한다.로딩 및 에러 상태 관리데이터 로드 상태, 에러 발생 여부를 간단하게 확인할 수 있다. 1-2. 기본 사용법import { useQuery } from '@tanstack/rea..

1. Interceptor 의 동작 원리1-1. 요청 인터셉터(request interceptor)API 요청이 서버로 전송되기 직전에 실행된다.주로 공통 헤더 추가, 인증 토큰 첨부, 요청 데이터 가공 등의 작업에 사용된다.apiClient.interceptors.request.use( (config) => { console.log('Request sent:', config); return config; // 요청 전 로직 추가 }, (error) => { return Promise.reject(error); // 요청 에러 처리 }); 1. config요청 객체를 나타낸다. 여기에는 method, url, headers, params 등이 포함된다.요청을 보내기 전에 잉 객체를..

1. Axios InstanceAxios Instance는 Axios를 설정하고, 재사용 가능한 설정을 가진 HTTP 클라이언트를 만드는 방식이다. 일반적으로 API 요청을 보낼 때 공통으로 필요한 설정(예: 기본 URL, 헤더, 인증 정보)을 매번 지정하지 않고 인스턴스에서 설정해두고 사용할 수 있다. 2. Axios instance 생성 방법import axios from 'axios';// Axios instance 생성const apiClient = axios.create({ baseURL: 'https://api.example.com', // 기본 URL 설정 timeout: 5000, // 요청 제한 시간 (ms) headers: { 'Content-Type': 'applicatio..

1. Tagged Template Literal 기본 구조tagFunction`문자열 ${expression} 문자열`; tagFunction : 템플릿 문자열을 처리하는 함수문자열 ${expression} : 템플릿 리터럴로 표현되는 문자열태그 함수는 템플릿 리터럴의 문자열과 삽입된 표현식을 분리하여 전달받아 가공한 결과를 반환한다. 2. 사용법const userName = '무지';const weather = '맑음';const str = `안녕하세요. ${userName}님, 오늘 날씨는 ${weather} 입니다.`;const result3 = sayHello(['안녕하세요. ', '님, 오늘 날씨는 ', ' 입니다.'], userName, weather); 원래 사용하고자 하면 위와 같이, 배열..

1. concatconcat은 두 개의 문자열을 하나의 문자열을 만들어주는 역할을 하는 함수이며, 입력값을 문자열 대신 배열을 사용하면 두 개의 배열을 하나의 배열로 만들어주는 역할도 하는 함수이다. 2. 합치기[문자열].concat([문자열])[배열명].concat([배열명]) 3. 예시 const arr1 = new Array ("배열 1", "배열 2"); const arr2 = new Array ("배열 3", "배열 4"); const arr = arr1.concat(arr2); // ['배열 1', '배열 2', '배열 3', '배열 4'] 4. React에서 사용이는 기존 배열을 수정하지 않고, 새로운 배열을 반환한다.이는 불변성을 유지한 상태에서 값을 수정할 수 있다. 즉 원본은..