DEV Community: Park Je Hoon

XState (2)

Park Je Hoon — Wed, 23 Jun 2021 17:10:38 +0000

1편에 이어서..

States

state.hasTag

state에 tag를 관리하게 할 수 있다. 아래의 코드와 같이 green과 yellow가 동일한 상태로서 매칭된다면 state.matches('green') || state.matchs('yellow') 대신 사용할 수 있다.

const machine = createMachine({
  initial: 'green',
  states: {
    green: {
      tags: 'go' // single tag
    },
    yellow: {
      tags: 'go'
    },
    red: {
      tags: ['stop', 'other'] // multiple tags
    }
  }
});

const canGo = state.hasTag('go');
// === state.matches('green') || state.matchs('yellow')

Persisting State

State 객체는 string json format으로 직렬화하여 localstorage 등의 값으로 부터 초기화 될 수 있다.

const jsonState = JSON.stringify(currentState);

// 어딘가에서 저장하고..
try {
  localStorage.setItem('app-state', jsonState);
} catch (e) {
  // unable to save to localStorage
}

// ...

const stateDefinition =
  JSON.parse(localStorage.getItem('app-state')) || myMachine.initialState;

// State.create()를 이용하여 plain object로 부터 스토어를 복구시킴
const previousState = State.create(stateDefinition);

// machine.resolveState()를 이용하여 새 상태로 정의됨
const resolvedState = myMachine.resolveState(previousState);

React와 사용할땐 어떻게 사용할까 하고 보니 @xstate/react에서는 아래와 같이 간단하게 쓰고 있다.

// ...

// Get the persisted state config object from somewhere, e.g. localStorage
const persistedState = JSON.parse(localStorage.getItem('some-persisted-state-key')) || someMachine.initialState;

const App = () => {
  const [state, send] = useMachine(someMachine, {
    state: persistedState // provide persisted state config object here
  });

  // state will initially be that persisted state, not the machine's initialState

  return (/* ... */)
}

State Meta Data

state node의 관련 속성을 설명하는 정적 데이터인 메타 데이터는 meta 속성에 지정할 수 있다.

const lightMachine = createMachine({
  id: 'light',
  initial: 'green',
  states: {
    green: {
      tags: 'go',
      meta: {
        message: 'can go',
      },
      on: { 'WILL_STOP': 'yellow' },
    },
    yellow: {
      tags: 'go',
      meta: {
        message: 'will be red',
      },
      on: { 'STOP': 'red' }
    },
    red: {
      tags: ['stop', 'other'],
      meta: {
        message: 'stop!',
      },
      on: { 'GO': 'green' }
    }
  }
});
const yellowState = lightMachine.transition('green', {
  type: 'WILL_STOP'
});

console.log(yellowState.meta);
// { 'light.yellow': { message: 'will be red' } }

(공식문서 보고 {'yellow': { message: 'will be red' }}를 기대했었는데..)

meta를 여러개 포함할때도 모두 표현해준다.

const fetchMachine = createMachine({
  id: 'fetch',
  // ... 중략
    loading: {
      after: {
        3000: 'failure.timeout'
      },
      on: {
        RESOLVE: { target: 'success' },
        REJECT: { target: 'failure' },
        TIMEOUT: { target: 'failure.timeout' } // manual timeout
      },
      meta: {
        message: 'Loading...'
      }
    },
    failure: {
      initial: 'rejection',
      states: {
        rejection: {
          meta: {
            message: 'The request failed.'
          }
        },
        timeout: {
          meta: {
            message: 'The request timed out.'
          }
        }
      },
      meta: {
        alert: 'Uh oh.'
      }
    },
  // ... 하략
});

const failureTimeoutState = fetchMachine.transition('loading', {
  type: 'TIMEOUT'
});
console.log(fetchMachine.meta)
/*
{
  "fetch.failure.timeout': {
    'message': 'The request timed out.',
  },
  'fetch.failure': {
    'alert": "Uh oh.',
  }
}
*/

State Node

state machine은 전체 상태(overall state)를 집합으로 표현되는 상태 노드(State Node)를 포함한다. 아래의 상태 명세는 위 예제에서 가져왔다.

