Flutter _ Data Fetching

230529

 

---

오늘은 본격적으로

API를 가져와 앱에 적용 시켜 보겠다.

 

우선 lib\services\Toonflix_api_service.dart을

생성해준다.

 

그리고 해당 dart 파일에

새로운 class를 선언한다.

(Widget 아님 주의)

 

해당 baseUrl은 현재 수강중인

강좌에서 학습용으로 만든 비공식 API 주소이다.

 

우리가 원하는 건 오늘의 웹툰을 불러오는거다.

 

baseUrl에 today를 붙이기 위해

위와 같이 오늘의 웹툰을 의미하는

변수 today도 선언해준다.

 

위와 같이 json형태의 데이터를 리스트로 받을거다.

 

위와 같은 URL에 요청을 보내기 위해서는

http 패키지를 먼저 설치해야 한다.

 

---

1. http 패키지 설치

 

https://pub.dev/

Dart packages

 

만약 Flutter나 Dart의 패키지를 찾고 싶으면

 

공식 패키지 보관소

pub.dev에서 손쉽게 찾아 설치할 수 있다.

 

위와 같이 찾고자 하는

패키지 명을 입력하고

 

해당 패키지를 클릭하면?

 

https://pub.dev/packages/http

http | Dart Package

위와 같이

dart.dev(dart 제작자)가 제작했으며

어느 Platform에서 사용가능하며

install은 어떻게 하는지 나와있다.

 

install 페이지로 이동하면

 

위와 같이 여러 방법을 제시하는데

 

Dart 와 Flutter 터미널에서어떤 명령어를 입력하면 되는지

 

pubspec.yaml파일에서어떤 부분에 무엇을 추가해야하는지제시한다.

 

---

1-1. pubspec.yaml

 

우리가 Project를 생성하면

기본으로 디렉토리에 

pubspec.yaml이 생성된다.

 

이 pubspec.yaml에는

 

프로젝트에 대한 정보와

설정이 담겨져 있는데,

 

대표적으로

 

• Matrial 디자인을 사용하는지 설정
• 앱에 이미지를 포함하는 설정
• 프로젝트에 폰트를 설치 및 적용 설정

등 여러 기능들이 존재하는데

 

dependencies에

모듈의 버전을 적을 수 있다.

 

dependencies:
  http: ^1.0.0

http 패키지의 install 방식중 하나인

dependencies에 위의 http 버전을 추가해보자.

 

위와 같이 http의 버전을

입력하고 저장을 하면

VScode에서 자동으로 설치 해준다.

 

만약 자동 설치가 되지 않는다면

 

pubspec.yaml창을 열면

생기는 위 사진의

다운로드 버튼을 누르면 된다.

 

---

1-2. 터미널에서 명령어 입력

 

두 번째 방법은

터미널에서 명령어 입력인데

 

위와 같이 해당 프로젝트 디렉토리로

이동 후

 

//Dart 터미널의 경우
dart pub add http

//Flutter 터미널의 경우
flutter pub add http

위의 명령어를 입력하면 된다.

 

(이미 defendencies에서 설치 했기 때문에 터미널에는 위와 같이 나온다.)

 

---

2. get()

 

이제 설치도 했으니

본격적으로 사용해보자.

 

위와 같이 http 패키지를 다운받고

import를 하면

 

get()을 사용할 수 있는데,

 

위와 같이 import에 as를 붙여

내가 알기쉽게 이름을 바꿀 수 있다.

 

우린 http로 바꾸자.

 

그리고 get을 살펴보면

Uri를 인자로 받는것을 알 수 있다.

 

그래서 위와 같이

url이라는 변수 명으로

Uri를 선언해 주었고

 

해당 Uri는 $baseUrl / $today가 된다.

 

이제 우리는 위 함수를 통해

오늘의 웹툰을 가져올 수 있는것이다.

 

그런데 한가지 짚고 넘어가야할

중요한 문제가 있다.

 

---

 

2-1. Future & async programming 

 

get 메소드를 다시 살펴보면

Future<Response>를 get 함수의 반환 타입으로 받는데

 

Future 타입은

미래에 받을 값의 타입을 알려준다.

 

Dart는 간단한 연산 같은 코드는바로 처리를 하고 넘어가지만

 

API의 데이터를 불러오는것은상당히 오래걸릴 수도 있다.

 

예를 들면,요청을 처리하는데 오래걸릴수있고유저의 네트워크 문제가 있거나

서버의 메모리 문제로 느릴 수도 있다.

 

즉, 위의 함수에서

우리는 get 함수가 url을 통해

 

API 요청이 처리돼서 응답을 반환할 때까지

기다리길 바라는데, ▶ side effect (부작용) 

 

이러한 프로그래밍을

async(비동기) programming이라 불린다.

 

위와 같은 경우는

실행만 시키고 끝나는 것이다.

우리가 바라는것은 그게 아니다.

 

---

2-2 & asynchronous function & await

 

우리는 side effect.

 

즉, API 요청이 처리돼서

응답을 반환할 때까지

기다리길 원하는 경우

 

함수에 async를 붙여

비동기 함수로 선언하고

 

반환 타입을 await으로 받는다.

 

마지막으로

future가 기다렸다가 완료되면

Response로 데이터를 주기 때문에

 

위와 같이 response라는 변수로 선언하고

 

 

불안해 하는 Dart를 위해값을 확실히 정하기 위하여조건문을 넣어준다.

 

위의 조건문은reponse에 저장된 데이터의statusCode가 200과 같다면,▶ 상태 코드가 200(정상)이라면,

 

body를 출력하고

✔ (Response의 body에는 서버에서 보낸

데이터가 있다.)

 

아니면 Error를 출력하는 조건문이다.

 

---

이제 결과를 확인하기 위해

main()가 있는 코드로 돌아와서위와 같이 선언을 해주면?

 

 

화면에는 직접적으로 안나오지만디버그 콘솔에 위와 같이

 

리스트로 묶인우리가 원하는 데이터를 잘 가져오는것을 알 수 있다.