상냥한 IT 블로그

서론

• 카카오 로그인 통합의 중요성 및 일반적인 문제 소개
• 이 글에서 해결할 주요 에러: "invalid android_key_hash or ios_bundle_id or web_site_url"

Java 버전 확인 및 JDK 설치

• 필요성: 카카오 로그인 통합을 위한 첫걸음으로, 올바른 Java 개발 환경 설정이 필수
• Java 버전 확인 방법
  • 명령어: java --version
• JDK 설치 방법
  • Homebrew를 이용한 OpenJDK 11 설치
    • 명령어: brew install openjdk@11
• JDK 경로 설정
  • .zshrc 파일을 통한 경로 설정
    • 명령어: echo 'export PATH="/opt/homebrew/opt/openjdk@11/bin:$PATH"' >> ~/.zshrc
    • 설정 적용: source ~/.zshrc

Debug 키 해시 생성 및 카카오 개발자 사이트에 등록

• Android Key Hash 생성
  • 필요성: 카카오 로그인을 위한 안드로이드 앱 인증 절차
  • Key Hash 생성 명령어:
    • keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64
• 카카오 개발자 사이트에 키 해시 등록
  • 상세한 단계별 등록 방법 설명

결론

• 이러한 단계를 통해 카카오 로그인 통합 시 발생할 수 있는 주요 문제 해결
• 추가적인 문제 해결 팁 및 유용한 리소스 링크 제공

참고 자료

• 카카오 개발자 문서, JDK 설치 가이드 등

1. 화면 등록

import 'dart:convert';

import 'package:culture_app/detail_screen.dart';
import 'package:culture_app/home_screen.dart';
import 'package:culture_app/model/festival_model.dart';
import 'package:culture_app/onboarding_screen.dart';
import 'package:go_router/go_router.dart' show GoRoute, GoRouter;

final router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const OnboardingScreen(),
    ),
    GoRoute(
      path: '/home',
      builder: (context, state) =>
          const HomeScreen(title: 'Flutter Demo Home Page'),
    ),
    GoRoute(
      path: '/detail',
      builder: (context, state) {
      	// state에는 extra로 보낸 데이터가 이동된다
        FestivalModel festivalModel =
            FestivalModel.fromJson(state.extra as Map<String, dynamic>);
        return DetailScreen(
          festivalModel: festivalModel,
        );
      },
    ),
    GoRoute(
      path: '/users/:userId',
      builder: (context, state) => const UserScreen(id: state.pathParameters['userId']),
    ),
  ],
);

router에 데이터를 넘기는 것이 아니라, 특정 프로바이더를 추가로 생성한 후에 해당 프로바이더에 데이터를 갱신하는 방법도 있을 것 같다. 

2. 화면 이동

context.push(
  '/detail',
  extra: festivalModel.toJson(),
);

context.go(Uri(path: '/users/123', queryParameters: {'filter': 'abc'}).toString());

3. redirect

redirect: (BuildContext context, GoRouterState state) {
  if (AuthState.of(context).isSignedIn) {
    return '/signin';
  } else {
    return null;
  }   
},

4. SubRoute

5. context.go vs context.push

go : 현재 화면 삭제하고 이동

push : 쌓기

pop : 현재 화면 없애고 이동

1. Riverpod의 장점 특징

1.1. 안전한 컴파일

Provider를 사용할 때 처럼 더 이상 ProviderNotFoundException 예외가 발생하지 않고, 로딩 상태를 처리하는 것을 걱정하지 않아도 됩니다. Riverpod를 사용하면 코드가 컴파일되어 작동합니다.

1.2. 제한없는 Provider

Riverpod는 Provider에서 영감을 얻었지만 동일한 유형의 여러 Provider를 지원하는 것과 같은 주요 문제 중 일부를 해결합니다. 비동기 Provider를 기다리고 있습니다. 어디에서나 Provider를 추가할 수 있습니다.

1.3. Flutter에 의존하지 않습니다.

Flutter에 의존하지 않고 Provider를 생성/공유/테스트합니다. 여기에는 BuildContext 없이 Provider를 수신할 수 있는 기능이 포함됩니다.

2. riverpod 패키지 추가하기

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^2.3.10

3. main() 메서드에 ProviderScrope 지정하기

앱 전체에 대한 공통 상태를 관리할 수 있게 됩니다. 앱의 최상위 레벨에서 상태를 제공하기 때문에, 앱의 어느 곳에서나 상태에 액세스하거나 상태를 변경할 수 있습니다.

