플러터 서버와 통신 하는 방법 , 초기 셋팅

서버는 데이터 달라고 하면 데이터 주는 간단한 프로그램일 뿐입니다.

네이버 웹툰서버는 뭐겠습니까 웹툰달라고 하면 DB에서 웹툰 뽑아서 주는 서버임 

유튜브 서버는 뭐겠습니까 영상달라고 하면 영상주는 서버임

그래서 서버를 만들어두면 실제 웹/앱 서비스를 만들 수 있습니다.

 

그래서 우리도 서버에게 떼를 쓰면 데이터를 받아올 수 있습니다.

근데 받아오는 정확한 방법이 있습니다.

1. 정확한 URL 주소로 2. GET 요청을 날려야합니다. 

 

왜냐면 서버개발자들이 짜는 소스코드를 보면 

"어떤 놈이 /product로 GET 요청날리면 상품 보내줘라"

"어떤 놈이 /detail로 GET 요청날리면 상품 상세정보 보내줘라"

이런 식으로 되어있기 때문입니다. 

 

GET 요청날리는 법은

 

http라는 이름의 패키지 설치가 필요합니다. 

pubspec.yaml 파일 열어서 

dependencies:
  http: ^0.13.4

이거 추가해주고 왼쪽 전구 눌러서 pub get 누르시면 설치 끝입니다. 

최신버전 설치를 원하면 이 사이트 들어가서 현재버전 확인하면 됩니다. https://pub.dev/packages/http 

 

 

셋팅1은 main.dart 파일 들어가서 맨 위에 

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

이런 코드 추가해주면 됩니다. dart:convert 이건 JSON -> 일반자료형 변환을 도와주는 함수모음집입니다. 

 

셋팅2는 android/app/src/main/AndroidManifest.xml 파일 들어가서

<uses-permission android:name="android.permission.INTERNET" /> 

이런 코드 추가해주면 됩니다. 

<application 이렇게 시작하는 코드 이전 줄에 추가하는게 어떨까요 

iOS는 신경쓸 필요 없음 

 

서버에게 GET요청 날리는 법

 

getData() async {
  var result = await http.get( Uri.parse('https://codingapple1.github.io/app/data.json') );
  print( jsonDecode(result.body) )
} 

await http.get( Uri.parse('요청할url') )

이거 쓰면 GET요청을 날려주고 그 자리에 서버에서 가져온 데이터가 남습니다.

변수에 저장해서 쓰면 됩니다.

하지만 가져온 데이터는 대부분 JSON입니다.

 

서버랑 주고받는 데이터는 오직 문자만 가능합니다. {}, [] 이런거 불가능

굳이 {}, [] 이걸 주고받고 싶으면 "큰따옴표"로 전부 감싸야합니다.

그럼 문자취급을 받아서 주고받을 수 있습니다. 따옴표친 {}, [] 이걸 JSON 이라고 합니다.

 

아무튼 JSON이 도착하는데 이거 그대로 쓰면 자료를 조작하기 좀 어렵습니다.

조작하기 쉬운 list, map같은 자료로 변환하려면 json.Decode() 여기에 넣었다가 빼면 됩니다. 

 

 

 

 

▲ 버튼누르거나 해서 저 함수 실행해보시면 진짜 이런 데이터 출력되지 않습니까 

서버가 보내준 인스타그램용 게시물 데이터 3개입니다. 

복잡해보이는데 [ { 게시물1내용 }, { 게시물2내용 }, { 게시물3내용 } ]

이렇게 들어있을 뿐입니다 별거 아님 

 

 

 

 

 

 

에러체크 하고싶으면 

 

서버가 이상하거나 그럴 경우 GET요청이 실패할 수 있습니다.

실패시 특정 코드를 실행하고 싶으면 

 

 

getData() async {
  var result = await http.get(
      Uri.parse('https://codingapple1.github.io/app/data.json')
  );
  if (result.statusCode == 200) {
    print( jsonDecode(result.body) );
  } else {
    throw Exception('실패함ㅅㄱ');
  }
} 

result.statusCode를 출력해보면 성공여부를 알 수 있습니다.

서버와 통신이 성공하면 대부분 200이 뜹니다.

그래서 그거 가지고 if, else 이런거 쓰면 됩니다.

 

throw는 콘솔창에 빨간색으로 에러내주는 코드고

아니면 코드잘짜면 try, catch 문법써도 거의 모든 에러를 체크해줄 수도 있겠군요.

이런거 안하면 이제 유저들로부터 1점 리뷰 받는 것임 

 

 

 

 

 

 

 

페이지 첫 로드시 특정 코드를 실행하고 싶은 경우

 

아무튼 인스타그램 메인페이지에 보여줄 데이터를 가져오는 함수가 완성되었습니다.

근데 이 함수는 언제 실행해야하죠?

당연히 메인 위젯 로드시 바로 실행되어야합니다. 

특정 위젯이 로드되자마자 코드를 실행하고 싶은 경우가 있습니다. 

그럴 땐 initState() 함수 안에 코드짜면 됩니다. StatefulWidget 안에 넣을 수 있는 기본함수인데

initState() 안에 짠 코드는 위젯이 처음 로드될 때 한 번 자동으로 실행됩니다. 

 

 

@override
void initState() {
  super.initState();
  getData();
} 

(MyApp 클래스안에 만들었습니다)

그럼 이제 MyApp 위젯이 로드될 때 자동으로 데이터가져오겠네요 

그래서 첫 데이터 로드하고싶을 때 initState() 이런 곳에 자주 적습니다. 

 

1. 우리가 커스텀 위젯 만들 때 StatefulWidget 이런거를 extends로 복사해서 만들어야한다고 했습니다.

복사한 StatefulWidget class를 보통 부모class 라고 부르는데 

부모 class 안에 나랑 똑같은 이름을 가진 함수가 있을 경우

@override는 내걸 먼저 적용하라는 뜻입니다. 

 

2. super.어쩌구는 부모 class 안에 있던 initState() 함수를 여기서 실행해달라는 뜻입니다.

혹여나 부모 위젯이 있고 그놈도 initState()를 해야하는 경우 그거 먼저 실행하라는 뜻일 뿐입니다.

 

3. 그냥 전부 플러터가 정상적으로 동작하기 위한

부가적인 문법일 뿐인데 평생 수정할 일이 없으니 그냥 무시하고 지나가도 됩니다.

이런 복잡한거 숨기고 보다 쉽게 쓸 수 있는 문법이 나오면 초보자들에게 좋겠군요 

플러터 7.0 쯤 되면 그럴듯

 

 

빠르게 알아보는 Map 자료형

 

자료 여러개를 변수 하나에 저장하고 싶으면 [] 아니면 {} 쓰면 됩니다.

전자는 List, 후자는 Map 이라고 부릅니다. 

 

var map = { 'john', 20 };

Map은 List처럼 똑같이 여러 자료를 저장할 수 있는데 자료마다 왼쪽에 이름을 붙여야합니다.

 

 

var map = { 'name' : 'john', 'age' : 20 };
print(map['name']);  //'john' 나옴

이렇게 안붙이면 큰일남 

그리고 자료 꺼내는건 List랑 똑같은데

자료 번호가 아니라 이름을 불러주면 꺼낼 수 있습니다. 

참고로 List안에 Map 넣어도 상관없고 Map 안에 List 넣어도 상관없습니다.

자료 꺼내는 법 알았으니까 다음 시간까지 서버가 보낸 데이터를 게시물안에 꽂아넣어 보여주십시오.