OTW for FE

Tanstack-Query 더 잘 쓰기

2024. 4. 17.

Tanstack-Query 더 잘 쓰기

TanStack Query Docs
Exploring using Suspense with React Query
Learn how I explored using Suspense with React Query and what issues I encountered and how I solved them.

심윤섭: 서버 상태 관리를 Tanstack query에 위임하는 것으로 쉽게 효율적으로 렌더링 최적화를 이뤘지만 이미 너무 많은 상태를 관리하고 있어 더 최적화가 필요한 사람들이나, 사소하지만 불편한 UX를 제공하는 것을 막고자 하는 사람들에게 조언하는 글입니다. 둘 다 hook에 넣는 속성을 어떻게 잘 넣을 것인지를 생각해보게 하는 글이기 때문에 Tanstack-query를 쓰는 사람은 무조건 보시길 바랍니다.

김대관: 위의 최적화 기법 5개에서 React-Query가 비동기 처리에 강력한 도구인지를 알게 해줍니다. 특히나, select 와 메모이제이션을 혼합해서 쓰는 예제는 useEffect와 같은 선택적 렌더링에 활용할 수 있지 않을까 합니다. 비동기 관련 기능에서 강력한 도구이며 어느 부분이 좋은 지 글을 통해 더 이해하면 좋을 것 같습니다.

자바스크립트 객체 딥 다이브

Object structure in JavaScript engines — Teletype
few people think about how objects are stored in memory and processed by JS engines. Can a developer's actions, directly or indirectly, impact...

심윤섭: 객체의 내부 구조를 앎과 동시에 히든 클래스에 집중하여 내부에서 어떻게 동작하는지를 알려주고 있습니다. 이와 관련된 저번 글을 보면 어떻게 실제 프로젝트에서 어떻게 적용할지를 생각해볼 수 있습니다.

당신은 GraphQL이 필요하지 않습니다.

You probably don't need GraphQL
It might be surprising to hear the co-founder of a GraphQL company say you probably don't need it. Let me explain.

심윤섭: GraphQL은 모든 사람을 위한 기술이 아니고, 특정 사람만을 위한 기술임을 강조하고 있습니다(사실 거의 모든 기술이 그렇죠). 항상 자신에게 맞는 적정 기술을 선택하려고 해야 합니다.

Cloudflare의 출시 주간

Blazing fast development with full-stack frameworks and Cloudflare
You can now use your framework’s development server while accessing D1 databases, R2 object stores, AI models, and more. Iterate locally in milliseconds to build sophisticated web apps that run on Cloudflare
We've added JavaScript-native RPC to Cloudflare Workers
Cloudflare Workers now features a built-in RPC (Remote Procedure Call) system for use in Worker-to-Worker and Worker-to-Durable Object communication, with absolutely minimal boilerplate. We've designed an RPC system so expressive that calling a remote service can feel like using a library.

주로 쓰이는 프레임워크(Next.js, Nuxt, ….)에서 D1, R2등 Cloudflare의 개발자 플랫폼에 쉽게 접근할 수 있도록 만들고, 관계형 데이터베이스인 D1을 Prisma를 통해 사용할 수 있다는 것을 보여주었습니다. 그리고 RPC 호출을 통해 다른 Worker에게 객체를 전달할 수 있는 등 여러 기능을 출시했습니다.

HTML 스트리밍으로 클라이언트 코드 줄이기

HTML Streaming Over the Wire 🥳: A Deep Dive
Explore HTML Streaming Over the Wire! We explain the Diff DOM algorithm with streaming to make only the necessary modifications, insertions, and deletions between a DOM node and an HTML stream reader.

Htmx에 영감을 얻어 클라이언트에서의 로직을 줄여서 웹 성능을 하고자 하는 라이브러리를 소개하는 글입니다.

Flow는 React 시장을 차지할 수 있을까

New Flow Language Features for React | by Alex Taylor | Flow | Apr, 2024 | Medium
We have thousands of engineers committing React code every day to Meta’s largest codebases. Part of our responsibility on the Flow team is to make it as easy as possible for anyone to contribute…

Flow 언어에서 React에서 타입 검사를 더 잘할 수 있도록 component / hook / render 유형을 만들었습니다.