Tanstack Query 쿼리 무효화 추상화

Automatic Query Invalidation after Mutations | TkDodo's blog

Even though there is nothing built into React Query, it doesn't need a lot of code to implement automatic query invalidation in user-land thanks to the global cache callbacks.

심윤섭: Tanstack Query에서 Mutation 이후 Query Invalidation 자동화를 추상화하는 과정을 통해 Tanstack Query에 기본값으로 Mutation 이후 Query Invalidation 자동화를 구현하는 것은 쉽지만 모든 상황을 대응하도록 추상화하는 것은 어렵다는 것을 알려줍니다. 그리고 invalidateQueries와 callback에 대한것도요!

RSC의 함정

Combining React Server Components with react-query for Easy Data Management – Frontend Masters Boost

Server-side component rendering can improve data loading efficiency over client-rendered SPAs. Despite their benefits, such as out-of-order streaming, they have limitations, including slow server action updates and lack of support for client-side interactivity. React Query complements RSC by managing client-side data updates, addressing some of RSC's drawbacks.

심윤섭: 저자는 Next.js의 RSC 구현에서 캐시 동작이 이상하다는 것을 알려줍니다(그리고 Server Action이 순차적으로만 동작한다는 것도요 - 물론 의도된 동작이라고는 하네요). 그리고 그의 대안으로 클라이언트의 @tanstack/query와 @tanstack/react-query-next-experimental을 추천합니다. 번들 사이즈가 늘어나도 UX가 강화되는 이점을 강조하면서요. 이전에 Next.js App Router는 시기상조다 글을 읽었을 때와 비슷하게 Next.js의 많은 곳에서 동작이 잘 되지 않아 보여서 아쉽네요.

디자인 시스템 회고

Design System Retrospective | Kyle Shevlin

I built a cross platform (React & React Native) design system at my last company. I'm in the middle of building another one for a client. Let me tell you what I learned, decisions I regret, and what I'm doing differently this time.

심윤섭: 저자가 한 회사의 디자인 시스템을 만들게 되면서, Chakra UI와 비슷한 합성 컴포넌트 방식으로 만들었는데, 실패한 경험을 회고한 글입니다. 이전에 가져온 진화하는 디자인 시스템에도 보였듯이, 여러가지 접근 방식이 있고, 회사에서 선호하는 방식에 맞게 구현하는 것이 중요하다고 생각합니다. 적당한 내부 개발자를 상대로 한 마케팅과 문서화도요.

React Aria의 장단점

Migrating from Radix to React Aria: Improving Accessibility and UX

We migrated from Radix and Ariakit to React Aria to enhance accessibility, improving keyboard navigation, screen reader support, and overall user experience.

심윤섭: React Aria의 다양한 방식(진화하는 디자인 시스템과 같이 React spectrum / React Aria - React Stately로 제공중입니다.)으로 접근성 좋은 컴포넌트를 제공하는 것은 매우 좋다고 생각합니다. 저자도 그렇게 생각하여 UI 라이브러리를 React Aria로 바꾸기로 결정하였고, 진행하면서 겪은 장단점을 소개합니다. 저도 UI 방식을 React Aria식으로 변경해야 하지만, 수많은 접근성을 대신 만들어준다는 점에서 좋은 라이브러리라고 생각합니다. 문서화도 꽤 잘 되어있구요.

GraphQL은 정말 쓰레기인가요?

GraphQL Is a Superpower for Your Product Manager and Designer - Jeff Auriemma, Apollo GraphQL | GraphQLConf 2023

Good tools help get a job done faster and better. Great tools transform the entire end-to-end workflow from concept to deployment. GraphQL, an open standard and protocol for APIs, is both good and great. It allows your designer to explore the full capabilities of your data so they can conceive of the best user experience possible. GraphQL allows your engineers to say “three weeks” to your product manager where they would have said “two months” before. These enhancements have a practical impact on the relationships that are the foundation of your cross-functional team’s success. In this talk I’ll address some of the challenges product teams face as their understanding of the end user starts to outpace their ability to ship new features (which is healthy). Then, I will give some concrete examples where GraphQL can make a difference. A/B tests and designer productivity will be covered, all drawn from my experiences in both IC and EM roles on product engineering teams. For each of these scenarios I’ll show how GraphQL principles and tooling can give your team a practical advantage.

심윤섭: 6년동안 GraphQL을 써보고 GraphQL를 버린 이유를 보고 생각이 들어서 GraphQL의 도입이 디자이너와 PM에게 어떠한 좋은 점을 가지는지 발표한 영상을 가져왔습니다. 사실 이전에 가져온 당신은 GraphQL이 필요하지 않습니다가 더 넓은 시야를 가질 수 있도록 돕는 글인 것 같지만.. 이미 가져왔으니까요 :) Database에서 직접 GraphQL API를 만드는 Hasura, GraphQL 관련된 툴을 제공하는 Apollo와 The Guild, 보안을 제공하는 Escape(GraphQL 보안을 알려주는 사이트도 만들었네요!)… 여러 툴이 많으니 자신에게 맞는 툴을 알맞게 쓰는게 중요하겠네요.

React에서의 메모리 누수

Sneaky React Memory Leaks: How useCallback and closures can bite you | Kevin Schiener

Avoid performance issues caused by memory leaks in your React applications by understanding closures, useCallback, and best practices.

심윤섭: memoization에서 Closure으로 두개의 함수 외부 변수를 가졌을 경우 발생하는 메모리 누수를 설명한 영상입니다. 이러한 상황(두 개 이상 외부 함수를 한 곳에서 memoization하는 상황)을 많이 마주치진 않겠지만 이를 위해 변수의 유효범위와 클로저 문서를 통해 클로저에 대해 알아둘 필요는 있겠네요.