2022/05 (26) 썸네일형 리스트형 XState 상태 기계로 SWR 구현하기 원문 보러가기 SWR-Style Fetching with XState State Machines Using state machines to intelligently refresh your data imfeld.dev SWR이 무엇이고 왜 유용한가요? Stale-while-revalidate(SWR)는 캐시된 데이터가 가능한 한 빨리 사용자에게 표시되도록 하는 데이터 가져오기(fetch) 전략입니다. 또한 캐시된 데이터가 오래된 경우 최신 데이터를 가져오도록 어레인지 합니다. HTTP 캐시에서 주로 볼 수 있는 전략입니다. react-query 및 SWR React 라이브러리는 이러한 전략을 프론트 엔드에서 구현하기 쉽게 만들었습니다. 최신 데이터 보여주기 최신 웹 애플리케이션은 사용자에게 표시할 데이터를.. 제어의 역전을 활용해 타입 친화적인 컨텍스트를 디자인하는 방법 원문 보기 : https://saul-mirone.github.io/how-to-design-a-type-friendly-context/ How to Design a Type Friendly Context IoC is the key. saul-mirone.github.io 자바스크립트 세계에서, Koa는 하나의 이정표와 같은 역할을 하였습니다. Koa는 애플리케이션의 핵심은 플러그인을 load하기 위한 코어로서 동작하며, 여러 기능을 제공하기 위해 다양한 플러그인을 번들할 수 있는 역할임을 되새기게 합니다. (ex, 스프링, express) vscode의 확장 프로그램, 웹팩의 플러그인과 같은 비슷한 사례들을 발견할 수 있습니다. 자바스크립트의 컨텍스트 Koa의 세계에서 ctx는 마법의 상자입니다. 사용.. XState와 React를 활용한 기본 UI 예제 구현(7-GUIs) https://eugenkiss.github.io/7guis/ 7GUIs 7GUIs: A GUI Programming Benchmark There are countless GUI toolkits in different languages and with diverse approaches to GUI development. Yet, diligent comparisons between them are rare. Whereas in a traditional benchmark competing implementations are com eugenkiss.github.io https://xstate.js.org/docs/ XState Docs JavaScript state machines and statechart.. XState : 타입스크립트와 같이 활용하기 XState는 TypeScript로 작성되었으므로, 상태 차트를 강력하게 타이핑 하는 것이 유용하고 권장됩니다. import { createMachine } from 'xstate'; const lightMachine = createMachine({ schema: { // The context (extended state) of the machine context: {} as { elapsed: number }, // The events this machine handles events: {} as | { type: 'TIMER' } | { type: 'POWER_OUTAGE' } | { type: 'PED_COUNTDOWN'; duration: number } } /* Other config... */.. XState : 컨텍스트와 이벤트 모델링 https://xstate.js.org/docs/guides/models.html Models | XState Docs Models In XState, you can model a machine's context and events externally by using createModel(...). This provides a convenient way to strongly type context and events, as well as helpers for event creation, assignment and other implementation details in t xstate.js.org XState에서 createModel(...)을 사용하여 외부적으로 머신의 컨텍스트(양적 데이터)와 이벤트를.. XState의 Context(양적 데이터) 알아보기 https://xstate.js.org/docs/guides/context.html#initial-context Context | XState Docs Context 🚀 Quick Reference While finite states are well-defined in finite state machines and statecharts, state that represents quantitative data (e.g., arbitrary strings, numbers, objects, etc.) that can be potentially infinite is represented as extende xstate.js.org 유한 상태는 유한 상태 기계와 상태 차트에 잘 정의되어 있지만, 잠재적으로 무한할.. XState의 Effect(부수 효과) - Action https://xstate.js.org/docs/guides/effects.html Effects | XState Docs Effects In statecharts, "side-effects" can be grouped into two categories: "Fire-and-forget" effects, which execute a synchronous side-effect with no events sent back to the statechart, or send an event synchronously back to the statechart: Actions - singl xstate.js.org 상태 차트에서 "부작용"은 두 가지 범주로 그룹화할 수 있습니다. "Fire-and-forget" 효과:.. XState의 Actor 알아보기 https://xstate.js.org/docs/guides/actors.html#actor-api Actors | XState Docs Actors 4.6+ 🚀 Quick Reference The Actor model (opens new window) is a mathematical model of message-based computation that simplifies how multiple "entities" (or "actors") communicate with each other. Actors communicate by sending messages (events) to e xstate.js.org 액터(행위자) 모델은 여러 "엔티티"(또는 "행위자")가 서로 통신하는 방법을 단순화하는 메시지.. 이전 1 2 3 4 다음
