[코드팩토리의 플러터 프로그래밍] 16장. 코팩튜브 : REST API, JSON,유투브 API

 사전지식    

1. http 요청 url의 형태 

http://www.domain.com:1234/path/to/resource?a=b&xy

- http : http 또는 https 프로토콜로 실행할 수 있음, https는 보안이 강화된 프로토콜

- host : 요청하는 사이트의 도메인

- 1234 : 어떤 포트로 전달될지 결정 

- /path/to/resource : 불어올 데이터의 정보로 명시 

- a=b&x=y : 각 쿼리는 &로 구분, 키와 값 데이터가 =로 연결 

 

2. http 기반 API의 종류 

종류	설명
REST API	HTTP의 GET, POST, PUT, DELETE 등의 메서드 사용해 통신하는 대중적인 API
GraphQL	Graph 구조를 띄고 있으며 클라이언트에서 직접 필요한 데이터를 명시할 수 있는 형태의 통신 방식  필요한 데이터만 가져올 수 있음
gRPC	HTTP/2 사용하는 통신 방식.  Protocol Buffers라는 방식을 사용하며 레이턴시를 최소화할 수 있는 목적으로 설계

 

 

3. REST API 의 4가지 기준 

- 균일한 인터페이스 : 요청만으로도 어떤 리소스를 접근하려는지 알 수 있어야 하며 수정 또는 삭제를 한다면 해당 작업을 실행할 리소스정보를 충분히 제공해야함 

- 무상태 : 요청이 완전 분리될 수 있어야함. 하나의 요청이 이전 또는 이후의 요청과 완전 독립된 형태로 구현돼야 하며 임의의 순서로 요청이 처리될 수 있어야 함 

- 계층화된 시스템 : 클라이언트와 서버 사이에 다른 중개자에 요청을 연결할 수 있음. 

ㄴ 계층화된 아키텍처는 클라이언트와 서버 사이에 여러 중개자(프록시, 게이트웨이, 로드 밸런서 등)를 두어 요청을 연결할 수 있는 구조를 의미합니다.

ㄴ 이 중개자들은 보안, 부하 분산, 캐싱 등의 다양한 역할을 수행할 수 있으며, 클라이언트는 서버에 직접 접근하는 것처럼 보이지만, 실제로는 중간에 여러 계층이 존재할 수 있습니다.

ㄴ 예를 들어, 로드 밸런서를 통해 클라이언트의 요청을 여러 서버에 분산하여 처리할 수 있고, 프록시 서버는 요청을 가로채 캐시된 데이터를 반환하여 서버의 부하를 줄일 수 있습니다.

 

 

- 캐시 : 클라이언트는 응답 속도를 개선할 목적으로 일부 리소스를 저장할 수 있음. 예를 들어 한 웹사이트에 공통으로 사용되는 이미지나 헤더가 있을때 해당 요청을 캐싱함으로써 응답 속도를 빠르게 하거나 불필요한 요청 줄일 수 있음 

 

4. JSON 

- http 요청에서 body 구성할 때 xml과 json으로 나뉜다. 

ㄴ xml은 현대 api에서 잘 사용하지 않고 대부분 json을 사용한다.

 

 

 사전준비    

1. 유투브 API 설정하기 

https://console.cloud.google.com/

 

2. 프로젝트 설정 

new flutter project > next

 

create

 

3. pubspec.yaml 설정 

  cupertino_icons: ^1.0.6
  youtube_player_flutter: 8.1.0
  dio: 5.3.3

 

pub get 으로 플러그인 다운로드

 

 

4. 네이티브 설정 

5. 프로젝트 초기화하기 

import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Text('Home Screen'),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:youtube/screen/home_screen.dart';

void main() {
  runApp(
    MaterialApp(
      home: HomeScreen(),
    )
  );

 

 

6. 레이아웃 구성하기 

 

https://github.com/soo-toance/2024-flutter-chapter16-youtube/commit/ce54d6ee7f9a7fe6c4804d74bf7db9bacef46275