void main() {
  runApp(const ProviderScope(child: MyApp()));
}

4. Model 만들기 (freezed)

import 'package:freezed_annotation/freezed_annotation.dart';
part 'festival_model.freezed.dart';
part 'festival_model.g.dart';

@freezed
class FestivalModel with _$FestivalModel {
  const factory FestivalModel({
    required int? SEQ_NO,
    required int? ALL_KWRD_RANK_CO,
    required String? SRCHWRD_NM,
    required String? UPPER_CTGRY_NM,
    required String? LWPRT_CTGRY_NM,
    required int? MOBILE_SCCNT_VALUE,
    required int? PC_SCCNT_VALUE,
    required int? SCCNT_SM_VALUE,
    required int? SCCNT_DE,
    required String? imageLink,
  }) = _FestivalModel;
  // '일련번호',
  // '전체키워드순위수', v
  // '검색어명',
  // '상위카테고리명',
  // '하위카테고리명', v
  // '모바일검색량값',
  // 'PC검색량값',
  // '검색량합계값', v
  // '검색량일자'

// ALL_KWRD_RANK_CO UPPER_CTGRY_NM LWPRT_CTGRY_NM
// SCCNT_SM_VALUE

  factory FestivalModel.fromJson(Map<String, Object?> json) =>
      _$FestivalModelFromJson(json);
}

5. State, StateNotifierProvider, Notifier 만들기

import 'dart:async';

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter/foundation.dart';
import 'package:freezed_annotation/freezed_annotation.dart';

part 'festival_provider.freezed.dart';

// 1. State 선언하기
@freezed
abstract class FestivalState with _$FestivalState {
  const factory FestivalState({
    @Default(20230711) int page,
    List<FestivalModel>? festivalList,
    @Default(true) bool isLoading,
    @Default(false) bool isLoadMoreError,
    @Default(false) bool isLoadMoreDone,
  }) = _FestivalState;

  const FestivalState._();
}


// 2. StateNotifierProvider 선언하기 - 3번의 Notifier, 1번의 State 넣어서 생성한다.
final festivalProvider =
    StateNotifierProvider<FestivalNotifier, FestivalState>((ref) {
  return FestivalNotifier();
});

// 3. Notifier 선언하기 - 1번의 State를 넣어서 생성한다.
class FestivalNotifier extends StateNotifier<FestivalState> {
  FestivalNotifier() : super(const FestivalState()) {
    _initFestival();
  }
  // 초기화
  _initFestival([int? initPage]) async {
    final page = initPage ?? state.page;
    final festivalList = await getFestivalList(page);

    if (festivalList == null) {
      state = state.copyWith(page: page, isLoading: false);
      return;
    }

    debugPrint('get festival is ${festivalList.length}');
    state = state.copyWith(
        page: page, isLoading: false, festivalList: festivalList);
  }

  // 추가로 불러오기
  loadMoreFestival() async {
    StringBuffer bf = StringBuffer();

    bf.write('try to request loading ${state.isLoading} at ${state.page - 1}');
    if (state.isLoading) {
      bf.write(' fail');
      return;
    }
    bf.write(' success');
    debugPrint(bf.toString());
    state = state.copyWith(
      isLoading: true,
      isLoadMoreDone: false,
      isLoadMoreError: false,
    );

    final festivalList = await getFestivalList(state.page - 1);

    if (festivalList == null) {
      // error
      state = state.copyWith(isLoadMoreError: true, isLoading: false);
      return;
    }

    debugPrint(
        'load more ${festivalList.length} posts at page ${state.page - 1}');
    if (festivalList.isNotEmpty) {
      // if load more return a list not empty, => increment page
      state = state.copyWith(
          page: state.page - 1,
          isLoading: false,
          isLoadMoreDone: festivalList.isEmpty,
          festivalList: [...state.festivalList!, ...festivalList]);
    } else {
      // not increment page
      state = state.copyWith(
        isLoading: false,
        isLoadMoreDone: festivalList.isEmpty,
      );
    }
  }

  // 새로고침
  Future<void> refresh() async {
    _initFestival(20230711);
  }
}

Notifier의 내부 state 변수를 활용해 FestivalState의 내부 값을 읽거나 변경할 수 있다. 변경할 때는 copyWith() 함수를 사용할 수 있다.

  state = state.copyWith(
    page: state.page - 1,
    isLoading: false,
    isLoadMoreDone: fetchedFestivalList.isEmpty,
    festivalList: [...state.festivalList!, ...fetchedFestivalList],
  );

