240819~240820 TIL

① 배운 것

IOS Admob 에러 해결

테스트광고 ID로 빌드할때는 문제가 없었는데, 실제 광고 ID를 넣고 빌드하니까
아래와 같은 에러가 나고 광고 로드가 실패했다.

Ad failed to load: LoadAdError(code: 1, domain: com.google.admob, message: Request Error: No ad to show., responseInfo: ResponseInfo(responseId: null, mediationAdapterClassName: null, adapterResponses: [], loadedAdapterResponseInfo: AdapterResponseInfo(adapterClassName: , latencyMillis: 0, description: , adUnitMapping: {}, adError: null, adSourceName: , adSourceId: , adSourceInstanceName: , adSourceInstanceId: )), responseExtras: {})

code: 1 에러는 타입에러(ID는 보상형광고인데 코드 상 구현된 것은 보상형전면광고임 같은 상황)라고 해서 타입을 다시 확인해봤지만 ID와 코드 모두 보상형광고로 똑같았다.
고민하다가 Admob 권한을 받아서 설정을 뒤적거리기 시작 ->
해결책은 애드몹 홈페이지 설정 -> 기기테스트 -> 등록 에서 내 테스트폰 IOS를 등록 해줘야 했다.
등록할 때 기기ID를 등록해야하는데 플러터 IOS 같은 경우에는 advertising_id 패키지를 사용하면 된다.

getADID() async {
  try {
    advertisingId = await AdvertisingId.id(true);
    print('advertisingId: $advertisingId'); //👈
  }
  on PlatformException {
    advertisingId = null;
  }
}

그리고 IOS같은 경우는 테플에 올리고 다운받아야 광고가 제대로 나온다는 스택오버플로우 답변도 있으니 테플에 올려서 실제 광고가 잘 나오는지 확인해보는 것이 좋을 것 같다.
그리고 (특히 사용자 수가 작을 때) 특정 폰에서 광고를 너무 자주 보거나 광고를 클릭하면 애드몹 계정 정지를 먹을 수 있다고 하니 평소 개발 시에는 테스트 ID로 빌드하고 확인해보자!

setState로 전체 위젯이 리빌드 되는 것을 ValueListenableBuilder을 이용해 특정 위젯만 리빌드 되도록 변경

//이전 코드에서는 버튼을 클릭하면 setState를 호출하여 전체 위젯이 리빌드 되었다. 
//그래서 필요 없는 부분 까지 리빌드 되는 경우가 생김 

//ValueListenableBuilder로 리빌드가 필요한 위젯만 리빌드 되게 수정
ValueNotifier <int> someData = ValueNotifier <int> (0);
ValueListenableBuilder( 
  valueListenable: someData, //👈 이 데이터가 변경되면 
  builder: (context, value, child) {
    return dotsIndicators( //👈 이부분만 리빌드 된다
      activeIndex: someData.value,
      itemCount: someLists.length,
    );
    //child:에 들어가는 위젯은 ValueListenableBuilder가 리빌드 되어도 리빌드 되지 않음 
  },
)

//someData는 someData.value = someData.value+1; 
//이런식으로 필요한 곳에서 변경하면 된다.

키보드가 보여지거나 안보여지면 setState가 호출된다.

• 그 이유는 키보드가 보여지거나 안보여질때마다 화면 사이즈를 다시 계산해야하기 때문에 setState를 호출하는것이 당연하다고 한다.
  그래서 만약 나는 setState를 호출 하는 부분이 없고 키보드만 보이고 안보이는 동작을 했는데 setState가 호출이 된다면 키보드 때문인 것이다..!

Optimistic Ui 적용

• 상황 : 공감버튼을 누른다 -> API호출 -> API 응답이 성공하면 ref.watch로 관찰하고 있는 provider의 상태 업데이트(공감 버튼을 누른 상태 & 갯수 +1)
  이 때 유저가 버튼을 누른 후 API 응답이 올때까지 시간이 좀 걸리기 때문에 UI가 바로 바뀌지 않는다는 문제가 있었음.
  그래서 공감 버튼을 누른 후 setState로 위젯 내에서 멤버변수로 관리되는 버튼 누른 상태 flag & 공감갯수 변수를 업데이트 하는 방식으로 구현했었다.

• 문제 : 공감 버튼이 3개가 있었는데 3개를 빠르게 연달아 누르면 내가 멤버변수를 업데이트해서 일어나는 setState와 서버에서 응답을 받은 후 ref.watch로 관찰하던 state를 업데이트 쳐서 위젯이 리빌드 되는 상황이 꼬여서 공감 숫자가 순간 올라갔다가 다시 내려갔다가 다시 올라가는 것 처럼 보였다.

• 해결 : 멤버변수를 사용하지 않고 멤버변수 setState를 사용하지 않으면서도 UI를 빠르게 업데이트 하기 위해
  공감버튼을 누른다 -> 일단 ref.watch로 관찰하고 있는 provider 상태 업데이트(공감 클릭 한것으로 변경 및 갯수 +1) -> API 요청 -> API응답 성공 시 끝, 실패 시 ref.watach로 관찰하고 있는 provider 상태 되돌리기
  이런식으로 Optimistic UI를 적용했다.

② 회고 (restropective)
강의에서만 들었던 optimistic ui를 실제로 적용해보는 경우가 생기다니 뿌듯하다~~

③ 개선을 위한 방법