[Flutter] Dio + Retorfit + JsonSerializable API 통신

📌 Mac M2 pro 사용

오늘은 Dio, Retorfit 라이브러리에 대해 알아보려한다. 이전에 http를 이용한 통신에 대해 알아보았는데 이번에는 Dio와 Retorfit을 이용한 API통신에 대해 작성할 것이다.
그리고 JsonSerializable를 사용하여 자동 직렬화에 대해서도 알아보려한다.

Json 직렬화

Json 직렬화 방법에는 크게 두가지가 있는데, 그 중 하나인 코드 생성을 사용한 자동 직렬화 방법을 사용해 볼 것이다.
먼저 이 방법을 사용하기위해서는 패키지를 아래와 같이 추가해주어야 한다.

패키지를 추가하였다면 모델 클래스를 작성해야한다. 자신이 만들 모델 클래스를 작성해준다. 나는 이름, 나이, 생년월일이 들어있는 humanInfo 리스트 모델을 아래와 같이 작성해 주었다. 내 코드 기준으로 part 'rsp_human_info.g.dart'부분과 _$RspHumanInfoFromJson, _$HumanInfoFromJson 부분에서 에러가 발생하였을 것이다. 해당 부분을 잘못 작성한 것이 아니니 걱정하지 않아도 된다.
위 처럼 작성했다면 터미널을 열어 아래의 명령어를 입력해준다.

flutter pub run build_runner build

명령어를 입력하고 나면 에러가 없어지고 아래의 “rsp_human_info.g.dart” 파일이 생성된 것을 확인할 수 있을것이다! 이렇게 코드 생성을 사용한 자동 직렬화 방법으로 Json 직렬화를 해보았다. 이후 내용에 이걸 이용하는 방법에 대해서도 설명할 것이다.

Dio

Dio는 Flutter에서 http요청을 처리하는 라이브러리이다. 네트워크 통신, 데이터 로딩, API호출 등 다양하게 활용이 가능하다. 로깅, 인터셉트를 지원하는 부분에서 Android에서 사용해본 okHttp 라이브러리와 유사하다.

Dio 사용법

Dio를 사용하기 위해서는 먼저 패키지를 아래와 같이 추가해주자.


추가해준 뒤 나는 Dio 클라이언트를 아래와 같이 생성해주어서 사용하였다. interceptors의 경우 깃허브에 올린 Json파일을 가지고올 때 Map<String, dynamic>으로 들어와야할 값이 String으로 들어와 interceptors를 사용해 해당 값을 수정하였다.

Retorfit

Retrofit은 REST API를 위한 HTTP 클라이언트를 생성하는 라이브러리이다. Retrofit은 간편하게 사용가능하고 다양한 http 요청, 옵션, 기능을 제공한다.

Retrofit 사용법

Retrofit역시 사용하기 위해서는 먼저 패키지를 아래와 같이 추가해주어야한다.

retrofit_generator의 경우는 추가를 안해줘도 상관없지만 자동으로 코드를 생성해주기 위해 추가해주었다.

이제 서버와 통신하는데 필요한 API를 정의하는 부분에 대해 알아보자. 코드를 하나하나 살펴 보자.

@RestApi 어노테이션은 API 인터페이스를 정의하는 데 사용된다. 위 코드에서는 baseUrl을 Dio에서 설정해주어 생략하였지만, 옵션으로 baseUrl파라미터를 사용해 설정할 수 있다.

@GET 어노테이션은 /human_info.json 엔드포인트에 대한 GET 요청을 정의한다.

part 'api_retrofit_client.g.dart'의 경우는 코드 자동생성을 위해 추가해준 부분인데, 이 부분도 위의 직렬화와 동일하게 터미널에 아래의 명령어를 입력해주면 오류가 없어질 것이다.

flutter pub run build_runner build

입력 후 오류가 없어지면서 아래처럼 api_retrofit_client.g.dart 클래스가 생성될 것이다.

이제 받아온 값을 사용하는 방법에 대해 알아보자.
먼저 해당 값을 사용하기 위해 Provider를 만들어 주었다. Provider생성 방법은 이전에 포스팅했으니 넘어가도록 하고 바로 코드를 확인해보자. apiClient는 ApiRestClient의 인스턴스이다. API 호출을 위한 클라이언트 역할을 한다.
apiDioClient()를 통해 위에서 생성한 Dio 클라이언트를 호출해 ApiRestClient인스턴스를 생성하고 저장한다.
fetchHumanInfo메소드를 통해 apiClient.getHumanInfo()를 호출하여 정보를 가지고오고 humanInfoList를 업데이트하고, 변경을 알린다.

끝으로..

오늘은 Dio + Retorfit + JsonSerializable API 통신을 알아보았다. 실무에서는 http보다 Retorfit 사용을 더 많이 하기때문에 필수적으로 알고 있어야 하는 부분이라 포스팅 겸 학습을 진행해보았다. 아직 개념이 완벽하게 정리가 된것이 아니라 조금 더 다듬을 필요가 있을 것 같다. 실무에선 지금의 코드처럼 바로 받아서 쓰기보단 param을 따로 만들어서 사용하지만 아직은 그 부분까진 학습하지 못해서 이렇게 까지만 정리해보았다. 추후 더 알게되면 업데이트 하도록 하겠다!
끄읕…!