flutter, js_interop 사용 후기 및 언제 사용할까

 

 

도입 배경

이번 회사 프로젝트에서 드림시큐리티 본인인증을 flutter web환경에 연동을 해야했고,

드림시큐리티의 개발가이드에는 flutter 가이드는 없었고, js 연동방식을 택하여 웹뷰로 구현하는 선택을 하게 되었다.

하지만 flutter web환경에서의 webview_flutter를 사용할 수 없으므로, js_interop 도입을 결정하게 되었다.

 

js_interop은 Dart와 JavaScript 간의 상호 운용(interop)을 쉽게 해주는 Dart 내장 라이브러리입니다.

이 라이브러리를 사용하면 Dart 코드에서 JavaScript 함수, 객체, 타입을 직접 호출하거나 사용할 수 있습니다

구현 

아래 구현 예시는 기본적으로 드림시큐리티 개발가이드를 이해한다는 전재하에 진행 됩니다.

https://mobile-ok.com/guide/mok_std_guide/

Mobile-OK 본인확인서비스 개발가이드

 

 

(프로젝트 구성에 맞게 파일위치를 정하시면 됩니다.)

 

lib/src/utils/javascript_functions 
├── web_javascript_functions.dart (조건부 export 처리)
├── web_javascript_stub.dart (web 외의 환경에서 사용할 코드)
└── web_javascript_web.dart (web 환경에서 사용할 코드)

 

만약 당신이 flutter로 web만 빌드하는게 아니라 ios, android도 같이 빌드하고 있다면,

위처럼 조건부 export 처리가 필요합니다. 

하지만 web만 구현한다면, 아래처럼 하나의 파일만 있으면 됩니다.

 

lib/src/utils/javascript_functions 
├── web_javascript_functions.dart (여기에 web_javascript_web.dart 직접 넣기)

 

해당 글에서는 조건부 export 처리에 맞춰서 구현 예시를 소개하겠습니다.

 

web_javascript_functions.dart

// [조건부 export 처리]
export 'web_javascript_stub.dart'
    if (dart.library.js) 'web_javascript_web.dart';

 

web_javascript_stub.dart

// 모바일에서 호출 시 에러 발생 방지
import 'package:illyilly_client/src/feature/payment/domain/models/portone_payment_request/portone_payment_request.dart';

void mobileOkProcess(String accessToken) {
  throw UnsupportedError('mobileOkProcess() is not supported on this platform');
}

 

web_javascript_web.dart

import 'dart:js_interop';

@JS()
external void mobileOkProcess(String accessToken); // js에서 구현할 함수명과 같아야합니다.

 

 

 

그 다음으로 web에서는 web/index.html에 연결할 js파일 하나 만든 후에 필요한 코드를 구현하면 됩니다.

web/functions.js


// https://mobile-ok.com/guide/
async function mobileOkProcess(token) {
  accessToken = token;
  MOBILEOK.process("api 주소 입력", "MB", "result");
}

 

 

이제 flutter에서 해당 js코드를 사용할때는 웹 환경인지, 아닌지를 구분하여 실행합니다.

Future<void> startAuthenticationFlow({
  required BuildContext context,
}) async {
final String? userToken = IllyillyTokenManager().accessToken ??
        await HiveService().get(HiveKeys.accessToken);
  if (PlatformManager.isNativeApp) {
  	if(context.mounted) {
        await context.push(
          MobileOkWebviewScreen.path,
          extra: {"url": "$mobileOkIosUrl&token=$userToken"},
        );
    }
    if (context.mounted) {
      context.go(SignupVerificationScreen.path);
    }
  } else {
    mobileOkProcess(userToken ?? '');
  }
}

여기서  PlatformManager.isNativeApp 함수는 모바일인지 아닌지를 나타내는 코드입니다.

웹환경일때 js코드를 실행한다는 흐름만 이해하면 됩니다.

 

 

언제 사용할까

저처럼 Flutter로 서비스를 개발하고 있을때 Web도 제공하고 있다면, 

웹에서만 제공되는 JS 라이브러리(예: chart.js, ethers.js 등)를 Flutter Web에서 그대로 활용하고 싶을 때,

웹 플랫폼에서만 동작하는 브라우저 API(예: window, document 등)에 접근해야 할 때 한번 사용해보면 좋을 것 같습니다.

 

물론, app 환경에서는 웹뷰로 구현하는걸 추천합니다.