Mutation은 데이터를 읽는게 아닌 변경하는 로직에 대한 내용이다.CREATE UPDATE, DELETE의 역할을 수행한다.mutate 함수를 반환한다.캐싱할 필요가 없으므로 쿼리 키를 사용하지 않는다.캐시가 존재하지 않으므로, isFetching이 없다.retry

비동기 요청은 받아오는 속도가 느리고, 데이터 양이 방대할수록 오래걸린다.사용자 경험을 위해 데이터를 미리 받아 캐싱해놓으면, 새로운 데이터를 받기 전에 사용자가 캐싱된 데이터를 볼 수 있어 UX에 큰 영향을 끼친다.데이터를 미리 캐싱해준다.기본 값으로 즉시 stale

Pagination

블로그 사이트 최적화 1. LightHouse 툴을 활용한 페이지 검사 Category 무엇을 위한 검사를 할지 항목을 선택 가능 Device 기기를 선택할 수 있음. Mobile Desktop Plugins 커스텀 플러그인 세팅 가능 G

React Native의 동작 원리React Native는 javascript기반의 마크업 언어를 iOS와 안드로이드 코드로 변환해 준다.react native는 bridge를 통해 안드로이드, ios에 요청을 보낸다.앱을 만들기 위해서는 JavaScript, Mark

Recoil, 왜 사용할까? Context API는

React Query는 서버 상태를 관리하기 위해 아래와 같은 다양한 기능들을 지원한다.로딩 및 에러 처리페이지네이션 / 무한 스크롤데이터 요청데이터 사전 요청(Prefetching)데이터 수정 및 업데이트(Mutations)중복 요청 제거기존의 쿼리가 출력되는 동안

전역에서 상태를 관리하는 Redux는 캐싱하는 개념이다.그러나 정말 클라이언트(리액트)에서 수행하는 상태 관리로도 충분할까? No No예시모달의 오픈 여부토큰값을 가지고 있는지(JWT)인풋에 입력한 값의 상태 관리다른 사람들과 페이지에서 데이터를 공유하는 경우엔 서버에

1. JSX의 한계 JSX는 단 하나의 요소만 반환할 수 있다. 이 특성을 이용해 아래와 같은 방법들로 반환이 가능하다. div태그로 묶어주기 여러 복합 요소들을 리스트 형태로 넘겨주기 wrapper 컴포넌트 만들기 div 태그로 묶을 때는 아래와

리액트에서는 동적으로 스타일 클래스를 추가하고 제거할 수 있다.아래의 코드를 보면, input태그에 값이 들어오지 않은 채로 제출을 누르면 invalid라는 css클래스가 동적으로 추가되며 빨간색으로 input과 label 태그를 바꿔준다.그리고, 입력이 들어올 때마다

부모 컴포넌트는 props를 통해 데이터를 전달한다. 그렇다면 자식은 어떻게 데이터를 부모에게 전달할까?아래와 같이 하면 된다.부모 컴포넌트에서 자식 컴포넌트의 데이터를 받아올 함수를 만들어 props로 넘긴다자식 컴포넌트가 받은 함수에 데이터를 인자로 받는다.인자로

리액트에서 양방향 바인딩은 어떻게 구현할까?아래와 같이 값이 입력되어 onChange속성으로 상태 값을 변경시킴과 동시에 value를 userInput의 상태로 설정해준다.그러면, input이 바뀔 때는 userInput 값이 바뀌고, 반대의 경우에도 value로 인

useState를 객체로 다루는 옳은 방법을 알아볼 것이다.useState의 두 번째 인자는 무조건 그 안의 값으로 대체한다.그 원리를 이용해 현재 첫 인자인 userInput을 가져와서 사용하게 된다.그런데 비동기 작업 등 여러가지 상태 업데이트가 계획되어있다면, 잘

JSX는 리액트에서 사용하는 UI를 정의할 때 사용하는 도구다.JSX는 HTML 문법과도 같은 형태를 가졌지만 실제로는 JavaScript로써 export되는 동작 방식을 가지고 있다.이는 브라우저에서 번들링되는 과정에서 Babel을 사용해 일반 JS 문법으로 변환해준

div 태그로 감싸 리액트 컴포넌트를 전달해주는게 기본적이다.하지만 박스의 역할을 하는 Sidebar, Card, Box, Dialog 등은 모두 각각의 컴포넌트 틀 및 스타일, 기능을 가지고 있다.그렇게 div의 역할을 대신해 감싸주는 wrapper의 역할을 하는 컴

Enum은 특정 값들의 집합을 의미하고 타입을 지정해줄 수 있다.함수에서 인자를 받을 때, 타입을 enum으로 지정할 시, enum 내부의 속성만을 호출할 때, 인자로 받을 수 있다. 아래와 같이 Answer객체를 타입으로 지정하면, Answer내부의 Answer.Ye

인터페이스는 커스텀 타입을 정의 및 상속을 통해 확장할 수 있고 재사용성이 높다.인덱싱이나 딕셔너리 패턴과 같이 key 혹은 value에 타입을 지정해주고 그 값에도 타입을 지정할 수 있다.

다른 타입에 해당할 경우는 빨간 줄을 표시한다.튜플은 모든 값에 타입을 각각 지정해준 배열임.객체는 내부에 속성 타입을 지정하지 않아도 상관이 없음.

현재는 싱글스레드의 특성상 한 작업이 끝나면 다음 작업으로 넘어가는 식으로 작업한다. 하지만 한꺼번에 병렬적으로 연산하면 부하는 커지지만 훨씬 빠른 속도로 처리할 수 있다.기존의 reduce는 배열의 하나씩 꺼내서 acc에 더해주는 식으로 연산했다면, C.reduce는

take와 map은 기본적으로 Promise를 이용해 비동기로 처리해주는 로직이 내부에 필요하다.그렇기에 map에서는 받은 함수를 Promise인지 판별해 then을 통해 값을 가져올 수 있게 해줘야하고, take 또한 마찬가지로 비동기 상황에서 연산의 순서를 보장하는