xstate (12) 썸네일형 리스트형 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 라이브러리는 이러한 전략을 프론트 엔드에서 구현하기 쉽게 만들었습니다. 최신 데이터 보여주기 최신 웹 애플리케이션은 사용자에게 표시할 데이터를.. 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 액터(행위자) 모델은 여러 "엔티티"(또는 "행위자")가 서로 통신하는 방법을 단순화하는 메시지.. XState 공식 문서 번역 : 서비스 호출(Invoking Services) 공식 문서 주소 Invoking Services | XState Docs Invoking Services 🚀 Quick Reference Expressing the entire app's behavior in a single machine can quickly become complex and unwieldy. It is natural (and encouraged!) to use multiple machines that communicate with each other to express complex logic inst xstate.js.org 단일 시스템에서 전체 앱의 동작을 표현하는 것은 금방 복잡하고 어려워질 수 있습니다. 대신 복잡한 논리를 표현하기 위해 서로 통신하는 여러 기계를 사용하는 것은.. 이전 1 2 다음
