React Hook Form 공부 - 2 React-Hook-Form의 Devtool 설치하기 npm i -D @hookform/devtoolsyarn add -D @hookform/devtools 적용법useForm() 이 사용되는 곳에 아래와 같이 Devtool 컴포넌트를 삽입하면 됩니다.import { useForm } from 'react-hook-form'import { DevTool } from '@hookform/devtools'let renderCount = 0export default function MyForm() { const { register, control } = useForm() renderCount++ return ( Render count : {ren..

React Hook Form 공부 - 1 설치npm i react-hook-formyarn add react-hook-form  useForm 사용하기react-hook-form과 HTML의 form 요소인 input과 button 등을 연결 시켜주는 함수가 바로 register 함수입니다. import { useForm } from "react-hook-form";export default function MyForm() { const form = useForm(); const { register } = form; // 한 줄로 쓰려면 아래와 같이 하셔도 됩니다. // const { register } = useForm(); ... ...} register 함수를 이용해..

query, useQuery란?    쿼리란?리액트 쿼리를 이용해 백엔드로부터 데이터를 받아오는 방법을 공부 했습니다. 백엔드로부터 데이터를 받아오기 위해 우리는 리액트 쿼리에서 제공하는 useQuery()라는 훅을 사용할 겁니다. 여기서 쿼리란 '문의하다, 질문하다'라는 뜻을 가지고 있는 단어인데요! 데이터베이스 같은 것에 우리가 필요한 데이터를 요청하는 것을 말합니다. useQuery()는 필요한 데이터를 백엔드에 요청해서 받아 오는 React Hook입니다. useQuery()사용법import { useQuery } from '@tanstack/react-query';import { getPosts } from './api';function HomePage() { const result = use..

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; ..