[Flutter 앱 개발 / 8일차] 대학생의 앱 개발로 돈 벌기 프로젝트 - 날씨앱 만들기

어제 사실 블로그를 못 썼다.
어제 아침 11시에 학교에 가서 7시까지 플러터 공부를 하다가 집에 왔는데, 블로그를 쓸까 하다가... 뭐했지...?
기억이 안 난다. 집에 와서 치킨을 먹었던 것까지는 기억나는데, 아무튼 조금 쉬었던 것 같다.
뭐 기억도 안나는 어제 일을 계속 생각해내려고 해서 뭐 하겠나.
오늘부터라도 다시 쓰면 되지!

---

어제까지는 "코딩셰프" 유튜브 채널의 강좌들을 보면서 간단한 날씨 앱을 만들어 보았다.

좌 - 로딩화면 / 우 - 메인화면

 

날씨앱을 만드는 과정에서 주로 다룬 지식들은 아래와 같다

1. http GET 요청을 통해 외부 API로 데이터를 가져오는 방법
2. 데이터를 불러오는 과정에서 Future / async / await 의 필요성과 사용 방법
3. StatefulWidget의 생명주기 (이번에 주로 다룬 메서드는 initState()이다. build()는 너무 자주 사용하니까 논외로 하겠다.)
4. json 문자열을 파싱하여 원하는 데이터를 추출하는 방법
5. 부모 위젯에서 생성자를 통해 자식 위젯에게 데이터를 전달하는 방법
6. 앱 UI 구현 방법.

그중 이번 포스팅에서는 1번과 2번에 해당하는 내용을 설명해 보도록 하겠다.

---

- http GET 요청을 통해 외부 API로 데이터를 가져오는 방법 -

먼저 아래와 같은 Network 라는 클래스를 만들었다.

import 'package:http/http.dart' as http;
import 'dart:convert';

class Network {
  final String url;
  Network(this.url); // Network 클래스의 생성자. API 요청을 보낼 url 주소를 입력받는다

