Uploaded byYoonsangYang1
PDF, PPTX15 views

state-machine-yoonsang.pdf

Motov State Machine Presentation

Embed presentation

Download as PDF, PPTX
2022-09-14 MOTOV INC. Yoonsang Yang STATE MACHINE State Machine
1. What is the State Machine (Feat. Automata Theory) 2. Why Use State Machine 3. State Machine Example in Real Life 4. State Machine in JavaScript (Feat. XState) INDEX
WHAT IS STATE MACHINE (FEAT. AUTOMATA THEORY)
오토마타 이론 - 계산 능 력 이 있는 추상 기계와 그 추상 기 계를 이용하여 풀 수 있는 문제들을 연 구하 는 컴퓨터 과학의 이론 AUTOMATA THEORY
AUTOMATA THEORY 오토마타 이론 대상의 어 떤 대상에 주목해서 입 력 과 내부 출력 각 신호의 상호 관계를 수학적 모델로 옮기고 이 모델을 수학적으로 고찰하고 결론을 유도 ————————————————————————————————————————————————————— 알파벳(Alphabet) : 기계가 입 력 받는 문자 (단, 정해진 집합의 원소) 문자 열 (String) : 기계가 입 력 받는 일련의 기호와 문자
TURING MACHINE 튜링 기계 특수한 테이프를 기반으로 작동하는 기계 튜링 기계가 사용하는 테이프 위에는 테이프 머릿 기호를 바탕으로 기계가 인식하거나 기록할 수 있는 기호가 있음 “42번째 상태에 서 0이라는 기호가 있다면, 1을 쓴다. 1이라는 기호가 있다면 17번째 상태에 서 0이라는 기호가 있 다면 1을 쓰고, 1이라는 기호가 있다면 6번째 상태로 간다.” 위와 같은 유한한 개수의 기초적 지시문으로 이루어 진다.
PUSHDOWN AUTOMATON 푸시다운 자동 기계 주로 Stack Memory 공간이 있는 Automata를 의미 형식 문법을 만들어 낼 수 있기 때문에 NLP 분 석 과 같은 구문 분 석 디자인에 많이 사용된다.
STATE MACHINE 상태 기계 시스템을 추상화해서 표 현 하는 수학적 모델링 방 법 외부의 입 력 (Input)에 따라 한 상태(State)에 서 다른 상태로 전이(Transition)된다. => 시스템의 State가 결정 전이를 일으키는 입 력 은 처리하는 방 법 에 따라 이벤트(Event)가 된다. 주로 컴파일러, 임베디드, 게임 캐릭터 AI 등에 자주 사용된다.
State Machine Elements - State - Event - Transition STATE MACHINE
WHY USE STATE MACHINE?
If-else 문을 통해 분기처리하거나, switch-case 문을 통해 처리해도 의도한 로직 작성이 가능하다. 굳이 시간을 더 들여서 구현을 해야하는 State Machine을 그럼에도 불구하고 사용하는 이유는 안정성 WHY USE STATE MACHINE
If-else or Switch-case 를 사용해 구현하면 변수 오 염 이나 잘못된 플로우를 탈 가능성이 있다. - 여러 명이 협업하는 경우 - 멀티 스레딩, 멀티 프로세싱 환경 => State Machine은 수학적 모델이므로 정의 자체만으로 안정성이 있고 결함이 일어날 경우 의 수가 현저히 낮아진다. WHY USE STATE MACHINE
State Machine의 장 점 - 반드시 설계한 대로만 Flow가 흐른다. - 정해진 이벤트를 통해 State가 Transition 된다. - 전 체적인 Flow가 유기 적 이며 명확하다. WHY USE STATE MACHINE
STATE MACHINE EXAMPLE
자판기 투입한 동전의 총량에 따라서 뽑을 수 있는 물 건 의 종 류가 바뀌게 된다. STATE MACHINE EXAMPLE Input State Output https://ko.wikipedia.org/wiki/%EC%9E%90%EB%8F%99_%ED%8C%90%EB%A7%A4%EA%B8%B0
엘리베이터 탑승자가 누른 버튼의 엘리베이터의 현재 위치에 따라서 움직이는 방향과 정지 하 는 층가 바뀌게 된다. STATE MACHINE EXAMPLE Input State Output https://www.hyundaielevator.co.kr/ko/solution/product/elevator/luxen
STATE MACHINE EXPRESSION
Moore Machine [특징] Output이 현재의 State에 의해서만 결정된다. STATE MACHINE EXPRESSION
Mealy Machine [특징] Output이 Input과 Current State에 모두 의존한다. Output 개수와 무관하게 State를 결정하므로, Moore Machine과 비교하여 더 간단히 표 현 가능한 경우가 생김 STATE MACHINE EXPRESSION
Harel Statecharts (UML) [특징] Moore, Mealy Machine의 경우 State 개수가 증가함에 따라 복잡도가 폭발 적 으로 증가할 수 있다. 이를 체계 적 으로 표 현 할 수 있는 Statechart 를 Harel이 제안, UML의 State Machine 표 현 방 법 의 표 준 이 되었다. ————————————————————————————————————————————————- Statechart = State Diagram + Depth + Orthogonality + Broadcast Communication STATE MACHINE EXPRESSION
Statechart = State Diagram + Depth + Orthogonality + Broadcast Communication Depth(계층) : State가 내부적으로 SubState를 가질 수 있으며 계층적으로 표 현 이 가능하다. Orthogonality(독립) : 독립적으로 동작하는 State Machine을 별도로 표시함으로 무관한 State간 조합을 피할 수 있다. Broadcast(정보 공유) : State Machine간 정보를 주고 받아 동작을 초기화할 수 있다. ————————————————————————————————————————————————————————— 그 외에도 조 건 을 사용하거나 History State를 사용하는 방 법 , 상태 내부에 서 Entry, Exit 동작 등을 추가할 수 있도록 확대하였다. STATE MACHINE EXPRESSION
Statechart Expression Entry, Always, Exit 등에 해당하는 동작 Event/Action의 방 법 으로 Transition State 내부의 SubState 서로 무관한 State는 Orthogonal State로 표 현 STATE MACHINE EXPRESSION
STATE MACHINEIN JS (FEAT. XSTATE)
Web App에 서 가장 중 요한 State 관리 사용자의 Input에 기반하여 State를 효율적으로 관리하기에 State Machine 모델을 적용하는 것은 아주 바람직하다. 그러한 방식으로 State를 관리할 수 있고, State Machine을 StateChart형태로 그려서 상태 추적이 유용한 JavaScript 라이브러리, XState STATE MACHINE IN JAVASCRIPT
XState in React State Machine을 정의하고, 함수형 컴포넌트 내부에 서 Hook 형태로 사용 가능 XSTATE IN REACT const toggleMachine = createMachine<ToggleContext>({ id: "toggle", initial: "inactive", context: {count: 0}, states: {inactive: {on: { TOGGLE: "active" }}, active: { entry: assign({ count: (ctx) => ctx.count + 1 }), on: { TOGGLE: "inactive" }}}}); const [current, send] = useMachine(toggleMachine); const active = current.matches("active"); const { count } = current.context; EXAMPLE
THANK YOU