리스트에 값을 추가할 때는 위와 같은 방식으로 추가할 수 있다.

6. Screen - ConsumerStatefulWidget 상속, PageState - ConsumerState 상속(ref 사용 가능)

// 1. ConsumerStatefulWidget 상속
class HomeScreen extends ConsumerStatefulWidget {
  const HomeScreen({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

// 2. ConsumerState 상속
class _MyHomePageState extends ConsumerState<HomeScreen> {
  ScrollController _controller = ScrollController();
  int oldLength = 0;

  @override
  void initState() {
    super.initState();
    _controller.addListener(() async {
      // debugPrint('pixel is ${_controller.position.pixels}');
      // debugPrint('max is ${_controller.position.maxScrollExtent}');
      if (_controller.position.pixels >
          _controller.position.maxScrollExtent -
              MediaQuery.of(context).size.height) {
        if (oldLength == ref.read(festivalProvider).festivalList!.length) {
          // 이전 데이터 로딩이 완료되었는지 확인하는 로직.
          // 이전 loadMoreFestival() 호출로 인해 데이터가 이미 업데이트되었다면
          // 새로운 loadMoreFestival() 호출을 하지 않도록 합니다.
          // 이는 불필요한 API 호출이나 연산을 줄이는 데 도움이 됩니다.
          ref.read(festivalProvider.notifier).loadMoreFestival();
        }
      }
    });
  }

  @override
  Widget build(BuildContext context) {
  	// festivalProvider가 사용한 FestivalState를 읽어옵니다.
    // state.isLoading, state.festivalList와 같은 형태로 값을 읽을 수 있다.
    final state = ref.watch(festivalProvider);

    return Scaffold(
      body: RefreshIndicator(
        onRefresh: () {
          // notifier 가져오기 - 새로고침 
          return ref.read(festivalProvider.notifier).refresh();
        },
        child: festivalList == null || festivalList.isEmpty ? 
            const Center(
              child: Text('error'),
            );
          : ListView.builder(
            padding: EdgeInsets.symmetric(horizontal: 24.w, vertical: 24.h),
            controller: _controller,
            itemCount: festivalList.length + 1,
            itemBuilder: (ctx, index) {
              if (index == state.festivalList.length) {
                if (state.isLoadMoreError) {
                  return const Center(
                    child: Text('에러가 발생했습니다!'),
                  );
                }
                if (isLoadMoreDone) {
                  return const Center(
                    child: Text(
                      '조회가 완료되었습니다!',
                      style: TextStyle(color: Colors.green, fontSize: 20),
                    ),
                  );
                }
                return const LinearProgressIndicator();
              }
              return FestivalListItem(
                index: index,
                festivalModel: festivalList[index],
              );
            }),
      ),
    );
  }
}

7. Notifier의 함수 호출

ref
.read(onboardingIndexProvider.notifier)
.changePageIndex(index);

0. pubspec.yaml 에 기초 프로젝트 설정하기

name: culture_app
description: A new Flutter project.
publish_to: 'none' 
version: 1.0.0+1
environment:
  sdk: '>=3.0.0 <4.0.0'
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  flutter_screenutil: ^5.8.4
  url_launcher: ^6.1.12
  cached_network_image: ^3.2.3
  flutter_dotenv: ^5.1.0
  font_awesome_flutter: ^10.5.0
  dio: ^5.2.1+1
  awesome_dialog: ^2.2.1
  shimmer: ^3.0.0
  intl: any
  flutter_riverpod: ^2.3.6
  riverpod: ^2.3.6  
  go_router: ^9.0.3
  connectivity_plus: ^4.0.1
  pretty_dio_logger: ^1.3.1
  riverpod_annotation: ^2.1.1
  shared_preferences: ^2.2.0
  freezed_annotation: ^2.4.1
  json_annotation: ^4.8.1
  lottie: ^2.4.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0
  flutter_localizations:
    sdk: flutter
  freezed: ^2.4.1
  build_runner: ^2.4.6
  flutter_launcher_icons: ^0.13.1
  json_serializable: ^6.7.1

flutter:
  uses-material-design: true
  fonts:  
    - family: 'NotoSansKR'
      fonts:  
        - asset: assets/fonts/NotoSansKR/NotoSansKR-Regular.otf
        - asset: assets/fonts/NotoSansKR/NotoSansKR-Medium.otf
          weight: 500
        - asset: assets/fonts/NotoSansKR/NotoSansKR-Bold.otf
          weight: 700
        - asset: assets/fonts/NotoSansKR/NotoSansKR-Black.otf
          weight: 900
  assets:
    - assets/images/
    - assets/lotties/
    # - assets/images/common/
    # - assets/images/icon/
    # - assets/config/
    - assets/fonts/NotoSansKR/

1. main에 ProviderScope 설정하기

void main() {
  runApp(const ProviderScope(child: MyApp()));
}

2. GoRouter로 화면 지정하기

import 'dart:convert';

import 'package:culture_app/detail_screen.dart';
import 'package:culture_app/home_screen.dart';
import 'package:culture_app/model/festival_model.dart';
import 'package:culture_app/onboarding_screen.dart';
import 'package:go_router/go_router.dart' show GoRoute, GoRouter;

final router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const OnboardingScreen(),
    ),
    GoRoute(
      path: '/home',
      builder: (context, state) =>
          const HomeScreen(title: 'Flutter Demo Home Page'),
    ),
    GoRoute(
      path: '/detail',
      builder: (context, state) {
        FestivalModel festivalModel =
            FestivalModel.fromJson(state.extra as Map<String, dynamic>);
        return DetailScreen(
          festivalModel: festivalModel,
        );
      },
    ),
  ],
);

