Flutter를 사용하는 개발자라면 앱과 서버 간의 필수 통신 프로토콜 중 하나입니다.
이번 포스팅에서는 Flutter에서 HTTP 통신하는 방법을 기본 http 패키지 사용법부터 Dio 패키지 사용법까지 상세하게 소개하겠습니다.
HTTP 통신
HTTP 통신이란?
HTTP 통신이란 HyperText Transfer Protocol의 약자로, 인터넷에서 데이터를 주고받는 프로토콜입니다.
웹에서는 이 프로토콜을 통해 클라이언트(브라우저나 앱)가 서버에 요청을 보내고, 서버로부터 데이터를 받아서 사용자에게 정보를 제공합니다.
HTTP 통신은 요청(Request)과 응답(Response) 구조로 이루어지며, 주로 HTML 문서, 이미지, 비디오 등을 주고받는 데 사용됩니다.
REST API 란?
Representational State Transfer API의 약자로, 웹 서비스에 접근하는 방법을 정의한 아키텍처 스타일입니다.
REST는 HTTP 통신을 사용하여 서버에 있는 자원에 접근하고, 이를 통해 웹 서비스를 구현합니다.
REST API에 대해 좀더 자세히 알아보기 위해서는 다음의 링크를 참조하세요
- MDN Web Docs – REST API 소개: MDN REST API Introduction
- REST API Tutorial: REST API Tutorial
- IBM Cloud – REST API 이해: Understanding REST APIs
REST API의 주요 method
- GET: 이 메서드는 특정 자원을 조회할 때 사용됩니다. 서버에서 데이터를 검색하여 클라이언트에게 제공합니다.
- POST: 새로운 자원을 생성할 때 사용됩니다. 클라이언트가 서버로 데이터를 전송하고, 서버는 그 데이터를 바탕으로 새로운 자원을 생성합니다. 예를 들어, 새 게시물을 작성하거나 사용자 계정을 등록할 때 POST 요청이 사용됩니다.
- DELETE: 지정된 자원을 삭제하는 데 사용됩니다. 서버에 저장된 자원의 제거를 요청하며, 성공적으로 처리되면 해당 자원은 더 이상 접근할 수 없게 됩니다.
- PUT/PATCH: 기존 자원을 수정할 때 사용됩니다. PUT은 전체 자원을 교체하는 데 사용되며, PATCH는 자원의 일부만을 수정하는 데 사용됩니다. 이 방식을 통해 클라이언트는 서버에 있는 자원의 상태를 업데이트할 수 있습니다.
Flutter에서 HTTP 통신 사용
Flutter에서 HTTP 통신을 하기 위해서는 다음과 같은 과정을 거칩니다
- 의존성 추가:
http패키지나dio와 같은 HTTP 클라이언트 패키지를 프로젝트에 추가합니다. - HTTP 요청 생성: 특정 URL로 GET, POST, PUT, DELETE 등의 HTTP 메소드를 사용하여 요청을 생성합니다.
- 서버로 요청 보내기: 생성된 요청을 서버로 보내고 응답을 기다립니다.
- 응답 처리: 서버로부터 받은 응답을 확인하고, 필요한 데이터를 추출하여 앱에 표시하거나 다른 작업을 수행합니다.
HTTP 패키지
소개
Flutter에서 제공하는 http 패키지는 HTTP 요청을 보내고 응답을 받는 기본적인 기능을 제공하는 패키지 입니다.
설치방법
cmd에서 다음 pub add 명령어를 통해 설치합니다.
$ dart pub add http
패키지를 추가하고자 하는 코드에서 다음과 같이 import 합니다.
import 'package:http/http.dart';
예제
REST API의 get method를 이용해 request를 한 후 json 형식의 response의 body를 decode 하여 상태(_useInfo)를 업데이트 합니다.
// Function to get user information from server
Future<void> fetchData() async {
var url = Uri.parse('https://jsonplaceholder.typicode.com/users/1');
try {
var response = await http.get(url);
var data = jsonDecode(response.body);
setState(() {
// display name, email, and company name
_userInfo =
'Name: ${data['name']}\nEmail: ${data['email']}\nCompany: ${data['company']['name']}';
});
} catch (e) {
setState(() {
_userInfo = 'Failed to get User Information: $e';
});
}
}결과
Dio 패키지
소개
Flutter/Dart용 강력한 HTTP 클라이언트 라이브러리로, http 패키지보다 더 많은 기능과 편의성을 제공합니다.
예를 들어, 파일 업로드/다운로드, FormData, 요청 취소, Custom adapter 등의 기능이 있습니다.
설치방법
cmd에서 다음 pub add 명령어를 통해 설치합니다.
$ dart pub add dio
패키지를 추가하고자 하는 코드에서 다음과 같이 import 합니다.
import 'package:dio/dio.dart';
예제
REST API의 get method를 이용해 request를 한 후 json 형식의 response의 body를 decode 하여 상태(_useInfo)를 업데이트 합니다.
// Function to get user information from server
Future<void> fetchData() async {
try {
var response =
await dio.get('https://jsonplaceholder.typicode.com/users/1');
setState(() {
// display name, email, and company name
_userInfo =
'Name: ${response.data['name']}\nEmail: ${response.data['email']}\nCompany: ${response.data['company']['name']}';
});
} catch (e) {
setState(() {
_userInfo = 'Failed to get User Information: $e';
});
}
}dio는 interceptor를 추가할 수 있는 등 http 패키지에 없는 기능들이 있습니다.
// Dio Setup (Add Interceptors)
void setupDio() {
// display request and response data in console
dio.interceptors.add(InterceptorsWrapper(
onRequest: (options, handler) {
print('Request Sent: ${options.uri}');
return handler.next(options); // continue
},
onResponse: (response, handler) {
print('Response Received: ${response.data}');
return handler.next(response); // continue
},
onError: (DioException e, handler) {
print('Error: ${e.message}');
return handler.next(e); // continue
},
));
}
결과
결론
Flutter 개발에서 서버와의 HTTP 통신은 필수적이며, http와 Dio는 각각의 장단점을 가진 라이브러리입니다.
간단한 사용을 원한다면 http를, 더 다양한 기능과 세밀한 제어가 필요하다면 Dio를 선택하는 것이 좋습니다.
프로젝트의 요구사항과 개발 환경에 맞게 적절한 라이브러리를 선택하시기 바랍니다.
