TanStackQuery 설치하기 1. npx create-react-app .2. npm install @tanstack/react-query기본 설정import { QueryClient, QueryClientProvider } from '@tanstack/react-query';import HomePage from './HomePage';const queryClient = new QueryClient();function App() { return ( );}export default App; QueryClientProvider를 통해 App 컴포넌트의 자손 컴포넌트에 전달해 주었는데요.React Context를 배울 때 리액트 Context에서도 데이터를 전역적으로 사용하기..

TanStackQuery 개요 및 기능    서버 상태(Server State)서버 상태 데이터는 몇 가지 특징을 가지고 있습니다. 먼저 서버에서 데이터를 받아오기까지 시간이 걸리죠? 그래서 우리는 이렇게 데이터를 받아오는 걸 비동기식으로 구현합니다. 실제로 데이터를 받아 오기까지 플레이스 홀더를 보여주거나 혹은 로딩 처리를 하곤 합니다. 때로는 데이터를 받아 오는 과정에서 에러가 생길 수도 있어요. 그럴 때 이런 에러 상황을 어떻게 처리하고 어떤 식으로 유저에게 안내해 줄 것인지에 대한 고민도 필요합니다. 또한 서버 상태 데이터는 가능한 최신 상태로 유지되어야 하는데요. 데이터를 한 번 받아 오면 끝나는 게 아니라, 최신 데이터를 가능한 한 계속 받아 와야 하죠. 여기서 '가능한'이라고 표현한 이유는 ..

HTTP 상태 코드 요약 정리    ❗️첫 번째 자리 숫자에 따라 다음과 같이 5가지로 분류해서 사용하고 있음1XX: Informational(정보 제공)임시 응답으로 현재 클라이언트의 요청까지는 처리되었으니 계속 진행하라는 의미입니다. HTTP 1.1 버전부터 추가되었습니다.2XX: Success(성공)클라이언트의 요청이 서버에서 성공적으로 처리되었다는 의미입니다.3XX: Redirection(리다이렉션)완전한 처리를 위해서 추가 동작이 필요한 경우입니다. 주로 서버의 주소 또는 요청한 URI의 웹 문서가 이동되었으니 그 주소로 다시 시도하라는 의미입니다.4XX: Client Error(클라이언트 에러)없는 페이지를 요청하는 등 클라이언트의 요청 메시지 내용이 잘못된 경우를 의미합니다.5XX: Serv..

JavaScript: padStart(), padEnd()   ❗️기본 문법str.padStart(targetLength[, padString])str : 문자열targetLength : 목표로 하는 문자열 길이를 적음, 이 길이에 맞게 문자열이 채워질 수 있음padString(옵션) : 필요한 경우 채우기에 사용할 문자열임, 기본값은 공백 문자열(' ')이다.  ❗️padStart() padStart 함수는 문자열의 앞부분을 특정 길이로 채우는 역할을 함 예시코드const str = "123";const paddedStr1 = str.padStart(7, "0");console.log(paddedStr1); // 출력 : "0000123"const paddedStr2 = str.padStart(10)..

JavaScript: 논리 연산자 정리    & : 비트 연산자비트의 논리 합을 하는 연산자 && :  논리곱 연산자&&는 모든 조건이 참이여야 true  || :  논리합 연산자||는 둘중 하나가 참이면 true  >  : 비트 이동 연산자왼쪽, 오른쪽으로 비트를 밀어내는 연산자  !   , !!  : 부정 연산자! :  입력값을  boolean으로 변환하는데, true이면 false로 , false이면 true로 값을 반대로 반환한다.!! : boolean타입으로 명시적으로 형 변환   ?. : 옵셔널 체이닝객체의 속성이 없는 경우, typeError가 발생하지 않고 undefined가 반환됨  ?? : Null 병합 연산자앞에 오는 값이 null 또는 undefined이면 뒤에오는 값을, 아니면 n..

TypeScript 공부일지: 인터페이스 선언 합치기    ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음  ❗️인터페이스 선언 합치기/** * 선언 합침(선언 머지) (declaration merging) */// 예전에 타입 별칭을 똑같이 두번쓰면 오류 난다고 배움// interface는 타입 별칭과 달리 이름 똑같아도 오류 안남// 이유: 동일한 이름으로 선언된 interface는 결국 모두 합쳐짐 -> 이러한 현상을 선언 합침이라고 부름interface Person { name: string;}interface Person { // name: number; 동일한 프로퍼티를 중복정의하는데 타입을 다르게 정의하는 경우를 충돌이라함 (오류) name: string; ..

TypeScript 공부일지: 인터페이스 확장 ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음  ❗️인터페이스 확장/** * 인터페이스 확장 * 타입 별칭은 없고 인터페이스에만 있는 특별한 기능 - 인터페이스 확장 */// name, age 프로퍼티가 4번중복 비효율적이고 메인 프로퍼티 바꾸면 서브 프로퍼티도 전부 바꿔줘야 함// 이럴때 인터페이스 확장을 사용함// 사용하는법// 1. 서브 프로퍼티에서 Animal 프로퍼티와 중복된 프로퍼티를 제거// 2. 중복되는 Animal 타입의 프로퍼티를 받아오면됨// 2-1 Dog 라는 이름 옆에 extends 적고 그 옆에 Animal을 적으면 됨 (extends: 확장하다)// 이렇게 extends를 이용해서 다른 interace..

TypeScript 공부일지: 인터페이스    ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음  ❗️인터페이스/** * 인터페이스 * - 타입별칭과 동일하게 타입의 이름을 지어주는 문법임 * ex) * type = { * a: string; * b: number; * } 이거를 * interface A { * a: string; * b: number; * } 이렇게 바꿀 수 있음 * - 인터페이스라는 뜻은 상호간에 약속된 규칙을 뜻 함 * - 예를들어 이 객체는 이런 형태를 가져야해! 와 같은 일종의 약속 또는 규칙을 만들어 주는 문법이라고 생각 * - 그리고 인터페이스는 객체 타입을 정의하는데 특화된 문법임 * - 그렇기 때문에 타입별칭에서는 제공하지 않는 상속이나 ..

TypeScript 공부일지: 사용자 정의 타입가드   ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음  ❗️사용자 정의 타입가드/** * 사용자 정의 타입가드 */type Dog = { name: string; isBark: boolean;};type Cat = { name: string; isScratch: boolean;};type Animal = Dog | Cat;function isDog(animal: Animal): animal is Dog { // 원래 이건데 animal.isBark !== undefined; 타입이 잘안좁혀지므로 타입 단언하면됨 // 하지만 TS는 함수의 반환값을 가지고는 타입을 잘 좁혀주지 않음 // 이럴때는 함수 자체를 타입 ..