// 위의 fetchMachine의 loading 참고
// 해당 State의 configuration 내부의 config에서 확인 가능.
{
  'after': {
    '3000': 'failure.timeout'
  },
  'on': {
    'RESOLVE': {
      'target': 'success'
    },
    'REJECT': {
      'target': 'failure'
    },
    'TIMEOUT': {
      'target': 'failure.timeout'
    }
  },
  'meta': {
    'message': 'Loading...'
  }
}

전체 State는 machine.transition()의 리턴 값이나 service.onTransition()의 콜백 값에서도 있다.

const nextState = fetchMachine.transition('idle', { type: 'FETCH' });
// State {
//   value: 'loading',
//   actions: [],
//   context: undefined,
//   configuration: [ ... ]
//   ...
// }

XState에서 상태 노드는 state configuration으로 지정된다. 이들은 machines의 states property에 정의되어있다. 하위 상태(sub-state) 노드 역시 마찬가지로 계층 구조로서 states property의 상태 노드에 선언될 수 있다. 'machine.transition(state, event)'에서 결정된 상태는 상태 노드의 조합을 나타낸다. 예를들어 아래의 success와 하위 상태 items는 { success: 'items' }로 표현된다.

const fetchMachine = createMachine({
  id: 'fetch',
  // 이것도 States 이고
  states: {
    success: {
      // 자식 상태를 초기화 하고
      initial: { target: 'items' },

      // 자식 상태임.
      states: {
        items: {
          on: {
            'ITEM.CLICK': { target: 'item' }
          }
        },
        item: {
          on: {
            BACK: { target: 'items' }
          }
        }
      }
    },
  });

상태 노드의 유형

상태 노드는 5가지가 있다.

atomic - 자식 상태가 없는 노드 (leaf node)
compound - 하나 이상의 상태를 포함하며 이런 하위 상태 중 하나가 키인 intial 상태가 있다.
parallel - 2개 이상의 하위 상태를 포함하며 동시에 모든 하위 상태가 있다는 것을 나타내기 위함이어서 초기상태가 없다. (약간의 의역인데 이렇게 이해했음..)
final - 추상적으로 "말단" 상태임을 나타내는 단말 노드이다.
history - 부모 노드의 가장 최근의 shallow or deep history 상태를 나타내는 추상 노드

아래 선언부를 보니까 조금 더 이해가 되었다.

const machine = createMachine({
  id: 'fetch',
  initial: 'idle',
  states: {
    idle: {
      // 단일 노드
      type: 'atomic',
      on: {
        FETCH: { target: 'pending' }
      }
    },
    pending: {
      // resource1, resource2 두개가 parallel 하게 있구나..
      type: 'parallel',
      states: {
        resource1: {
          // 내부에 pending, success 두가지를 갖는 복합 상태
          type: 'compound',
          initial: 'pending',
          states: {
            pending: {
              on: {
                'FULFILL.resource1': { target: 'success' }
              }
            },
            success: {
              type: 'final'
            }
          }
        },
        resource2: {
          type: 'compound',
          initial: 'pending',
          states: {
            pending: {
              on: {
                'FULFILL.resource2': { target: 'success' }
              }
            },
            success: {
              type: 'final'
            }
          }
        }
      },
      // resource1, resource2 둘 다 final 상태가 되면 success로
      onDone: 'success'
    },
    success: {
      type: 'compound',
      initial: 'items',
      states: {
        items: {
          on: {
            'ITEM.CLICK': { target: 'item' }
          }
        },
        item: {
          on: {
            BACK: { target: 'items' }
          }
        },
        hist: {
          type: 'history',
          history: 'shallow'
        }
      }
    }
  }
});

유형을 명시적으로 지정하면 typescript 분석 및 유형검사 관련으로 유용하다고 하는데, parallel, history, final만 해당된다.

이후 3편에서 Transient State Nodes 부터 이어서 진행 예정입니다.

XState (1)

Park Je Hoon — Wed, 12 May 2021 14:42:09 +0000

최근 상태 관리 라이브러리에 대한 리서치를 하다가 관심있게 보고있던 XState를 공부해보고 정리할 겸 작성. 내용이 너무 많을 것 같아서 틈날때마다 업데이트 해나아갈 예정이다.

Xstate

XState는 FSM(Finite State Machine)과 Statecharts를 생성, 해석, 실행하기 위한 라이브러리이며, 해당 machine의 호출을 actor로 관리하기 위한 라이브러리이다.

알아야할 개념은 FSM, Statecharts, Actor model들에 대한 내용인데 이 곳에 읽어볼만한 레퍼런스들이 있다. 과거 대학교에서 이산 수학 강의를 들었을 때 마지막 챕터였던 FSM에 대해서 수학의 정수라고 말씀주셨던 기억이 난다.

위키의 내용을 보자면 유한한 개수의 상태를 가질 수 있는 오토마타로서, 오직 하나의 상태(State)만을 가지게 되고 어떠한 사건(Event)에 의해 한 상태에서 다른 상태로 변환 할 수 있는 전이(Transition)라고 하는데, 상태와 전이의 집합을 FSM으로 정의하는 것 같다.

많이 알려진 활용 분야중에 게임에서 몬스터의 행동 패턴, 공학에서의 논리 회로등 다양한 분야에서 쓰이고 있고, 요약하자면 아래와 같은 조건들로 정의가 된다.

유한개의 상태 (states)
유한개의 사건 (events)
초기 상태
현재 상태와 사건을 다음 상태로 결정하는 전이 함수 (transition function)
(비어있을 수 있는) 최종 상태 집합 (final states)

주요 내용은 공식 문서를 바탕으로 진행하며 설치는 아래와 같이 한다.

npm install xstate --save
yarn add xstate

개요

factory function인 createMachine을 이용하여 state machine 혹은 statecharts 을 생성할 수 있다.

import { createMachine } from 'xstate';

const promiseMachine = createMachine({
  id: 'promise',
  initial: 'pending',
  states: {
    pending: {
      on: {
        RESOLVE: { target: 'resolved' },
        REJECT: { target: 'rejected' }
      }
    },
    resolved: {
      type: 'final'
    },
    rejected: {
      type: 'final'
    },
  },
});

id는 machine의 고유값이면서 자식 상태 노드 id의 base string이 된다.
initial은 초기 상태 노드를 지정하며, states는 각각의 자식 상태를 정의한다.
위 FSM의 개념에서의 전이(transition)은 resolved와 rejected라는 상태로 지정하며, 각 각의 상태는 final 이라는 machine이 종료에 도달하는 상태임을 지정한다.

생성한 machine을 해석하고 실행하려면 interpret를 이용하여 interpreter를 추가해야 한다. 아래와 같이 사용 가능하다.

import { createMachine, interpret } from 'xstate';

const promiseMachine = createMachine({
  /* ... */
});

const promiseService = interpret(promiseMachine).onTransition((state) =>
  console.log(state.value)
);

// Start the service
promiseService.start();
// => 'pending'

promiseService.send({ type: 'RESOLVE' });
// => 'resolved'

그리고 createMachine으로 생성한 코드는 이 곳에서 시각화 하고 실행해 볼 수 있다.

States

상태는 특정 시점의 추상적 표현이다. FSM은 주어진 시간에 유한한 수의 상태중 하나만 가능하다. 상태 정의는 아래와 같이 정의 하고 확인할 수 있다.

const lightMachine = createMachine({
  id: 'light',
  initial: 'green',
  states: {
    green: {
      /* ... */
    }
    // ...
  }
});

console.log(lightMachine.initialState);
// State {
//   value: 'green',
//   actions: [],
//   context: undefined,
//   // ...
// }

State 객체는 JSON 직렬화가 가능하며 아래와 같은 속성이 있다.

value: 현재 상태 값 (예를 들어 { red: 'walk' } )
context: 상태의 현재 context
event: 해당 상태로 transition을 트리거한 event 오브젝트
actions: 실행할 액션의 배열
activities: 액티비티가 실행되면 true, 중지되면 false
history: 이전 상태 인스턴스
meta: 상태 노드의 meta 프로퍼티로 정의된 메타 데이터
done: 상태가 최종 상태를 나타내는지에 대한 여부

State의 메소드와 속성들

state.matches(parentStateValue)

state.value가 주어진 parentStateValue의 subset인지 확인한다. 예를들어 state.value가 { red: ‘stop’ } 이라면?

console.log(state.value);
// => { red: 'stop' }

console.log(state.matches('red'));
// => true

console.log(state.matches('red.stop'));
// => true

console.log(state.matches({ red: 'stop' }));
// => true

console.log(state.matches('green'));
// => false

만약 여러 상태에 대한 match를 원한다면?

const isMatch = [{ customer: 'deposit' }, { customer: 'withdrawal' }].some(
  state.matches
);

state.nextEvents

현재 상태에서 가능한 다음 transition을 확인해볼 수 있다.

const { initialState } = lightMachine;
console.log(initialState.nextEvents);
// => ['TIMER', 'EMERGENCY']

state.changed

이전 상태로부터 변화되었는지에 대한 여부를 알수 있다. 상태가 아래와 같다면 changed로 간주한다.

이전 값과 값이 같지 않다
어떠한 새로운 액션 (side-effects)가 실행되었다.

const { initialState } = lightMachine;

console.log(initialState.changed);
// => undefined

const nextState = lightMachine.transition(initialState, { type: 'TIMER' });

console.log(nextState.changed);
// => true

const unchangedState = lightMachine.transition(nextState, {
  type: 'UNKNOWN_EVENT'
});

console.log(unchangedState.changed);
// => false

최초 상태(히스토리가 없는 것)는 undefined이다.

state.done

이 상태가 최종 상태인지에 대한 여부를 알 수 있다.

const answeringMachine = createMachine({
  initial: 'unanswered',
  states: {
    unanswered: {
      on: {
        ANSWER: { target: 'answered' }
      }
    },
    answered: {
      type: 'final'
    }
  }
});

const { initialState } = answeringMachine;
initialState.done; // false

const answeredState = answeringMachine.transition(initialState, {
  type: 'ANSWER'
});
answeredState.done; // true

state.toStrings()

상태값의 패스에 대한 모든 표현의 문자열 배열을 리턴한다.

console.log(state.value);
// => { red: 'stop' }

console.log(state.toStrings());
// => ['red', 'red.stop']

문서에서는 CSS class나 data-attributes 같은 string-based 환경에서 유용하게 사용될 수 있다고 하는데 아마 해당 요소에 state의 value값을 바로 사용하면 되겠지 라는 생각이 들었다.

이후 내용은 조금 더 내용을 읽어보고 작성해야할 것 같다.

to be continue..

Flutter로 웹앱 만들며 진행했던 정리 (1)

Park Je Hoon — Wed, 14 Apr 2021 15:47:42 +0000

서론

flutter 2.0이 발표되었다는 소식을 듣고 그동안 관심을 많이 갖고 있었던 flutter와 친해져보기 위해서 관련해서 공부했던 내용들을 정리해보려고 합니다. 아무래도 FE 개발을 하다보니 웹앱에 관심이 가장 많았었고 hybrid web app으로서는 어떨지 이것저것 테스트 해봤던 내용들을 공유해보려고 합니다.

Flutter

flutter는 Google에서 출시한 크로스 플랫폼 SDK입니다. 2.0에서는 android/iOS/web을 지원합니다.(beta는 뺐습니다) 흥미가 많이 끌렸던 이유는 과거 electron으로 앱을 개발할때와 같은 single codebase에 매력이 제일 컸던것 같습니다. flutter가 무엇이고 어떻게 렌더링을 한다등의 내용은 지금의 주제에서 벗어나는것 같아서 추후 정리하려 하고, 오늘 정리는 오로지 카카오톡 로그인 붙여보기에 목적이 있습니다.

Webview

webview는 plugin으로 공식 지원하는 webview_flutter와 개인 개발자가 만든 flutter_inappwebview가 있습니다. webview_flutter는 web과 메세지를 주고받을 수 있는 javascriptChannels와 android의 shouldOverrideUrlLoading과 유사한 역할을 하는 navigationDelegate와 같은 인터페이스가 있습니다. 처음 검토했을때는 컴팩트하게 꼭 필요한 기능만 갖춘 느낌이었고 flutter_inappwebview는 굉장히 파워풀하게 인터페이스들이 많아서 flutter_inappwebview를 선택해서 개발했었습니다.

카카오 로그인

카카오 로그인을 hybrid app으로 구현할때는 카카오 로그인 하이브리드 앱에 적용하기에 있는 내용들이 적용이 되어야합니다. flutter에는 MethodChannel이란 UI와 Host (platform) 간의 메세지를 보낼수 있는 인터페이스가 있습니다. 이것을 보고 처음 구상했던 방법은 아래와 같습니다.

MethodChannel + shouldOverrideUrlLoading

main.dart

// main.dart
// MethodChannel 객체 생성
static const platform = const MethodChannel('intent');

// inappwebview의 shouldOverrideUrlLoading 사용

...
// InAppWebView 컴포넌트 내
shouldOverrideUrlLoading:
    (controller, NavigationAction navigationAction) async {
  var uri = navigationAction.request.url!;
  if (uri.scheme == 'intent') {
    try {
      var result = await platform
          .invokeMethod('launchKakaoTalk', {'url': uri.toString()});
      if (result != null) {
        await webViewController?.loadUrl(
            urlRequest: URLRequest(url: Uri.parse(result)));
      }

    } catch (e) {
      print('url fail $e');
    }
    return NavigationActionPolicy.CANCEL;
  }
  return NavigationActionPolicy.ALLOW;
},
...

MainActivity.kt

class MainActivity: FlutterActivity() {
    private var CHANNEL = "intent"
    private var methodChannel: MethodChannel? = null

    @SuppressLint("NewApi")
    override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        methodChannel = MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL);
        methodChannel?.setMethodCallHandler { call, result ->
            if (call.method == "launchKakaoTalk") {
                var url = call.argument<String>("url");
                val intent = Intent.parseUri(url, URI_INTENT_SCHEME);
                // 실행 가능한 앱이 있으면 앱 실행
                if (intent.resolveActivity(packageManager) != null) {
                    val existPackage = packageManager.getLaunchIntentForPackage("" + intent.getPackage());
                    startActivity(intent)
                    result.success(null);
                } else {
                    // Fallback URL이 있으면 현재 웹뷰에 로딩
                    val fallbackUrl = intent.getStringExtra("browser_fallback_url")
                    if (fallbackUrl != null) {
                        result.success(fallbackUrl);
                    }
                }
            } else {
                result.notImplemented()
            }
        }
    }
}