3. http 클라이언트 코드 작성하기

import 'dart:convert';

import 'package:culture_app/model/festival_model.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

Future<List<FestivalModel>> getFestivalList(int year) async {
  debugPrint('httpClient loading page $year');
  // year = 20230711;
  try {
    final response =
        await http.get(Uri.parse('http://3.38.247.254:3060/festivals/$year'));
    print('year');
    print(year);
    // print response
    print('response.body');
    print(response.body);
    final List<FestivalModel> festivalList =
        (jsonDecode(response.body)['data'] as List)
            .map((e) => FestivalModel.fromJson(e))
            .toList();
    return festivalList;
  } catch (ex, st) {
    debugPrint(ex.toString());
    debugPrint(st.toString());
    return [];
  }
}

4. Riverpod :: 축제 리스트 페이징을 위한 state, provider, notifier 선언

import 'dart:async';

import 'package:culture_app/model/festival_model.dart';
import 'package:culture_app/http_client.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter/foundation.dart';
import 'package:freezed_annotation/freezed_annotation.dart';

part 'festival_provider.freezed.dart';

// state, provider, notifier

// festival state
@freezed
abstract class FestivalState with _$FestivalState {
  const factory FestivalState({
    @Default(20230711) int page,
    List<FestivalModel>? festivalList,
    @Default(true) bool isLoading,
    @Default(false) bool isLoadMoreError,
    @Default(false) bool isLoadMoreDone,
  }) = _FestivalState;

  const FestivalState._();
}

// festival provider
final festivalProvider =
    StateNotifierProvider<FestivalNotifier, FestivalState>((ref) {
  return FestivalNotifier();
});

// festival notifier
class FestivalNotifier extends StateNotifier<FestivalState> {
  FestivalNotifier() : super(const FestivalState()) {
    _initFestival();
  }
  // 초기화
  _initFestival([int? initPage]) async {
    final page = initPage ?? state.page;
    final festivalList = await getFestivalList(page);

    if (festivalList == null) {
      state = state.copyWith(page: page, isLoading: false);
      return;
    }

    debugPrint('get festival is ${festivalList.length}');
    state = state.copyWith(
        page: page, isLoading: false, festivalList: festivalList);
  }

  // 추가로 불러오기 (페이징)
  loadMoreFestival() async {
    StringBuffer bf = StringBuffer();

    bf.write('try to request loading ${state.isLoading} at ${state.page - 1}');
    if (state.isLoading) {
      bf.write(' fail');
      return;
    }
    bf.write(' success');
    debugPrint(bf.toString());
    state = state.copyWith(
      isLoading: true,
      isLoadMoreDone: false,
      isLoadMoreError: false,
    );

    final festivalList = await getFestivalList(state.page - 1);

    if (festivalList == null) {
      // error
      state = state.copyWith(isLoadMoreError: true, isLoading: false);
      return;
    }

    debugPrint(
        'load more ${festivalList.length} posts at page ${state.page - 1}');
    if (festivalList.isNotEmpty) {
      // if load more return a list not empty, => increment page
      state = state.copyWith(
          page: state.page - 1,
          isLoading: false,
          isLoadMoreDone: festivalList.isEmpty,
          festivalList: [...state.festivalList!, ...festivalList]);
    } else {
      // not increment page
      state = state.copyWith(
        isLoading: false,
        isLoadMoreDone: festivalList.isEmpty,
      );
    }
  }

