Json 데이터 가공하기 with Flutter
시작하며
테스트 피라미드 전체 영역의 테스트 자동화 관점에서 Flutter는 Native 앱 서비스와 마찬가지로 React Native에 비해 도구 활용 선택의 폭이 넓습니다. Flutter 자체에서 단위, 위젯, 통합 테스트 라이브러리가 존재하기 때문인데요. 만약 React Native 앱 서비스를 통합 테스트 이상의 테스트 레벨에서 효율적으로 검증하기 위해선 Detox와 같은 타사 테스트 프레임워크를 사용해야 합니다.
실무에서는 React Native로 개발된 앱 서비스를 테스트해야 하기 때문에 개인적인 시간에는 도태되지 않고 새로운 관점을 계속해서 유지하고자 Flutter를 학습하던 중, Flutter에서 Json 데이터를 가공하는 과정에 대해 포스팅하게 되었습니다.
1. Flutter 프론트엔드 구현 과정
lib 디렉토리 하위에 재사용성을 고려해서 프론트엔드 구현에 필요한 각종 컴포넌트를 구현하고 서버로부터 전달된 데이터를 각 컴포넌트에 적절한 데이터로 전달하기 위해서 데이터를 모델링하는 과정이 필요합니다.
구현 초기에는 위와 같이 프론트엔드에 보이는 데이터를 임시로 넣고 UI 디자인을 확인하며 레이아웃과 기능을 구현합니다. 추후 서버로부터 전달된 json 데이터를 가공하여 사용자에게 조건에 따라 필요한 데이터가 보이도록 구현되어야 합니다.
2. Postman 활용
프론트엔드를 구현하다 보면 필요한 데이터를 요청했을 때 정상 응답 여부 확인이 필요합니다. 이 과정에서 Postman을 활용합니다.
예를 들어 정부에서 관리하는 오픈 API를 살펴보면 해당 API 사용 가능한 방법이 정리되어 있습니다. 필요로 하는 API로 요청할 때 꼭 필요한 값과 옵션 값을 확인할 수 있습니다. 요청 성공 시 받을 수 있는 응답 메시지 명세도 확인할 수 있습니다.
API 문서 확인 후 Postman을 활용하여 서비스 개발에 필요한 데이터가 잘 응답되는지를 검증할 수 있습니다. Collections을 생성하여 Query Params에 API 문서를 참고하여 필수 값과 필요로 하는 옵션 값을 KEY VALUE에 입력하여 요청 시, 응답 메시지 명세에 해당하는 데이터를 json 형태로 전달받을 수 있습니다.
원하는 데이터가 잘 오는지 확인했다면 해당 API를 프로젝트에서 사용할 수 있도록 구현하는 과정이 필요합니다. 데이터가 잘 받아지는지 확인하는 과정에서 null 값으로 전달되는 항목도 있는지 체크하면 좋습니다.
Map 자료형의 데이터를 그대로 사용할 수는 없고 서비스에 필요한 데이터만 가공하는 과정이 필요한데 이때 예외 처리가 필요하기 때문입니다.
3. 서버에 요청하여 Json 데이터 받아오기
Postman에서 확인했듯이 실제 서버로부터 존재하는 데이터를 전달받긴 했지만 앞서 언급한 것처럼 Map 자료형의 데이터를 그대로 사용할 수는 없고 서비스에 필요한 데이터를 추출하여 사용자에게 조건에 따라 보이도록 구현되어야 합니다.
우선 Postman이 아닌 Flutter 프로젝트에서 서버에 요청을 날려 데이터를 json으로 받아오도록 구현해야 합니다.
HomeScreen을 StatelessWidget에서 StatefulWidget으로 변경하고 Flutter Hot Restart를 할 때마다 만들어둔 fetchData 함수를 실행하여 서버로부터 전달받은 데이터를 콘솔 창에 출력하도록 했습니다.
HomeScreen State가 한번 생성될 때 dio 패키지를 사용해서 네트워크 요청한 코드가 담긴 fetchData() 함수가 실행되도록 구현했습니다. 테스트 진행 시, Hot Reload는 State 재생성이 불가하므로 Hot Restart를 사용해야 합니다.
dio 패키지를 활용하여 Postman에서 확인한 데이터와 Flutter 프로젝트 콘솔 창에 출력된 데이터가 동일한 것을 확인했습니다.
4. Json 데이터 가공
서버로부터 전달받은 데이터 구조를 확인해보면 서비스 개발에 필요치 않은 데이터가 포함된 것을 알 수 있습니다. 예를 들어 items Key 내부의 리스트로 구성된 미세먼지 데이터만 가져오도록 전달받은 데이터를 가공해야 합니다.
items Key 내부의 리스트로 된 모든 데이터를 가져오도록 했습니다. 이제 위와 같은 데이터를 보기 편하고 flutter 앱 개발에 사용 가능토록 가공하면 됩니다.
4-1. StatModel 설계
Flutter 서비스 개발에 필요한 데이터만 사용할 수 있도록 StatModel 클래스를 생성하고 json 형태에서 데이터를 받아올 수 있도록 구성했습니다.
StatModel의 데이터를 살펴보면 앞서 Postman에서 응답받은 데이터와 동일한데요. Postman에서 응답받은 key 값들을 StatModel 클래스에 필요 없는 데이터를 제외하고 속성으로 저장했습니다. StatModel을 인스턴스화(instantiate) 할 때 json으로부터 해당 StatModel을 변환할 수 있게 해주는 생성자(constructor) 의미인 'fromJson' named 생성자를 사용하여 json 파라미터를 받도록 했습니다. Postman에서 테스트해보면 json 데이터를 받아올 때 string으로 받아오기 때문에 double로 parsing 했습니다. 만약 서버로부터 응답받은 데이터에 null 값이 포함될 경우 문자열 0으로 처리했습니다.
이제 json 데이터를 넣어주기만 하면 StatModel을 구현할 수 있게 됩니다. 생성자안에 데이터 구현 로직을 작성하지 않고 다른 방법으로도 구현 가능하지만, StatModel을 사용할 때 해당 로직을 매번 구현하지 않고 json 데이터만 넘겨주면 StatModel이 생성되도록 하기 위해 생성자 내부에 데이터 구현 로직을 작성했습니다.
ItemCode는 raw 파라미터를 넣고 enum으로 변환하는 코드를 작성했습니다. PM25에 한해서만 PM2.5로 데이터를 받기 때문에 조건 처리했습니다.
4-2. StatModel 사용
['response']['body']['items']는 Postman에서 받아온 리스트 값입니다. 리스트 안에는 각각의 데이터가 fromJson에서 전달받고 싶었던 json 형태(map)로 되어있습니다. 리스트를 정확히 매핑(mapping)해줬기 때문에 값들이 하나씩 들어오게 됩니다.
콘솔 결과가 이전과는 달리 Instance of 'StatModel'로 보이게 되었습니다. 이로써 15개의 데이터가 StatModel로 변환된 것을 알 수 있습니다. 이제 Flutter 앱 서비스 개발에 필요한 데이터를 쉽게 다룰 수 있도록 각 컴포넌트 개발에 필요한 데이터를 StatModel을 활용하여 구현할 수 있게 됩니다.
마치며
플러터에서 서버로부터 전달된 json 데이터를 가공하는 과정을 살펴보았습니다. json 데이터와 관련된 개념은 flutter뿐 아니라 개발과 테스트 과정에서 자주 접하게 되는 개념이기 때문에 테스트 피라미드 전체 영역에서의 품질 보증을 위해서 중요한 개념입니다.
일반적으로 QA팀에서 Postman을 활용한 API 테스트 자동화를 진행합니다. 이러한 테스트를 구축하고 구현하는 과정에서 꼭 필요한 개념인 json과 http 통신과 같은 개념을 내부 구현 과정을 통해 살펴보았습니다.
감사합니다.