More Related Content

PPTX
c++ 상태 머신 디자인
byWonseok Song
 
PDF
[PandoraCube] 게임 기초 인공지능
byPandoraCube , Sejong University
 
PDF
Spring statemachine
byDomainDriven DomainDriven
 
PPTX
논리회로 설계 이론과 실습 - ch8 순차회로 해석.pptx
byssuser6a0ce1
 
PDF
통찰의연결 학습자료 04
byconnect_foundation
 
PPTX
디자인 패턴
by수빈 박
 
PDF
​『9가지 사례로 익히는 고급 스파크 분석(2판) 』 맛보기
by복연 이
 
PDF
[Swift] State
byBill Kim
 
c++ 상태 머신 디자인
byWonseok Song
 
[PandoraCube] 게임 기초 인공지능
byPandoraCube , Sejong University
 
Spring statemachine
byDomainDriven DomainDriven
 
논리회로 설계 이론과 실습 - ch8 순차회로 해석.pptx
byssuser6a0ce1
 
통찰의연결 학습자료 04
byconnect_foundation
 
디자인 패턴
by수빈 박
 
​『9가지 사례로 익히는 고급 스파크 분석(2판) 』 맛보기
by복연 이
 
[Swift] State
byBill Kim
 

Similar to state-machine-yoonsang.pdf

PDF
코드스쿼드 iOS 교육 ML 발표자료
byHyunwooJung14
 