  // 새로고침
  Future<void> refresh() async {
    _initFestival(20230711);
  }
}

5. Riverpod :: 인덱스 값 관리를 위한 state, provider, notifier 선언

import 'dart:async';

import 'package:culture_app/model/festival_model.dart';
import 'package:culture_app/http_client.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter/foundation.dart';
import 'package:freezed_annotation/freezed_annotation.dart';

part 'onboarding_index_provider.freezed.dart';

@freezed
abstract class OnboardingIndexState with _$OnboardingIndexState {
  const factory OnboardingIndexState({
    @Default(0) int pageIndex,
  }) = _OnboardingIndexState;
  const OnboardingIndexState._();
}

final onboardingIndexProvider =
    StateNotifierProvider<OnboardingIndexNotifier, OnboardingIndexState>((ref) {
  return OnboardingIndexNotifier();
});

class OnboardingIndexNotifier extends StateNotifier<OnboardingIndexState> {
  OnboardingIndexNotifier() : super(OnboardingIndexState()) {
    _initFestival();
  }
  // 초기화
  _initFestival() async {}

  // pageIndex를 index 파라미터로 변경하는 함수
  void changePageIndex(int index) {
    state = state.copyWith(pageIndex: index);
  }
}

6. freezed 빌드를 위한 freezed.sh 쉘 스크립트

flutter pub run build_runner build --delete-conflicting-outputs

아래와 같이 자주 쓰는 색을 변수로 저장하여, 재사용성이 높아져 코드의 유지보수성이 증가한다.

import 'package:flutter/material.dart';

// Basic Color
const Color kWhiteColor = Color(0xFFFFFFFF);
const Color kBlackColor = Color(0xFF000000);

// System Color
const Color kSystemErrorColor = Color(0xFFFC444F);
const Color kSystemSuccessColor = Color(0xFF30E181);
const Color kSystemWarningColor = Color(0xFFFFD362);

// Color Pallette
const Color kPrimaryColor = Color(0xFF4880EE);
Color kPrimaryColorOp = const Color(0xFF4880EE).withOpacity(0.35);

const Color kIconBackgroundColor = Color(0xFFFAFAFC);
const Color kKakaoBackgroundColor = Color(0xFFFEE500);
const Color kFacebookBackgroundColor = Color(0xFF1E70E9);

// 텍스트 폼
const Color kTextLeftBarColor = Color(0xFF4B6AEA);
const Color kTextBottomBarColor = Color(0xFF5991F4);

const Color kGrayF2 = Color(0xFFF2F3F5);
const Color kGrayF5 = Color(0xFFF5F5F5);
const Color kGrayF8 = Color(0xFFF8F8FA);
const Color kGrayAF = Color(0xFFAFB7BF);
const Color kGray87 = Color(0xFF878B95);

const Color kBlue37 = Color(0xFF3767D3);

// nav
const Color kNavBackground = Color(0xFF1F1F1F);

const Color kPapsText = Color(0xFF3F4656);

여러 텍스트 스타일을 미리 저장해두고, 

import 'package:culture_app/constant_color.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

// ...을 알려주세요
TextStyle kGrade1 = TextStyle(
  fontSize: 30.sp,
  color: kBlackColor,
  fontWeight: FontWeight.w700,
  height: 1.2,
);

// ...을 알려주세요
TextStyle kHeadline1 = TextStyle(
  fontSize: 24.sp,
  color: kBlackColor,
  fontWeight: FontWeight.w700,
  height: 1.5,
);

//
TextStyle kHeadline2 = TextStyle(
  fontSize: 22.sp,
  color: kBlackColor,
  fontWeight: FontWeight.w500,
  height: 1.5,
);

TextStyle kHeadline3 = TextStyle(
  fontSize: 20.sp,
  fontWeight: FontWeight.w500,
  height: 2,
);

//
TextStyle kHeadline4 = TextStyle(
  fontSize: 18.sp,
  fontWeight: FontWeight.w500,
  height: 2,
);

