전체 글

Query는 data fetching으로 받은 비동기 데이터이다.(GET)Mutation은 그 데이터를 업데이트하는 액션이다.(POST, PUT, DELETE) Mutation이 끝나면 대부분 Query에도 영향을 줄 것이다.예를 들어, `issue`데이터를 업데이트 하면 상위 개념인 `issues` 데이터에도 영향을 준다.따라서 React Query가 Mutation과 Query를 연결하지 않는다는 사실에 놀랄 수도 있다. 그 이유는 꽤 단순하다.React Query는 개발자에게 데이터를 맘대로 관리할 수 있도록 자유를 준 것이다.모든 상황에서 Mutation 이후 re-fetching(invalidation)이 필수는 아니다.예를 들어 Mutation api가 업데이트된 데이터를 반환해준다면, 그 데..

타입스크립트를 사용하는건 좋은 생각이다. 타입 안전을 싫어하는 사람이 있을까?버그를 미리 알 수 있고, 복잡한 앱의 구조를 타입으로 정의하여 그 부분들은 우리 머리 속에 담아둘 필요가 없어진다. "타입을 선언"한 것과 "타입 안전"한 것은 큰 차이가 있다.타입스크립트의 진정한 힘을 이용하려면 한 가지가 더 필요하다.신뢰하기우리는 타입 정의를 신뢰할 수 있어야한다.그렇지 않으면 타입은 단순 제안에 불과하고, 정확하다고 믿을 수 없다. - 가장 엄격한 타입스크립트 설정을 활성화하자.- typescript-eslint를 추가하여 `any`타입과 `ts-ignore`를 금지하자.- 타입 단언을 지양하자.제네릭타입스크립트에서 제네릭은 필수적이다.조금이라도 복잡한 걸 구현하려면 제네릭을 사용해야할 것이다. (라이브..

useQuery나 QueryClient.invailidateQueries 등 다양한 react-query 메서드에 파라미터로 넘겨주는 객체를 Query Options라고 부른다.// v5전에도 객체 형태로 넣을 수는 있었지만 이처럼 파라미터를 순서대로 넣는 방식이 널리 쓰였다.- useQuery(- ['todos'],- fetchTodos,- { staleTime: 5000 }- )// v5 부터는 객체 형식이 강제되었다.+ useQuery({+ queryKey: ['todos'],+ queryFn: fetchTodos,+ staleTime: 5000+ })이렇게 객체 형태를 파라미터로 넘겨주는 방식은 v5부터 강제되었는데, 어떤 이유 때문일까?1.  더 나은 추상화 (재사용) 모든..

나는 React Query를 좋아한다. React Query가 React앱에서 비동기 상태를 다루는 방식을 단순화하기 때문이다. 하지만 가끔 서버에서 데이터를 페칭해오는 것처럼 "간단한" 작업에는 React Query가 필요하지 않다고 주장하는 글들을 볼 수 있다.React Query가 제공하는 모든 추가 기능이 필요한 것은 아니니까, useEffect 안에서 fetch를 사용하는 것만으로도 충분할 때 굳이 서드파티 라이브러리를 추가하고 싶지 않다는 것이다. 이는 어느 정도 맞는 말이다.React Query는 캐싱, retry, polling, 데이터 동기화, prefetching 등 많은 기능을 제공한다.이러한 기능들이 필요하지 않다면 괜찮지만, 그렇다고 해서 React Query를 사용하지 말아야 한..

읽게 된 계기지금 다니고 있는 회사에서는 독서를 매우 권장한다.되도록 많은 구성원들을 독서 문화에 참여시키기 위해 노력한다.심지어 3주가량 되는 온보딩 때 8권을 책을 읽었어야 했다.그 3주 동안은 독서만 하고, 일은 하지 않아도 된다. 아니 일을 안 준다. 그만큼 독서에 진심인 회사이다.어쨌든 우리 회사에서는 매달 두 권씩 책을 읽는 모임이 있는데, 그 모임의 온보딩 도서가 김봉진의 "책 잘 읽는 방법"이다.그 모임에 합류하면서 이 책을 읽어보게 되었다.술술 읽힌다온보딩 도서를 읽으면서 사실 글이 잘 읽히지 않았다.읽었던 문장을 다시 읽고 또 읽고를 반복하면서 내가 집중력에 문제가 있나 의심도 했다.근데 이 책은 좀 달랐다.페이지 상위 50%만 글이 작성되어 있었고 그 아래는 텍스트가 없었다. 또 기분..

전반적으로 관리자는 어떻게 생각하면서 일하는지, 관리당하는 입장에서 어떤 자세를 취해야 하는지 알 수 있었다.책에 있는 많은 내용을 읽으며 요즘 관심이 가는 주제에 대해 드문드문 감상을 적어보았다.내 능력을 넘어서는 일먼저 처리능력을 넘어서는 일은 거부해야 한다는 문장이 와닿았다. 업무에 투입된지 이제 한달째가 되어 가는데, 작업 티켓을 가져갈 때 가장 어려운 일을 하고싶다는 욕심이 생기곤 했다. 이해도가 낮은 지금 그 일을 가져가서 실패한다면 손실이 클것이고, 해결하더라도 시간이 많이 걸릴 것이라고 생각했다. 하지만 반대로 늘 하던, 자신있는 작업만 하지않도록 경계해야겠다.일대일 면담일대일 면담은 상사와 정보 교환을 할 수 있는 중요한 창구이다. 또한 업무를 하면서 생기는 이슈를 솔직하게 터놓을 수 ..

폰트 스타일을 적용한 div 태그로 감싸주자. 원인은 아마 `rem` 계산을 편하게 하기위해 글로벌 `html` 폰트 사이즈를 `10px`로 설정해서 그럴 확률이 높다. 전역 폰트 사이즈를 크게 설정했다면 반대로 커졌을듯..

1. 쿼리 상태와 페치 상태 React Query는 현재 상태를 알려주는 플래그를 제공한다. 내부 상태 머신에서 파생된 여러가지 boolean 플래그 값을 제공하는데, 선언된 타입을 보면 `쿼리`상태, `페치`상태가 각각 3가지씩 존재한다. `쿼리`상태 : 데이터(캐시)에 대한 정보 `success`: 쿼리가 성공했고, 이에 대한 `data`가 쿼리캐시에 설정된다. `error`: 쿼리가 실패했고, `error`가 설정된다. `pending`: 쿼리캐시에 데이터가 없다. `페치`상태: Fn에 대한 정보 `fetching`: `queryFn` 요청이 실행중이고 데이터를 기다리고 있다. `paused`: `queryFn`, `mutationFn` 이 실행중이지 않고 다시 인터넷에 연결될 때 까지 일시중지된 ..