Flutter에서 Retrofit으로 서버 연동하기1

flutter에서 retrofit으로 서버를 연동하고자 할 때 우선 retrofit을 먼저 pubspec.yaml에 추가해주어야 한다.

 

https://pub.dev/packages/retrofit

retrofit | Dart Package

위에 공식 페이지를 보면 금방 retrofit을 추가해줄 수 있다.

dependencies에 추가해준 뒤

사진에서 보다시피 pub get을 해준다. 이때 간혹 에러가 나는 경우가 있다. 만약 그 에러가 버전과 관련된 거라면

현재 자신의 flutter버전이 null-safety가 호환이 안 되고 있을 확률이 높다.. 이런 경우엔 flutter를 2.0 이상으로 업데이트 해주고 migration을 진행해주어야 한다.

 

만약 retrofit을 추가 완료했다면 파일을 만들어야 한다.

예시로 RestClient.dart 파일을 하나 생성하고 그 안에 형식에 맞게 작성해 줄 것이다.

import 'package:json_annotation/json_annotation.dart';
import 'package:retrofit/retrofit.dart';
import 'package:dio/dio.dart';

part 'RestClient.g.dart';

@RestApi(baseUrl: "https://xxx.xx.xx.xxx")
abstract class RestClient {
  factory RestClient(Dio dio, {String baseUrl}) = _RestClient;

  @POST("/example") // 해당 api 경로
  Future<List<ListResponse>> getListData(
      @Header("user_id") String userId,
      @Header("Authorization") String token,
      @Body() PracticeRequest practiceRequest);
}


@JsonSerializable()
class PracticeRequest {

  int? id;

  PracticeRequest({
    required this.id
  });

  factory PracticeRequest.fromJson(Map<String, dynamic> json) => _$PracticeRequestFromJson(json);
  Map<String, dynamic> toJson() => _$PracticeRequestToJson(this);
}


@JsonSerializable()
class ListResponse {

  String? name;
  int? age;
  String? birth;
  String? phone;
  
  ListResponse({
    required this.name,
    required this.age,
    required this.birth,
    required this.phone
  });
  
  factory ListResponse.fromJson(Map<String, dynamic> json) => _$ListResponseFromJson(json);
  Map<String, dynamic> toJson() => _$ListResponseToJson(this);

}

위의 코드는

서버로 요청을 보낼 바디가

{
    "id" : 1
}

이렇고, 서버에서 받아오는 response body는

 

[
	{
            "name" : "이름",
            "age" : 20,
            "birth" : "2002-01-01",
            "phone" : "010-0000-0000"
	},
        {
            "name" : "이름2",
            "age" : 22,
            "birth" : "200-01-01",
            "phone" : "010-0000-0000"
	}
]

이렇게 넘어올 것이라는 가정 하에 작성된 코드이다.

 

다시 위에 코드를 보자면 아마 빨간줄이 꽤 많이 있을 것이다. 아직 코드 작성 중인 상태라 빨간줄이 있는 게 당연하다.

코드를 간단히 하나하나 보자면,

 

가장 맨 위에 있는

이 부분에서 part 'RestClient.g.dart'가 무슨 의미인가 싶은데 이거는 곧 생성될 파일이므로 내 원래 파일 이름에 .g만 추가해서 미리 생성시켜주면 된다.

그리고 baseUrl은 각자 자신의 api 주소를 넣어주면 된다.

 

 

다음으로 class 이름은 자신의 파일명에 맞게 잘 넣어준 뒤 factory RestClient도 그대로 작성해주면 된다.

여기까지는 똑같이 작성하면 된다.

 

이제 그 밑에 @POST 이부분 부터는 각자 api 형식에 맞게 작성해주어야 한다.

이 코드의 경우 ListResponse라는 객체가 리스트 형태로 받아와 지는 경우이기에 List<ListRespone>로 작성했다.

ListResponse는 밑에 가서 형식을 작성해줄 것이다.

그리고 함수명은 각자 알아볼 수 있도록 작성한 뒤, header에 넣어야할 정보들을 추가해준다. 만약 없다면 생략해도 괜찮다.

 

마지막으로 request에 대해서도 작성해주어야 한다. 이 request body 형식도 ListRespone와 마찬가지로 밑에서 작성해줄 것이므로 이름만 잘 작성해주면 된다.

 

(참고로 GET, DELETE, PUT 전부다 형식은 이런식이다. 그리고 이 RestClient 클래스 안에 여러 개의 함수를 추가해도 된다. 만약에 GET을 쓴다하면 Body를 없애주면 된다. 기타 정보는 다른 포스팅에서 작성할 예정)

 

이제 request와 respone body형식을 작성할 것이다.

먼저 request body이다. class명은 위에 선언했던 이름 그대로 쓰면 되고 여기서 바꿔야 할 부분들만 간략히 말하자면,

id 대신 자신이 작성해야할 request body항목을 작성해주면 된다.

 

그리고 아래에 factory PracticeRequest.fromJson..... 이런 코드가 있는데 이건 항상 똑같다고 보면된다. json으로 바꿔주는 그런 코드라고 생각하면 된다. 여기서 변경해야할 것은 PracticeRequest, _$PracticeRequestFromJson(json), _$PracticeRequestToJson(this) 이 세가지 부분을 자신의 클래스 명에 맞게 변경해주어야 한다.

 

ex) 내 클래스명이 ABC라면..

     _$PracticeRequestFromJson(json) => _$ABCFromJson(json) 이런식으로

 

response body도 동일한 방법으로 작성하면 되니 잘 모르겠다 싶으면 위에 올려둔 전체코드를 참고 하면 된다.

이렇게 하면 RestClient.dart 파일 작성은 끝이다.

 

---

이후 RestClient.g.dart 파일을 생성하고 화면에 출력하는 법은 다음 포스팅에서 설명할 예정