관련 내용을 찾아보다가 KAKAO에서 공식적으로 제공하는 kakao_flutter_sdk의 존재도 알게 되었습니다. 내부 코드를 살펴보니 패키지 검사를 아래처럼 하고있었습니다.

fun isKakaoTalkInstalled(context: Context): Boolean {
  return isPackageInstalled(context, "com.kakao.talk") || isPackageInstalled(context, "com.kakao.onetalk")
}

private fun isPackageInstalled(context: Context, packageName: String): Boolean {
  return context.packageManager.getLaunchIntentForPackage(packageName) != null
}

iOS는 아래와 같이 plugin을 생성해서 MethodChannel을 연결해줘야합니다. iOS용 plist 설정과 같은 카카오로그인 개발 환경 설정도 다 해주어야합니다.

아래와 같은식으로 개발을 진행했습니다. (동작은 확인했지만 개발하다 중지한 코드입니다)

WebviewPlugin.swift


import Foundation

public class WebviewPlugin: NSObject, FlutterPlugin {
  public static func register(with registrar: FlutterPluginRegistrar) {
    let channel = FlutterMethodChannel(name: "intent", binaryMessenger: registrar.messenger())
    let instance = WebviewPlugin()
    registrar.addMethodCallDelegate(instance, channel: channel)
  }

