[WebApp] Dart package 오류

 

📌 개발 환경

Vacgom 프로젝트는 Web App 플랫폼이고, 저는 Web 을 담당하여 개발하고 있습니다.

App 은 Flutter 로 개발하고 있으며, Web 에서는 bridge 로 연결하여 연동작업 이어가고 있습니다.

---

로그인(카카오) - App
약관동의 - Web
회원가입 플로우 - Web
회원가입 완료 후 홈 이동 - App

---

이렇게 플로우가 진행이 되기 때문에, 회원가입 테스트를 위해서는 App 에서 화면을 띄워서 테스트가 필요했습니다.

-> 카카오 로그인 후 나오는 registerToken 이 회원가입 완료 api 연동시 필요하기 때문.

 

registerToken 은 다음과 같이 앱에서 가져오고 있습니다.

  const bridge = useVacBridge();
  const registerToken = bridge.getRegisterToken();

  useSignup(
    {
      registerToken: registerToken,
      nickname,
      babies: transformData,
    },
    {
      onSuccess: (data) => {
        localStorage.setItem('accessToken', data.accessToken);
        localStorage.setItem('refreshToken', data.refreshToken);
        router.push(PATH.welcome);
      },
      onError: (error) => {
        setError(error.response.data.error);
      },
    },
  );
};

 

여기서 브릿지는 useContext 를 사용하여 구현되었습니다.

export const VacBridgeContext = createContext<AbstractVacBridge>(new DummyVacBridge());

export const useVacBridge = () => {
  const vacBridge = React.useContext(VacBridgeContext);
  
  return vacBridge;
};

 

📌 내가 구현한 Web 이 잘 작동되는지 확인하기 위해..

앱 코드를 클론 받아서 Webstorm 과 android studio 에서 코드를 열었는데,

다트 오류가 계속해서 나는 상황이었습니다.

-> 이런 오류가 났다.

분명 맥 dart 를 Intall 했는데도 해당 오류가 나서, 이유를 찾기가 어려웠습니다.

 

 

Dart 공식 홈페이지에서 web app 빌드탭에서 확인해봤더니,

다음과 같이 나와있었기 때문에 
이와 같이 한번 진행해야겠다고 생각했습니다.

 

그래서 터미널에서 다음 코드를 통해 설치를 진행했습니다.

$ brew tap dart-lang/dart
$ brew install dart

-> 이건 Webstorm 에서 에러 화면이다.

하지만 Android Studio 에서는 잘 적용 되어 에러가 잡히는 것을 확인할 수 있었습니다!

 

❌  근데 안드로이드 스튜디오에서 또 생긴 SDK 문제

플러터 run 했더니 또 이런 문제가 생겼고,

 

다음과 같이 에뮬레이터를 킨 상태로 flutter run 을 하면, 해당 오류가 발생합니다. 

에뮬레이터를 끄면 바로 앱을 실행시킬 수 있습니다.

=> 찾아보니, 이런 에러가 뜨면 Android 버전별 SDK 를 내려받아주면된다고 해서, 바로 실행해보았습니다.

 

이렇게 버전별로 SDK 를 추가로 설치하였습니다.

해결 안 되어서 더 설치 했습니다 ..

 

그래도 해결이 안 되어서, 

https://github.com/juliansteenbakker/flutter_secure_storage/issues/674

Can run app with flutter_secure_storage · Issue #674 · juliansteenbakker/flutter_secure_storage

다음 깃헙 PR 리뷰를 보고,

다음 부분에 집중했습니다.

 

방법은 두가지입니다. 

1. ✅ flutter_secure_storage 최신 버전으로 업데이트

flutter pub upgrade flutter_secure_storage

2. ✅ pubspec.yaml에서 최신 버전을 확인한 후 직접 수정

dependencies:
  flutter_secure_storage: ^9.0.0

 

지금 pubspec.yaml 의  현재 플러터 시큐어 스토리지를 확인 해보니, 4.2.1 버전인 것을 확인했고,
업그레이드 하는 방법을 선택해보았습니다.

해당 문제는 해결되긴 했지만, 다른 문제가 또 생겨서 더 들여다봐야할 것 같다.