데이터를 주고 받는 방법을 배우는 것
목차
"DATA 주고 받기"의 필요성 알아보기!
"DATA 주고 받기" 방법 알아보기!
JS로 REST API 활용하기
영화 API로 실습하기
"DATA 주고 받기" 필요성
→ "DATA 주고받기"가 필요하다
장고(Django)라는 프레임워크를 예시로 들을 수 있을 것이다
웹 브라우저에서 요청이 오면 저장되어 있는 static만 전달되는 것이 아니고 파이썬으로 짜여져 있는 로직 혹은 데이터베이스에 저장되어 있는 데이터들을 가공해서 html,css,javascript를 만들어서 웹브라우저로 넘겨주게 된다
백엔드 서버와 프론트엔드 서버를 나눈 상태를 배우게 된다
프론트엔드 서버는 웹 브라우저에서 요청이 올 경우에 백엔드 서버에게 또 다시 요청을 보낸다
"~한 데이터가 필요하다 혹은 ~한 데이터를 너한테 줄게"라고 보내는 것이다
이러면 백엔드 서버는 프론트엔드 서버의 요청에 따라서 적절한 데이터를 response로 건네주게 된다
그러면 프론트엔드 서버는 백엔드 서버로부터 받은 데이터를 적절히 가공해서 html, css, js를 만들것이다
"DATA 주고받기"의 방법 알아보기
프론트엔드 서버와 백엔드 서버가 구분이 되어있기 때문에 두 서버는 서로 데이터를 주고 받아야 한다
두 가지 질문
1. 어떤 방식으로 정보를 주고 받을까?
2. 정보의 형태(DATA의 FORMAT)는 어떻게 할까?
1. 어떤 방식으로 정보를 주고 받을까?
수많은 서버와 수많은 프로그램들이 서로 정보를 주고 받기 위해서는 어떠한 원칙을 세워야 할 것이다
어떠한 방식으로 정보를 주고 받을 까라는 질문은 어떤 원칙을 가지고 프로그램 사이를 연결할 것인가라는 질문으로 바뀌게 된다
그리고 어떠한 원칙을 가지고 프로그램 사이를 연결할 것인가라는 것은 결국 어떤 api를 사용할 것인가라는 질문이다
다시 한번 정리해보면 어떤 방식으로 정보를 주고 받을까? 라는 것은 프론트엔드 서버와 백엔드 서버 사이에 어떠한 api를 가지고 정보를 주고 받을까라는 질문으로 바뀌게 된다
REST API는 어떤 원칙을 가지고 있을까?
{REST API}
첫번째, URI는 정보의 자원을 표현해야한다
URI는 정보의 자원을 표현해야하는데 DELETE라는 행위를 URI에서 나타내고 있다
그렇기 때문에
members/delete/1이라고 표현하는 것은 틀린 표현이다
하지만 밑에 보면 members/1 딱 정보의 자원에 정확히 표현하고 있다
그의 행동은 http 메서드 delete로써 표현하고 있다
두번째, 자원에 대한 행위는 HTTP Method (GET, POST,PUT,DELETE)로 표현한다
rest api에서 사용하게 될 http 메서드는 좌측에서 보실 수 있는 4가지 메서드이다
post는 무엇인가 생성할 경우
get은 어떠한 정보를 얻어올 경우
자원에 대한 행위는 메서드로 표현해야하는데 uri로 표현하고 있다
그러면 안된다
http 메서드로 자원에 대한 행위를 표현해야 한다
만들 것이면
ex) POST /members/2
이런 식으로만
작성을 해야한다
2. 정보의 형태는 어떻게 할까?
수많은 api, 수많은 프로그램들이 서로 효율적으로 통신하기 위해선 정보의 형태를 정해두는 것이 좋다
정보의 형태는 크게 두가지, XML 과 JSON 형태이다
XML은 HTML과 비슷하다 실제로 XML은eXtensible Markup Language로 이런 식으로 마크업들을 통해서 정보를
나타내고 있다
KEY와 VALUE 값으로 구성이 되어 있는 것을 확인할 수 있다
XML은 같은 데이터를 표현할 때 더 많은 데이터를 사용한다는 것을 확인할 수 있다
JSON은 비교적 간단하게 사용할 수 있다 그리고 REST 형으로도 표현할 수 있다
현재 JSON을 많이 사용하고 있는 추세이다
JS로 쉽게 REST API 사용하는 방법
Fetch는 필수적으로 url을 가지고 있다
option 값들을 가지게 된다
url은 어느 백엔드 서버로 요청을 보낼 것인지 묻는 주소이다
options는 보내게 되는 메서드
header에는 어떤 것을 넣을 지 그리고 내가 정보를 줘야한다면
body에 어떤 contents를 넣어서 보낼 줄 것인지 담는 인자라고 생각하면 됨
option은 안넣어도 됨
get 메서드에서 정보를 가져오는 행위만 하면 됨
33번째 줄에 fetch라는 자체가 데이터를 주고 받는 것이다 보니까 시간이 걸린다
그래서 fetch를 쓰고 나서 곧 바로 진행되는 것이 아니다
fetch를 완료한 다음에 기다린 다음에 .then 그 다음에 fetch의 response로 온 값들을 내가 보겠다 이런 뜻으로 이해하면 도면 됨