// 로그인을 하면 , 아이콘 텍스트
TextStyle kBody1 = TextStyle(
  fontSize: 16.sp,
  color: kBlackColor,
  fontWeight: FontWeight.w500,
  height: 1.5,
);
// 카카오계정으로 로그인 ...
TextStyle kBody2 = TextStyle(
  fontSize: 14.sp,
  fontWeight: FontWeight.w700,
  height: 1.5,
);

// 텍스트 버튼
TextStyle kBody3 = TextStyle(
  fontSize: 14.sp,
  fontWeight: FontWeight.w500,
  height: 1.5,
);
// 텍스트 버튼
TextStyle kBody4 = TextStyle(
  fontSize: 12.sp,
  fontWeight: FontWeight.w500,
  height: 1.5,
);
TextStyle kBody5 = TextStyle(
  fontSize: 10.sp,
  fontWeight: FontWeight.w500,
  height: 1.5,
);
TextStyle kBody6 = TextStyle(
  fontSize: 8.sp,
  fontWeight: FontWeight.w700,
  height: 1.0,
);

// 폼 텍스트
// 힌트
TextStyle kHint1 = TextStyle(
  fontSize: 20.sp,
  fontWeight: FontWeight.w500,
  color: const Color(0xffAFB7BF),
  height: 1.8,
);
// 힌트
TextStyle kHint2 = TextStyle(
  fontSize: 14.sp,
  color: const Color(0xffAFB7BF),
  height: 1.8,
);
// 라벨
TextStyle kLabel1 = TextStyle(
  fontSize: 12.sp,
  fontWeight: FontWeight.w500,
  color: const Color(0xff8A929E),
);
// 텍스트
TextStyle kText1 = TextStyle(
  fontSize: 20.sp,
  fontWeight: FontWeight.w500,
  color: kBlackColor,
);

// 에러
TextStyle kError1 = TextStyle(
  fontSize: 12.sp,
  fontWeight: FontWeight.w500,
  color: kSystemErrorColor,
);

// 로그인을 하면 , 아이콘 텍스트
TextStyle kNextButton1 = TextStyle(
  fontSize: 16.sp,
  fontWeight: FontWeight.w400,
  height: 1.5,
);

아래와 같이 copyWith() 함수를 사용해 변경할 부분만 변경하면 텍스트 스타일을 쉽게 사용 가능하다.

Text(
    '${widget.festivalModel!.SRCHWRD_NM}\n영상으로\n체험하기',
    textAlign: TextAlign.center,
    style: kBody1.copyWith(
      height: 1.0,
      // color: kPapsText,
    ),
  ),

1. 배경

데이터베이스에서 데이터를 가져와 앱 프론트에 표시할 때, 서버와 API통신하는 경우가 많은데, API 통신 코드를 모듈화하여 유지보수가 용이하게 할 필요성이 있었다. 다양한 기능을 가진 Interceptor를 옵션에 추가해 개발 시 디버깅이 편하게 해야 했다.

2. 요구사항

2.1. dio

https://pub.dev/packages/dio

인기있는 http 라이브러리다. 다양한 기능이 포함되어있다.

2.2. alice

https://pub.dev/packages/alice

api 통신을 디버깅하거나 receiveTimeout 등의 설정을 할 수 있다.

2.3. hive

https://pub.dev/packages/hive

로그인 시 jwt token을 hive에 저장하고, API 통신 시 헤더에 이를 추가하여 유저임을 인증할 수 있다.

2. 코드

import 'dart:async';
import 'package:alice/alice.dart';
import 'package:hive/hive.dart';
import 'package:papsm/app/data/environment/environment.dart';
import 'package:papsm/app/dio/constant_dio.dart';
import 'package:dio/dio.dart';
import 'package:dio_cache_interceptor/dio_cache_interceptor.dart';
import 'package:flutter/material.dart';

import 'package:papsm/app/dio/interceptor/logging_interceptor.dart';

class DioHelper {
  Dio? dio;
  Alice? alice;

  DioHelper() {
    alice = Alice(showNotification: false);
    final options = BaseOptions(
      receiveTimeout: ConstantDio.timeout,
      connectTimeout: ConstantDio.timeout,
    );

    options.baseUrl = EnvironmentConstant.config ?? 'test';
    dio = Dio(
      options,
    );

    dio!.interceptors.add(LoggingInterceptors());
    dio!.interceptors.add(alice!.getDioInterceptor());
    dio!.interceptors.add(DioCacheInterceptor(options: dioCacheOptions));
  }

