[Flutter] (Project) MapleApp: 6. Notifier 구현

🐇 Notifier Implement

MainHome Page가 만들어졌기 때문에 캐릭터의 닉네임을 출발로 다양한 정보를 얻어와야 한다. 그래서, 프로젝트에 필요한 4개의 model, Notifier, NotifierProvider를 구현해 나가려 한다. 여기서 모든 정보는 백엔드와 비동기통신이 이뤄지기 때문에, AsyncNotifier과 AsyncNotifierProvider를 사용하고 model은 fromJson/toJSon에 대한 기본적인 구현이 필요하다.

 

🥕 Model

Model을 직접 구현해 가기란 정말 어렵다. 다양하고 방대한 양의 속성을 한땀 한땀 설계해 나가야 하기 때문에 정말 복잡하지 않을 수 없다. 하지만 이를 간편하게 해주는 서비스가 존재한다.

※ reference : https://javiercbk.github.io/json_to_dart/

 

이 서비스는 JSON데이터를 삽입하면 Dart Class로 변환해준다. 물론 모든 속성이 nullable이며 사용자가 원하는 대로 추가적인 구현은 진행해야 하지만, JSON 객체를 Dart Class로 변환하는 초반 러닝커브와 시간을 대폭 줄여줄 수 있다. 이 방법으로, Swagger 또는 API 문서를 활용해 JSON 객체를 Model로 변환하는 작업을 진행했다.

 

MapleStory Open API는 약 20가지의 api를 제공하고, 개발자에 따라 다르겠지만 20가지의 분류는 N가지의 대 분류로 나눌 수 있다. 나는 캐릭터/장착장비/스탯/스킬 4가지의 대 분류로 나누었기 때문에, 20개의 Model을 만든 후 4개의 Model에 나누어 새로운 Model을 구현해야 했다.

 

🥕 AsyncNotifier, AsyncNotifierProvider

api통신을 바로 하면 좋겠지만, 우리는 json 객체로 된 dummy data를 사용해야 한다. 기본적으로 AsyncNotifier를 구현해 놓고, 기본 Notifier를 구현하여 Application 시작 시 데이터를 삽입 활용하도록 하자.

 

🍒 dummy data of json object

dummy.json 파일을 우선 pubspec의 flutter: aseets: 하위에 추가해준다.

파일을 읽고 decode하는 것은 매우 간단하다. load 경로의 json파일 가져오고 복호화 하여 변수에 담아준 뒤 확인해보자.

String jsonString = await rootBundle.loadString("~?")
final jsonResponse = json.decode(jsonString);

여기서 주의할 점은, Application 내에서 대 분류인 4개의 Model에 대해서 상태 관리를 진행하는데, Application 내에서 관리하는 Single 개체는 copyWith method를 꼭 구현해주어야 한다.

 

copyWith method는 State의 SingleTon Pattern을 지켜주기에 아주 훌륭한 함수이고, 추가/삭제/생성에 용이하다. copyWith 함수의 기본적인 내용은 다음과 같다.

MainCharacter copyWith(
					{String? ocid,
          Basic? basic,
          Dojang? dojang,
          Popularity? popularity,
          Propensity? propensity}) =>
      MainCharacter(
          ocid: ocid ?? this.ocid,
          basic: basic ?? this.basic,
          dojang: dojang ?? this.dojang,
          popularity: popularity ?? this.popularity,
          propensity: propensity ?? this.propensity);

새로운 객체를 생성할 때, 기존의 데이터와 병합하여 생성한다.

 

⚠️ type dismatch

Json 객체에서 특정 속성 값이 int형식으로 들어오는 경우가 있다. 하지만, 내부에 int 라는 변수가 있어 int 속성을 받을 수 없었다. 상대적으로 활용도가 더 적은 속성 값을 double로 수정하고, fromJson을 진행할 때 double로 type을 맞추어주었다.

 

이때 주의할 점은 fromJson에서 Map으로 json 개체에 접근할 때, ? (is null chekc)를 진행해 주어야 cannot find error를 넘길 수 있으므로 주의해야 했다.