XState Docs
JavaScript state machines and statecharts (opens new window) JavaScript and TypeScript finite state machines (opens new window) and statecharts (opens new window) for the modern web. 📖 Read the documentation (opens new window) 💙 Explore our catalogue
xstate.js.org
https://github.com/devtaehyeok/xstate-7gui
GitHub - devtaehyeok/xstate-7gui: Created with CodeSandbox
Created with CodeSandbox. Contribute to devtaehyeok/xstate-7gui development by creating an account on GitHub.
github.com
연휴를 맞아 XState 라이브러리를 이용하여 7GUI를 구현해보고 있다.
마지막 과제인 Cell Drawer(엑셀)만 남았는데...
특히 Circle Drawer가 어려웠다.
XState로 해당 구현을 참고할만한 예제가 있긴 했는데...
바닐라 자바스크립트라, 리액트 코드와 호환되도록 하는 부분이 꽤 어려웠다.
해당 라이브러리를 꽤 빡세게 써보며 느낀 점은...
1. 일단 로직을 시각화해 준다는게, SI 개발자로서 산출물로 써먹으려고 했던 내 의도를 만족할 뿐만 아니라, 디버깅에도 꽤 용이하다는 것이다.
2. 뷰 로직과 모델(도메인) 로직이 완전히 분리된다. 리액트 코드를 거의 건드리지 않고, 로직 구현이 가능했다.
이는 아래 코드의 machine 부분을 참고하면 된다.
3. 모델과 뷰의 이벤트 기반 통신이라는게, 생각보다 큰 자유도를 준다.
특히 3번이, 프론트엔드의 도메인 주도 설계와 꽤 맞닿아 있는것 같다.
뷰 로직을 구현하는 것보다, 비즈니스 로직의 모델링에 좀더 집중할 수 있고,
다른 프로젝트에서 해당 모델을 재사용 및 확장 가능한 것이다.
(xstate는 프레임워크와 상관없이 사용 가능하다.)
단점은...
1. 해당 라이브러리를 사용하면서 아직 참고할만한 자료들이 많이 없다. 영어에 자신없다면 정말 사용하기 어려울 듯
2. 생각보다 타입스크립트가 잘 안먹는다.
3. 생각보다 알아야 할 내용이 많다. 논문 내용을 구현하였기 때문이다.
'FrontEnd' 카테고리의 다른 글
| XState 상태 기계로 SWR 구현하기 (0) | 2022.05.05 |
|---|---|
| 제어의 역전을 활용해 타입 친화적인 컨텍스트를 디자인하는 방법 (0) | 2022.05.05 |
| XState : 타입스크립트와 같이 활용하기 (0) | 2022.05.05 |
| XState : 컨텍스트와 이벤트 모델링 (0) | 2022.05.05 |
| XState의 Context(양적 데이터) 알아보기 (0) | 2022.05.05 |