  Future<Map<String, dynamic>> get(String url,
      {dynamic param, bool? refresh}) async {
    final userModelBox = await Hive.openBox('userModelBox');
    String? token = userModelBox.get('token');
    dio!.options.headers["authorization"] = 'Bearer $token';
    final response = await dio!.get(
      url,
      queryParameters: param,
      options: refresh == true
          ? dioCacheOptions.copyWith(policy: CachePolicy.refresh).toOptions()
          : null,
    );
    return response.data as Map<String, dynamic>;
  }

  Future<Map<String, dynamic>> post(String url, dynamic body) async {
    final userModelBox = await Hive.openBox('userModelBox');
    String? token = userModelBox.get('token');
    dio!.options.headers["authorization"] = 'Bearer $token';
    final response = await dio!.post(url, data: body);
    return response.data as Map<String, dynamic>;
  }

  Future<Map<String, dynamic>> patch(String url, dynamic body) async {
    final userModelBox = await Hive.openBox('userModelBox');
    String? token = userModelBox.get('token');
    dio!.options.headers["authorization"] = 'Bearer $token';
    final response = await dio!.patch(url, data: body);
    debugPrint('[Response] ${response.data.runtimeType} ${response.data}');
    return response.data as Map<String, dynamic>;
  }

  Future<Map<String, dynamic>> put(String url, dynamic body) async {
    final userModelBox = await Hive.openBox('userModelBox');
    String? token = userModelBox.get('token');
    dio!.options.headers["authorization"] = 'Bearer $token';
    final response = await dio!.put(url, data: body);
    debugPrint('[Response] ${response.data.runtimeType} ${response.data}');
    return response.data as Map<String, dynamic>;
  }

  Future<Map<String, dynamic>> delete(String url, dynamic body) async {
    final userModelBox = await Hive.openBox('userModelBox');
    String? token = userModelBox.get('token');
    dio!.options.headers["authorization"] = 'Bearer $token';
    final response = await dio!.delete(url, data: body);
    debugPrint('[Response] ${response.data.runtimeType} ${response.data}');
    return response.data as Map<String, dynamic>;
  }

  void errorCheck(Map<String, dynamic> result, String err) {
    if (result['code'] != 200) {
      throw err;
    }
  }
}

CacheOptions dioCacheOptions = CacheOptions(
  store: MemCacheStore(),
  hitCacheOnErrorExcept: [401, 403],
  maxStale: const Duration(hours: 6),
);

DioHelper 생성자에서 .env 파일에서 저장된 서버의 주소로 baseUrl을 설정하였다.

dio interceptor로 LoggingInterceptor를 추가하여 API 통신 시 보내는 데이터와 받는 데이터를 로깅하는 기능을 추가했다.

dio interceptor로 CacheInterceptor를 추가하여 동일한 API 통신 시 6시간 마다 MemCacheStore에 저장하여 재활용할 수 있도록 하였다. (새로 요청하려면 refresh option을 true로 두면 된다.)

hitCacheOnErrorExcept에서 401, 403 error가 발생했을 때는 다시 요청하도록 했다.

1. 배경

매번 하는 일인데, 배포 심사할 때만 하다보니 까먹는 경우가 잦아 정리하려고 한다

2. 의존성 추가하기

flutter_launcher_icons: "^0.11.0"

https://pub.dev/packages/flutter_launcher_icons

3. flutter_launcher_icons.yaml

루트 폴더에 앱 아이콘의 경로 및 기타 정보를 설정하는 yaml 파일을 생성한다.

flutter_icons:
  android: "launcher_icon"
  ios: true
  remove_alpha_ios: true
  image_path: "assets/images/app_icon.png"

4. 앱 아이콘 적용하기

터미널에 아래 명령어를 사용하면, 해상도별로 android, ios 앱 아이콘이 적용된다

flutter pub run flutter_launcher_icons -f flutter_launcher_icons.yaml

Flutter 츠누봇 [Pull Request] :: [학식] 페이지 UI 퍼블리싱

https://github.com/cnu-bot/cnubot-client-app/pull/22

1. 요구사항

- 디자인 참고하여 UI 개발

- 공통 컴포넌트 설계

- TextStyle, Color 생성

- 1, 2, 3, 4학, 긱사, 생과대 식단 가져오기

- 원산지 파싱

2. 작업내용

영상으로 확인하기

https://www.youtube.com/shorts/EcfJ5q3RGHA

 

작업 상세내용

3. 코드리뷰

- conflic 해결방법 : git merge 제안

- 파일명, 함수명 오타 수정

4. Merge

