[Flutter] Firebase Remote Config에서 Json데이터 활용하기

Remote Config는 기본적으로 bool, double, int, string 형식의 변수 만을 사용할 수 있다. 하지만, 많은 양의 데이터를 사용하기 위해서 우리는 json 형식의 변수를 자주 사용하기 때문에 Remote Config에서 json 데이터를 다루는 방법을 기술하려 한다.

 

필자는 Remote Config를 사용하여 긴급 공지사항을 작성하기 위해 시도를 하고 있다. 다음 단계를 따라가며 해야 하는 일과 주의 해야 할 사항에 대해 파악하기를 바란다.

 

🍒 RemoteConfig 연결

 

코드 상에서 연결하는 부분은 다음과 같다. Firebase를 Flutter에 연동하고, RemoteConfig를 사용하기 위한 준비 과정을 진행하지 않았다면, [ Firebase Remote Config ]를 참고하여 진행해 주길 바란다.

final remoteConfig = FirebaseRemoteConfig.instance;
remoteConfig.setConfigSettings(RemoteConfigSettings(
    fetchTimeout: Duration(milliseconds: 3000),
    minimumFetchInterval: Duration(milliseconds: 1)));
    
remoteConfig.setDefaults({
  'notice': Notice().toJson().toString(),
});

await remoteConfig.fetchAndActivate();

우리가 RemoteConfig에서 데이터를 갱신했을 때, 가끔 데이터가 바로 적용되지 않는 모습을 확인할 수 있다. 그 이유는 당신이 minimumFetchInterval을 너무 높게 잡았기 때문이다.

 

minimumFetchInterval에 설정해 놓은 시간을 기반으로 RemoteConfig에서 변경된 게시에 대해 fetch, 가져오기 때문에 테스트를 진행하는 과정 중엔 최소 시간으로 설정해 주길 바란다.

(RemoteConfig 테스트 도구를 활용하는 것이 가장 좋은 방법이나, 필자는 기대 비용이 너무 높다고 생각해서 진행하지 않았다.)

 

fetch 이후엔 꼭 Activate를 진행해 주어야 RemoteConfig 값을 활용할 수 있으므로 유념하자. 자 이제 이를 기반으로 Entity를 만들고, Json 데이터 생성 과정과 가공을 진행해보자.

 

🍒 공지사항 Entity/Model 생성

 

나는 제목, 내용, 날짜, 붙임말로 구성된 Notice Class를 활용하여 Json 데이터를 가공하고 활용할 것이다.

class Notice {
  String? title;
  String? body;
  String? date;
  String? footer;

  Notice({this.title, this.body, this.date, this.footer});

  Notice.fromJson(Map<String, dynamic> json) {
    title = json['title'];
    body = json['body'];
    date = json['date'];
    footer = json['footer'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['date'] = this.date;
    data['title'] = this.title;
    data['footer'] = this.footer;
    data['body'] = this.body;
    return data;
  }
}

 

🍒 Remote Config에 Json 데이터 생성

 

Remote Config에서 변수를 생성하면, 편하게 문자열 작성을 도와주는 편집기를 제공하고 있다. 여기서 기본적인 Json 데이터를 생성해준다.

{
	"title": "제목",
	"body": "내용",
	"date": "날짜",
	"footer": "붙임말",
}

자 대부분의 경우 Json 데이터를 직접 작성하는 경우가 드물기 때문에, 작성하라면 위와 같이 작성할 것이다. 하지만 여기엔 결정적인 결함이 있다.

 

바로 데이터 마지막 요소의 ( , )이다. 이는 syntax error를 일으키기 가장 쉬운 오류이므로 꼭 신경 써서 제거해 주길 바란다. 다시 작성된 Json 데이터는 다음과 같다.

{
	"title": "제목",
	"body": "내용",
	"date": "날짜",
	"footer": "붙임말"
}

이 상태로 RemoteConfig에서 getString 메소드를 활용해 데이터를 가져오면 똑같이 출력 된다. 그 모습에 얼핏 정확하게 데이터를 가져오지 않았나 생각할 수 있지만, jsonEncode를 활용하여 String으로 변환하면 다음과 같은 모습이 된다.

String remoteConfigData = remoteConfig.getString('notice'); // notice = 변수 이름
var remoteConfigJsonData = jsonEncode(remoteConfigData);

// remoteConfigData result
""{"\\n "title": "제목",\\n "body": "내용",\\n	"date": "날짜",\\n	"footer": "붙임말"\\n"}""

정확한 작성은 아니나 특수문자, 뛰어쓰기, 줄바꿈들이 문자로 치환되어 문자열에 병합되는 모습을 확인할 수 있다.

 

왜 굳이 jsonEncode를 진행하느냐, String이니까 바로 jsonDecode를 진행하면 되지 않느냐, 라고 생각하실 수 있다. 하지만, 우리가 기존에 작성했던 Json 데이터에 "줄바꿈"이 포함되어 있고, 그대로 jsonDecode를 진행한다면 다음과 같은 오류를 만날 수 있다.

FormatException (FormatException: Unexpected character (at line 6, character 1) } ^ )

이런 오류가 발생하기 때문에 우리는 Json 데이터를 편하게 작성한 뒤, 꼭 다음처럼 정제해주어야 한다.

{"title":"제목","body":"내용","date":"날짜","footer":"붙임말"}

보통 API 서버에서 Json 데이터를 받은 뒤 출력하면 위와 같은 모습임을 느낄 수 있다.

 

자 그럼 jsonDecode를 활용하여 Map<String, dynamic> 형식의 json 데이터를 만들어주고, 이를 Notice Class로 변환하여 사용해보자.

String remoteEmergencyNoticeData = remoteConfig.getString('emergency_notice');

Map<String, dynamic> remoteEmergencyNoticeJsonData = jsonDecode(remoteEmergencyNoticeData);

Notice notice = Notice.fromJson(remoteEmergencyNoticeJsonData);

여기까지 Flutter에서 RemoteConfig의 Json데이터를 활용하는 방법이다. 중간 중간에 풀어놓은 사소한 과정에 대해 잊지 않기를 바란다.