플러터 멀티패키지를 통해 <웹과 앱의 공통 코드>들을 유지하면서 개발해보자
또한, 앱의 구조를 기능별로 분리하면서 하나의 모노리스 구조를 논리적으로 분할해보자
초기 세팅 - 빈 디렉토리에서 시작
mkdir apps data
앱 추가
cd apss
flutter create --platform=ios,android ./mobile_app
flutter create --platform=web ./web_app
cd ..
flutter create --template=package core
cd data
flutter create --template=package model
flutter create --template=package api
그다음
1. android studio -> settings-Lauages & Frameworks -> Flutter에서
Flutter SDK path 설정하기
2. file -> Project에서
SDK, Language level 설정하기

이후 yaml에서 path를 지정해주면 된다

dio인터셉터 의존성주입
-> 웹과 앱에서 jwt 재발급 로직을 구현할때, 앱에서는 재발급요청을 보낼때, fcmToken을 같이 보내는 경우가 있을 수 있다.
그럴경우 인터셉터의 로직분기처리가 필요하기 때문에
ApiClient에서 필요한 dio를 앱패키지와 웹패키지에서 따로 주입해주자!
///////// data패키지 api_client.dart /////////
final apiClientProvider = Provider<ApiClient>((ref) {
///main file에서 override를 통해 의존성 주입
throw UnimplementedError();
});
()
abstract class ApiClient {
factory ApiClient(Dio dio, {String baseUrl}) = _ApiClient;
}
///////// apps패키지 main.dart /////////
void main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(
ProviderScope(
overrides: [
apiClientProvider.overrideWith((ref){
final dio = ref.watch(dioProvider);
return ApiClient(dio, baseUrl: BASE_URL);
}),
],
child: const App(),
),
);
}
///////// apps패키지 dio.dart /////////
final dioProvider = Provider<Dio>((ref) {
final dio = Dio();
dio.interceptors.add(CustomInterceptor());
return dio;
});
class CustomInterceptor extends Interceptor{
///jwt관련로직
}