Flutter 츠누봇 [Pull Request] :: [소식] 페이지 API 연동

https://github.com/cnu-bot/cnubot-client-app/pull/20

1. 요구사항

2. 작업내용

영상으로 확인하기

https://www.youtube.com/watch?v=1Xn7CVbj8jU 

작업 상세내용

3. 코드리뷰

- Shell script 사용

- Get.back()을 Get.toNamed()로 수정

- enum에 API요청을 위한 param 변수 추가

4. Merge

Flutter 츠누봇 [Pull Request] :: [소식] 페이지 UI 퍼블리싱

https://github.com/cnu-bot/cnubot-client-app/issues/11

1. 요구사항

- 아래 디자인을 바탕으로 UI 개발

- 데이터는 임시로 더미데이터를 생성하여 진행

2. 작업내용

영상으로 확인하기

https://www.youtube.com/shorts/y4_hiaOdu1o

 

작업 상세내용

3. 코드리뷰

- default로 정해져있는 코드 생략

- 유틸함수 분리

- Color 변수 이름 컨벤션 : kBlue213B85 -> kBlue21 로 수정

- Color 변수는 copyWith() 함수를 사용하여 재사용성 높임

- BottomNavigation 추가

4. Merge

Flutter 츠누봇 [Pull Request] :: flutter_lints rules 추가

https://github.com/cnu-bot/cnubot-client-app/pull/17

1. 요구사항

- 협업 시 코드의 일관성을 위해 lint rule 적용

2. 작업내용

root폴더의 analysis_options.yaml 파일에 해당 lint 규칙 추가

linter:
  rules:
    avoid_print: true		// release모드에서 출력 안되게 변경
    prefer_single_quotes: true		// single quote 통일
    require_trailing_comma: true
    always_use_package_imports: true	// 절대경로 사용
    prefer_final_locals: true		// final 사용 (컴파일러 성능 향상)
    camel_case_types: true		// camel_case_types

lint rule 적용하면서 생긴 Problems 수정

3. 코드리뷰

4. Merge

Flutter 츠누봇 [Pull Request] :: clean & 3-layered architecture 적용

https://github.com/cnu-bot/cnubot-client-app/pull/9

1. 요구사항

- Project resetting

-folder structure refactoring

- http => dio

- color palette

- font typography

2. 작업 내용

README.md 파일 업데이트

clean & 3-layered 아키텍쳐 적용

dioHelper - provider - repository - controller - GetView 순서로 API에서 가져온 데이터 표시

.env 파일 추가

env 파일은 API서버 IP, Service key 같은 민감한 정보를 저장합니다. (.gitignore에 .env추가 완료)

3. 코드리뷰

- 폴더 오타 수정

- ios platform 버전 12.0으로 수정 (Podfile)

- 파일명 단수로 통일

- 절대경로로 통일

- 필요없는 코드 제거

- dioHelper 추가

- http 의존성 제거 (dio로 대체)

- DI (의존성 주입) 

- CI 오류 수정

4. Merge

 Flutter 츠누봇 [Pull Request] :: 의존성 추가, 화면 비율 설정

https://github.com/cnu-bot/cnubot-client-app/pull/3

1. 요구사항

- 의존성 추가

- 화면 비율 설정

2. 작업 내용

의존성 추가

cupertino_icons: ^1.0.2
freezed_annotation: ^2.1.0
json_annotation: ^4.6.0
http: ^0.13.5
get: ^4.6.5
url_launcher: ^6.1.5
cached_network_image: ^3.2.1
shimmer: ^2.0.0
intl: ^0.17.0
device_info_plus: ^3.2.4
flutter_screenutil: ^5.5.3+2
flutter_local_notifications: ^9.7.0
flutter_native_timezone: ^2.0.0
carousel_slider: ^4.1.1
url_launcher: ^6.1.5
flutter_dotenv: ^5.0.2
hive: ^2.2.3
hive_flutter: ^1.1.0
flutter_launcher_icons: ^0.10.0

화면 비율 설정 (375, 812)

return ScreenUtilInit(
      designSize: const Size(375, 812),
      minTextAdapt: true,
      builder: (context, child) {
        return GetMaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'cnubot',
          initialRoute: Routes.HOME,
          initialBinding: AppBinding(),
          getPages: AppPages.routes,
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
        );
      },
    );

3. 코드리뷰

- 불필요한 용량을 차지하기 때문에 현재 필요없는 의존성(dependencies)들 제거하기

4. Merge