  Future<dynamic> getJsonData() async { // async 함수는 무조건 Future형을 반환해야함
    http.Response response = await http.get(Uri.parse(url)); // http GET 요청
    if (response.statusCode == 200) { // 200 응답코드는 정상적으로 동작했다는 응답임
      String jsonData = response.body;
      var parsingData = jsonDecode(jsonData);
      return parsingData;
    } else { // 200 코드가 아니라면 (의도하지 않은 상황)
      return response.statusCode;
    }
  }

그리고 아래의 코드처럼 원하는 api요청 url을 인자로 한 network 인스턴스를 생성했다.

const apiKey = '본인의 api key가 들어간다. api 요청을 보낸 사람을 식별하는 식별자 같은 느낌이다.';
double latitude = 37.4; // 위도
double longitude = 123.5; // 경도
Network network = Network('https://api.openweathermap.org/data/2.5/weather?lat=$latitude&lon=$longitude&appid=$apiKey&units=metric');

Network 클래스의 getJsonData() 메서드는 해당 api 주소로 GET 요청을 보내 해당 위도와 경도에 해당하는 날씨 정보를 받아온 뒤, 데이터를 json object의 형태로 변환하여 리턴해주는 역할을 한다.

그래서 위처럼 network 인스턴스를 만들어 준 뒤, 아래와 같이 코드를 작성하면 weatherData 변수에 날씨 정보에 해당하는 json object가 담기게 된다.

var weatherData = await network.getJsonData();

 

---

- 데이터를 불러오는 과정에서 Future / async / await 의 필요성과 사용 방법 -

위 날씨앱에서 http 통신을 통해서 데이터를 받아올 때, 짧게는 몇 밀리초에서 길게는 몇 초까지 시간이 걸린다.
그런데 이전에 말했듯이, flutter의 언어인 dart는 싱글 스레드(Single Thread)로 운영되는 언어이다. (6일차 참고)
아무 장치도 설정해 놓지 않으면, 플러터 코드는 위에서부터 순서대로 실행되다가 데이터를 받아오는 부분에서 응답이 있을 때까지 몇 초간 멈춰버리게 된다. 심지어 터치도 안 먹는다.

Future 라는 방법을 통해서 앱이 먹통되는 상황을 방지할 수 있다.
코딩셰프님의 설명을 빌리자면 Future는 휴게소 음식점의 번호표나 카페의 진동벨에 비유할 수 있다.
음식을 결제하면, 우리는 음식 대신 번호표나 진동벨을 받는다. 음식이 준비되는데 시간이 걸리기 때문이다.
그리고 음식의 준비가 완료되면 우리는 번호표를 가지고 가서 음식을 받는다.


Flutter에도 번호표가 필요하다.

앞서 말했듯, dart는 싱글 스레드(Single Thread)로 운영되는 언어이기 때문에 GET 요청 등의 메서드에서 return이 안되면 계속 기다린다. 그래서 일단은 멈추지 않도록 즉시 번호표 같은 Future 라는 객체를 먼저 반환해 놓고, 나중에 음식에 해당하는 진짜 데이터가 도착하면 Future가 진짜 데이터로 교환되는 것이다. (음식이 이상하면 음식이 아니라 Error가 도착할지도?)

만약 코드의 진행에서 Future의 진짜 데이터가 반드시 필요하다면, await 키워드를 이용해 진짜 데이터가 도착할 때까지 기다려야 한다.
날씨 정보를 출력해야 하는 상황에서 날씨 데이터가 안 들어있는 Future(번호표)를 출력하면 곤란하니까 말이다.

사실 이 async 라는 개념을 설명하기가 제일 애매하다. 사실 나도 막 배우는 입장이기 때문에 이해를 바란다.
하지만 다음과 같은 특징을 읽어보면 어떤 경우에 async 키워드를 사용해야 하는지 감을 잡는 데에 도움이 될 것 같다.

1. await 키워드를 사용한 함수는 무조건 async 함수이어야 한다.
2. async 함수는 무조건 Future 를 반환해야 한다.

---

글을 쓰다 보니 벌써 새벽 1시 20분이다. 11시 40분 정도에 글을 쓰기 시작했던 것 같은데, 시간이 벌써 이렇게 되었다.
마음 같아서는 나머지 3, 4, 5번에 해당하는 부분들에 대해서도 포스팅하고 싶었으나,
꼬였던 수면 패턴을 되찾기 위해 일단 여기서 마무리를 지어야겠다.
다음에 기회가 되면 번외 편으로 나머지 부분에 해당하는 글을 포스팅해보겠다.

여기까지는 어제의 일을 다루었었고, 이제부터는 짧게 오늘의 이야기를 할까 한다.

오늘은 군대 후임을 만나서 수다를 떨었다. 전역하고 나서 처음 보니까, 거의 7달 만에 만난 것 같다. 오랜만에 보니 반가웠다.
카페에서 근황 얘기도 하고, 앞으로의 계획, 서로가 꿈꾸는 자신의 미래 모습에 대해서도 얘기를 했다.
나머지 일상 얘기도 하면서 재미있게 시간을 보냈다.
저녁으로 초밥을 먹고 3월 즈음에 보자고 하고 헤어졌다.

집에 와서는 지난번에 언급했던 "린 스타트업" 책을 조금 읽어보았다.

독서대 위에서 찍었다.

아직 몇 장 못 읽어봤다. 모르는 단어가 군데군데 있어 단어 뜻을 찾아가면서 읽느라 시간이 조금 오래 걸렸다.
소설이었다면 얼추 단어 뜻을 유추하면서 그냥 넘어갔을 텐데, 이 책은 유독 꼼꼼히 읽으면서 넘어갔다.
아직 소개글을 읽고 있지만, 대충 요약하면 이 글을 쓴 Eric Ries는 대학생 때 도전한 첫 사업에서 실패를 맛보았고, 그가 이 실패를 통해 깨달았던 사실은 "좋은 아이디어와 열정, 그리고 끈기 만으로는 사업을 성공시킬 수 없다" 라는 것이었다.
뒷부분에는 아마 사업의 성공을 위해 사업가가 갖추어야 할 요소들을 다루며 이어지지 않을까 싶다.

책을 조금 읽어본 뒤에는 날씨앱의 후속 강좌인 채팅앱 제작 강좌를 조금 보다가 이렇게 블로그를 쓰면서 하루를 정리하고 있다.
벌써 2시가 되었다. 이제 자야겠다.

여러분들도 긴 글 읽어주시느라 수고하셨습니다.

---

1일차 보러가기 ↓↓

[Flutter / 1일차] 대학생의 앱 개발로 돈 벌기 프로젝트

코딩셰프님 유튜브 채널 ↓↓

코딩셰프