  public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
    print(call);
    switch call.method {
      case "launchKakaoTalk":
        guard let talkUrl = URL(string: "kakaokompassauth://authorize") else {
          result(false);
          return
        }

        if (UIApplication.shared.canOpenURL(talkUrl)) {
          let args = call.arguments as! Dictionary<String, String>
          let uri = args["url"]
          launchKakaoTalk(uri: uri!, result: result)
        }
    default:
      result(FlutterMethodNotImplemented)
    }    
  }

  private func launchKakaoTalk(uri: String, result: @escaping FlutterResult) {
    let urlObject = URL(string: uri)!
    // 주의: 아래부분처럼 urlObject를 kakaokompassauth 로 시작되는 URL로  파싱해줘야합니다. 이 코드는 변경하다만 코드입니다.
    if (UIApplication.shared.canOpenURL(urlObject)) {      
      let url = URL(string: "kakaokompassauth://authorize?redirect_uri=kakaod{id}://oauth&response_type=code&client_id={client_id}7")!;
      UIApplication.shared.open(url, options: [:]) { (openResult) in
        result(openResult)
      }
    }
  }
}

생각의 전환

kakao_flutter_sdk를 전체적으로 분석하고 난 이후 여러 생각이 들었습니다. 실제로 iOS 네이티브 코드로 카카오 로그인을 구현해본적도 없었고 때문에 각 플랫폼별로 신경써야하는 부분도 잘몰랐었습니다. 각 플랫폼 별로 카카오톡이 설치된지에 대한 판단 방법도 다르다던지, 카카오톡 호출 방법 역시 플랫폼별로 처리해줘야하는 방식이 달랐습니다. (여담이지만 iOS에서 카카오톡 앱을 호출할때는 kakaokompassauth 이런 형식의 스키마를 호출해야한다는 것도 이번에 알았습니다)

