chez Manon

useIsFetching In smaller apps - useQuery의 isFetching을 사용한다. In a larger apps - 모든 query에서 isFetching 상태일 때 Loading spinner 등 을 사용하여 fetching중임을 나타낸다. - useIsFetching을 사용하면 각각의 useQuery call에 isFetching을 사용할 필요가 없다. fetching중이 아니라면 0을 반환하고, fetching중이라면 진행중인 query의 number를 반환한다. [Loading spinner 컴포넌트에서 useIsFetching 이용예시] import { useIsFetching } from 'react-query'; export function Loading(): Rea..

Basic Test - Test interactivity using fireEvent - Jest-dom assertions : toBeEnabled() : toBeDisabled() : toBeChecked() - getByRole option { name : } - Jest describe to group tests 테스팅 라이브러리를 위한 ESLint와 Prettier 설정 ESLint ESLint는 JavaScript에서 흔히 사용되는 Linter이다. Linter : 정적 텍스트(static text)를 분석하고 linter 규칙을 위반하는 구문을 마킹하는 도구이다. static : 코드가 작성된 그대로의 '정적'인 코드 분석을 한다. (코드가 어떻게 '실행되는지'에 대해서는 분석을 하지 않음)..

하단의 다크모드 버튼을 누르시면 좀 더 편안하게 보실 수 있습니다. Recoil React의 기존의 상태관리 라이브러리 component state는 공통된 상위요소까지 끌어올려야 공유가능 → 거대한 트리가 re-render 될 수 있다는 단점 Redux → 기본적인 store 구성을 위해 많은 보일러 플레이트와 많은 코드를 작성해야하는 단점 Context → single value만 저장할 수 있으며, 자체 consumer를 가지는 여러 값들의 집합을 담을 수 없다는 단점 이러한 단점을 해결하는 방안으로 facebook에서 만든 상태관리 라이브러리가 Recoil이다. Recoil의 장점 1. 쉽다. 2. 비동기 데이터 흐름을 위한 내장 솔루션 제공 3. React 동시성 모드(Concurrent Mod..

TDD Test-Driven Development (TDD) : 테스트 주도 개발 테스트 코드를 마지막에 작성 하지않고, 코딩 프로세스의 일부에 통합시키는 방식이다. 개발할 때 모든 테스트를 작성해두어서, 변경사항이 생길 때마다 모든 테스트를 다시 실행해서 자동 회귀(for free) 테스트를 할 수 있다. 코드 작성 전에 테스트를 작성하고, 테스트에 통과하도록 코드를 작성한다. red-green test : 코드작성 전 fail test code (red) → 코드 작성 success test code (green) Behavior Driven Development (BDD) : 행동 주도 개발 사용자의 app사용 방식 테스트를 권장하며 행동을 테스트하는 것이다. 다양한 역할 간의 협업이 필요하다. (..

React Query - Stale time / Cache time / Refetching / Prefetching 1) React Query 사용 기본 2) isFetching vs isLoading 3) Devtools 개발자 도구 4) Stale Time 5) Refetching 6) Prefetching React Query란? server data cache를 관리 React 코드에 server data가 필요할 때 fetch나 axios를 통해 서버로 바로 이동하지 않고 React Query cache를 요청 ✔️ react query의 역할 클라이언트를 어떻게 구성했느냐에 따라 해당 캐시의 데이터를 유지관리 데이터를 관리하는 것은 react query이지만, 서버의 새 데이터로 캐시를 업데이..

React Hook Form React Hook Form을 사용하는 이유 validation을 쉽게 구현할 수 있다. error를 쉽게 설정하고 초기화 할 수 있다. event를 하나하나 신경쓰지 않아도 된다. 코드의 양을 줄일 수 있다. (반복되는 코드를 줄일 수 있다.) Form 우선 비교를 위해서 React hook form 없이 기본 react만으로 코드를 짜본다. 기본적으로 username, pw, email을 입력하는 input을 만들고, 각각 onChange함수를 만들어주고 submit을 하게 한다. //기본 form으로 짠 코드 export default function Forms() { const [username, setUsername] = useState(''); const [emai..

What is "Redux" ? 🔻 A state management system for cross-component or app-wide state. ✔️ state를 3종류로 크게 나눌 수 있다. 1. Local state : 하나의 컴포넌트에 종속되는 state 2. Cross-Component state : 하나 이상의 컴포넌트에 영향을 미치는 state(prop drilling) 3. App-Wide state : app전체의 기본적인 모든 컴포넌트에 영향을 미치는 state 🤷🏻‍♀️ React Context도 있는데 왜 Redux? context API의 단점 > 대규모의 app작업 시 state관리를 위해 : 수많은 context provider 컴포넌트가 중첩되어 복잡해진다. : prov..

How does react work? React : A JavsScript library for building user interfaces. React는 component로 UI를 효율적으로 구축하고 업데이트한다. React는 component와 state를 관리하는 라이브러리일뿐이다! 컴포넌트들을 관리하고, 컴포넌트의 props, state, context가 변할 때 마다 그것을 쓰는 component를 update하고 컴포넌트가 화면에 새로운 내용을 띄우려는지 확인한다. 새로운 내용이 있으면 react가 reactDOM으로 전달해서 DOM이 새로운 화면, 즉 새로운 component를 화면에 띄운다. ( DOM : html을 계층구조화하여 트리구조로 만든 객체 모델이다. DOM을 활용하여 Java..

Carousel 캐러셀 슬라이더는 일반적으로 이미지를 옆으로 넘기며 정보를 확인할 수 있는 방식이며, 많은 웹페이지에서 더 나은 사용자 경험을 위하여 자주 사용된다. 라이브러리를 사용하면 보다 쉽게 구현이 가능하지만 vanilla JavaScript로도 충분히 가능하다. 이번에는 React hooks의 useState, useEffect, useRef와 styled components로 무한반복 슬라이드를 구현해보려고 한다. setting npx create-react-app react-carousel npm install --save styled-components Slide component Carousel component의 요소가 되는 slider component를 만든다. import Rea..

useRef ref (reference) 1. 특정 DOM을 선택하고 싶을 때 사용한다. 2. 컴포넌트가 re-rendering될 때마다 기억하고싶은 값을 저장할 때 사용한다. useRef에서 관리하는 값은 바뀌어도 re-rendering되지 않는다. ( setTimeout, setInterval의 id, 외부라이브러리를 사용하여 생성된 인스턴스 scroll위치 등) React는 내부의 상태(state)를 '신뢰 가능한 단일 소스(Single Source of Truth)'로 관리하려고 한다. ( 데이터는 부모에서 자식으로 props로 전달 ) 따라서 HTML element중 자체적으로 특정 data를 가지는 태그의 등은 state로 값을 관리하는데, 이처럼 내부상태가 react에 의해 제어되는 것을 C..