PPTX
Game AI 기초 [ 유니티 및 C# 스터디 / 2024-03-22 ]
byleusin2
 
PDF
Neural stream
byMk Kim
 
PDF
헤드퍼스트 디자인패턴 - 스테이트
by진화 손
 
PPTX
데이터를 얻으려는 노오오력
byYoungjae Kim
 
PDF
20160409 microsoft 세미나 머신러닝관련 발표자료
byJungGeun Lee
 
PDF
Differentiable Neural Computer
byTaehoon Kim
 
PPTX
1, 빅데이터 시대의 인공지능 문동선 v2
byDongsun Moon
 
PDF
Haskell study 14
byNam Hyeonuk
 
PDF
[OpenStack Days Korea 2016] Track3 - 머신러닝과 오픈스택
byOpenStack Korea Community
 
PDF
『9가지 사례로 익히는 고급 스파크 분석』 - 맛보기
by복연 이
 
PPT
Big Data Overview
byKeeyong Han
 
코드스쿼드 iOS 교육 ML 발표자료
byHyunwooJung14
 
Game AI 기초 [ 유니티 및 C# 스터디 / 2024-03-22 ]
byleusin2
 
Neural stream
byMk Kim
 
헤드퍼스트 디자인패턴 - 스테이트
by진화 손
 
데이터를 얻으려는 노오오력
byYoungjae Kim
 
20160409 microsoft 세미나 머신러닝관련 발표자료
byJungGeun Lee
 
Differentiable Neural Computer
byTaehoon Kim
 
1, 빅데이터 시대의 인공지능 문동선 v2
byDongsun Moon
 
Haskell study 14
byNam Hyeonuk
 
[OpenStack Days Korea 2016] Track3 - 머신러닝과 오픈스택
byOpenStack Korea Community
 
『9가지 사례로 익히는 고급 스파크 분석』 - 맛보기
by복연 이
 
Big Data Overview
byKeeyong Han
 

state-machine-yoonsang.pdf

  • 1.
    2022-09-14 MOTOV INC. YoonsangYang STATE MACHINE State Machine
  • 2.
    1. What isthe State Machine (Feat. Automata Theory) 2. Why Use State Machine 3. State Machine Example in Real Life 4. State Machine in JavaScript (Feat. XState) INDEX
  • 3.
    WHAT IS STATEMACHINE (FEAT. AUTOMATA THEORY)
  • 4.
    오토마타 이론 - 계산능 력 이 있는 추상 기계와 그 추상 기 계를 이용하여 풀 수 있는 문제들을 연 구하 는 컴퓨터 과학의 이론 AUTOMATA THEORY
  • 5.
    AUTOMATA THEORY 오토마타 이론 대상의어 떤 대상에 주목해서 입 력 과 내부 출력 각 신호의 상호 관계를 수학적 모델로 옮기고 이 모델을 수학적으로 고찰하고 결론을 유도 ————————————————————————————————————————————————————— 알파벳(Alphabet) : 기계가 입 력 받는 문자 (단, 정해진 집합의 원소) 문자 열 (String) : 기계가 입 력 받는 일련의 기호와 문자
  • 6.
    TURING MACHINE 튜링 기계 특수한테이프를 기반으로 작동하는 기계 튜링 기계가 사용하는 테이프 위에는 테이프 머릿 기호를 바탕으로 기계가 인식하거나 기록할 수 있는 기호가 있음 “42번째 상태에 서 0이라는 기호가 있다면, 1을 쓴다. 1이라는 기호가 있다면 17번째 상태에 서 0이라는 기호가 있 다면 1을 쓰고, 1이라는 기호가 있다면 6번째 상태로 간다.” 위와 같은 유한한 개수의 기초적 지시문으로 이루어 진다.
  • 7.
    PUSHDOWN AUTOMATON 푸시다운 자동기계 주로 Stack Memory 공간이 있는 Automata를 의미 형식 문법을 만들어 낼 수 있기 때문에 NLP 분 석 과 같은 구문 분 석 디자인에 많이 사용된다.
  • 8.
    STATE MACHINE 상태 기계 시스템을추상화해서 표 현 하는 수학적 모델링 방 법 외부의 입 력 (Input)에 따라 한 상태(State)에 서 다른 상태로 전이(Transition)된다. => 시스템의 State가 결정 전이를 일으키는 입 력 은 처리하는 방 법 에 따라 이벤트(Event)가 된다. 주로 컴파일러, 임베디드, 게임 캐릭터 AI 등에 자주 사용된다.
  • 9.
    State Machine Elements -State - Event - Transition STATE MACHINE
  • 10.
  • 11.
    If-else 문을 통해분기처리하거나, switch-case 문을 통해 처리해도 의도한 로직 작성이 가능하다. 굳이 시간을 더 들여서 구현을 해야하는 State Machine을 그럼에도 불구하고 사용하는 이유는 안정성 WHY USE STATE MACHINE
  • 12.
    If-else or Switch-case를 사용해 구현하면 변수 오 염 이나 잘못된 플로우를 탈 가능성이 있다. - 여러 명이 협업하는 경우 - 멀티 스레딩, 멀티 프로세싱 환경 => State Machine은 수학적 모델이므로 정의 자체만으로 안정성이 있고 결함이 일어날 경우 의 수가 현저히 낮아진다. WHY USE STATE MACHINE
  • 13.
    State Machine의 장 점 -반드시 설계한 대로만 Flow가 흐른다. - 정해진 이벤트를 통해 State가 Transition 된다. - 전 체적인 Flow가 유기 적 이며 명확하다. WHY USE STATE MACHINE
  • 14.
  • 15.
    자판기 투입한 동전의 총량에따라서 뽑을 수 있는 물 건 의 종 류가 바뀌게 된다. STATE MACHINE EXAMPLE Input State Output https://ko.wikipedia.org/wiki/%EC%9E%90%EB%8F%99_%ED%8C%90%EB%A7%A4%EA%B8%B0
  • 16.
    엘리베이터 탑승자가 누른 버튼의엘리베이터의 현재 위치에 따라서 움직이는 방향과 정지 하 는 층가 바뀌게 된다. STATE MACHINE EXAMPLE Input State Output https://www.hyundaielevator.co.kr/ko/solution/product/elevator/luxen
  • 17.
  • 18.
    Moore Machine [특징] Output이 현재의State에 의해서만 결정된다. STATE MACHINE EXPRESSION
  • 19.
    Mealy Machine [특징] Output이 Input과Current State에 모두 의존한다. Output 개수와 무관하게 State를 결정하므로, Moore Machine과 비교하여 더 간단히 표 현 가능한 경우가 생김 STATE MACHINE EXPRESSION
  • 20.
    Harel Statecharts (UML) [특징] Moore,Mealy Machine의 경우 State 개수가 증가함에 따라 복잡도가 폭발 적 으로 증가할 수 있다. 이를 체계 적 으로 표 현 할 수 있는 Statechart 를 Harel이 제안, UML의 State Machine 표 현 방 법 의 표 준 이 되었다. ————————————————————————————————————————————————- Statechart = State Diagram + Depth + Orthogonality + Broadcast Communication STATE MACHINE EXPRESSION
  • 21.
    Statechart = StateDiagram + Depth + Orthogonality + Broadcast Communication Depth(계층) : State가 내부적으로 SubState를 가질 수 있으며 계층적으로 표 현 이 가능하다. Orthogonality(독립) : 독립적으로 동작하는 State Machine을 별도로 표시함으로 무관한 State간 조합을 피할 수 있다. Broadcast(정보 공유) : State Machine간 정보를 주고 받아 동작을 초기화할 수 있다. ————————————————————————————————————————————————————————— 그 외에도 조 건 을 사용하거나 History State를 사용하는 방 법 , 상태 내부에 서 Entry, Exit 동작 등을 추가할 수 있도록 확대하였다. STATE MACHINE EXPRESSION
  • 22.
    Statechart Expression Entry, Always,Exit 등에 해당하는 동작 Event/Action의 방 법 으로 Transition State 내부의 SubState 서로 무관한 State는 Orthogonal State로 표 현 STATE MACHINE EXPRESSION
  • 23.
  • 24.
    Web App에 서 가장 중 요한 State관리 사용자의 Input에 기반하여 State를 효율적으로 관리하기에 State Machine 모델을 적용하는 것은 아주 바람직하다. 그러한 방식으로 State를 관리할 수 있고, State Machine을 StateChart형태로 그려서 상태 추적이 유용한 JavaScript 라이브러리, XState STATE MACHINE IN JAVASCRIPT
  • 25.
    XState in React StateMachine을 정의하고, 함수형 컴포넌트 내부에 서 Hook 형태로 사용 가능 XSTATE IN REACT const toggleMachine = createMachine<ToggleContext>({ id: "toggle", initial: "inactive", context: {count: 0}, states: {inactive: {on: { TOGGLE: "active" }}, active: { entry: assign({ count: (ctx) => ctx.count + 1 }), on: { TOGGLE: "inactive" }}}}); const [current, send] = useMachine(toggleMachine); const active = current.matches("active"); const { count } = current.context; EXAMPLE
  • 26.