차라리 웹에서 flutter로 호출된 페이지라면 javascriptChannel을 통해서 kakao_flutter_sdk의 메소드를 호출을 하면 안될까? 플랫폼별 카카오톡 호출 방식, 플랫폼별 UI를 고려한 동작들이 구현된 내용을 이해하고 사용하는게 오히려 나은것 아닐까? 라는 생각이 뇌리를 스쳐서 구현 방식을 변경해봤습니다.

kakao_flutter_sdk 의 문서에 나와있는 초기 설정은 다 해줘야합니다. (kakao developers의 환경설정에 있는 내용들도 있습니다)

main.dart

...
// InAppWebView 컴포넌트 내부
onWebViewCreated: (InAppWebViewController controller) {
  ...
  webViewController?.addJavaScriptHandler(
    handlerName: 'loginKakao',
    callback: (arguments) async {
      try {
        final installed = await isKakaoTalkInstalled();
        final authCode = installed
            ? await AuthCodeClient.instance.requestWithTalk()
            : await AuthCodeClient.instance.request();
        return authCode;
      } on KakaoAuthException catch (e) {
        return null;
      } on Exception catch (e) {
        return null;
      }
    });
  ...
}

LoginComponent.tsx

const REDIRECT_URI = '어딘가';

const doKakaoLogin = () => {
  // 현재 webview인지 판단
  if (isWebview()) {
    window.flutter_inappwebview
      .callHandler('loginKakao')
      .then(async function (authCode: string) {
      // authCode를 이용해서 인증처리.
    }
  } else {
    Kakao.Auth.authorize({
        redirectUri: REDIRECT_URI,
        // 그 외 필요한 내용.
      });
  }
}

ㅇ_ㅇ…

끝.

ㅇ ㅏ… 물론 웹뷰에서 받았던 유니버셜링크를 그대로 활용할수있는 방법도 더 찾아보고싶었는데 세세하게 수정할 구간들이 많아서 나중에 더 연구해보고싶긴 하네요..

마무리

hybrid web app 환경에서 카카오톡 로그인을 dart와 네이티브 코드를 직접 구현해보니 네이티브로까지의 전체적인 흐름이나 여기서 다루지 못한 kakao_flutter_sdk에서의 UI를 신경쓴 플로우 등을 보면서 많은 공부가 되었습니다. 결국 카카오 로그인을 구현하려고 보니 고민하고 신경써야하는 부분들이 플러그인에 세세하게 잘 구현이 되어있어서 플러그인을 사용하기 전에 구현해보았던 동작들이 잘 이해가 되었고 위와같이 구현해보았습니다. 정리가 한번 더 되면 직접 만들어서 사용해보자가 다음 아이템이 될수도 있을거같기도 하네요.

정리를 좀 하고 작성하고 싶었는데 누락된 구간이 있을수도 있어서 검증 해보고 문서를 수정..할수도 있을것 같습니다 (뭔가 급하게 쓴 느낌이라)

감사합니다.