오늘은 데이터 통신에 대해 복습해보자.
오늘은 데이터 전송 이론과 실습을 진행했다.
두 컴퓨터간 데이터 전송
HTTP란 두 컴퓨터간에 텍스트 데이터(문자열이나 HTML)를 주고 받는 길입니다. 이 길로 요청(request)과 응답(response)을 서로 주고 받을 수 있습니다.
HTTP 요청(Request)과 응답(Response)
HTTP 요청(Request)
웹브라우저에서 홈페이지(Front-end)가 실행중이라면, 작성한 게시물 텍스트 데이터를 HTTP를 통해 Back-end 컴퓨터로 보내고 Back-end 컴퓨터에게 이 데이터를 데이터베이스에 저장 해달라고 요청한다. 성공하면 데이터베이스에 저장한다.
❗️ 데이터베이스에 바로 요청하면 안되나요?
보안 및 데이터 정제 등의 이유로 Back-end에서 검증 과정을 거쳐야 하기 때문에, 아무나 함부로 데이터베이스에 요청할 수 없다.
HTTP 응답(Response)
요청을 받은 Back-end 컴퓨터가 성공, 실패 등 처리 결과를 응답 한다. 응답은 상태코드를 포함한다.
HTTP 상태코드
응답 메시지는 백앤드 개발자가 임의로 쓰기 때문에 변수로 설정이 쉽지 않아 이를 간단히 알아볼 수 있도록 존재하는게상태코드이다.
응답 상태코드는 100~ 599까지의 숫자로 구성되어 있다.
자주 볼 수 있는 응답 상태코드는 성공(2xx), Front-end 에러(4xx), Back-end 에러(5xx) 등이 있다.
자바스크립트의 객체 표기법 JSON
또 이때 객체를 쉽게 주고받고 싶은데 문자열만 가능하기 때문에 객체처럼 생긴 문자열(객체 표기법)이 생겼고, 이를 JSON이라고 합니다.
그래서 보내는 형태는 사실 객체가 아니라 JSON입니다.(뒤에 설명)
API
API란 HTTP 요청을 Back-end 컴퓨터에 보냈을때 실행되는 Back-end 기능이다. 쉽게 말하자면 백앤드 개발자가 만든 함수(기능) 이라 할 수 있다.
API의 주된 역할은 백엔드 컴퓨터에서 요청된 데이터를 검증하고 DB에 저장하는 것이다.
백앤드 개발자가 요청사항에 맞춤 함수(어림잡아 버튼 개수만큼 함수가 있어야겠다.)를 만들고 설명서를 작성하면 이를 보고 프론트 개발자가 데이터를 다룬다.
API를 만드는 방법(rest-API vs graphql-API)
API의 종류는 크게 rest-API, graphql-API 로 2가지가 있습니다.
graphql은 페이스북에서 발생하는 수많은 데이터를 처리하기 위해 페이스북 개발팀에서 만들었으며, facebook, airbnb, github 등 유명한 사이트에서 사용중인 통신 방법이다.
REST API를 알아야만 하는 이유!
1. 많은 회사가 REST API를 사용
규모가 크거나 최신기술에 예민한 스타트업 말고는 아직 REST API를 많이 사용한다.
2. 취업한 회사에서 REST 사용할 수 있음
3. OPEN-API에서 일반적으로 Rest를 제공
OPEN-API = public-API (대부분 rest api로 제공한다)
rest-API와 graphql-API의 차이점
- 함수 이름의 차이
- 응답 결과물의 차이
rest-API는 응답 결과로 back-end 개발자가 만든 함수에서 보내주는모든 데이터를 받아야만 한다.
반면에,graphql-API는 back-end 개발자가 만든 함수에서필요한 데이터만골라 받을 수 있는 장점이 있어 효율적인 통신을 할 수 있다.
-> 보통 graphql은 큰 규모에서 쓸수록 효율적이며, 대기업이나 최신 기술을 많이 쓰는 스타트업에 경우 많이 사용한다.
- 설치해야 할 프로그램의 차이
위와 같은 이유로 요청담당자도 다르다.
rest-API에 요청하는 요청담당자는axios이고,
graphql-API에 요청하는 요청담당자는apollo-client이다.
<요청담당자는 Front-end 에서 설치하는 라이브러리>
API 응답 데이터 JSON ( JavaScript Object Notation )
JSON은 자바스크립트의 객체 표기법이다.
객체도 아닌 객체 표기법은 무엇일까?
JSON이란?
백엔드에서 응답을 받을 때, 객체 자체를 주고 받을 수 없다.
따라서 객체를 문자열로 묶어서 객체를 담은 문자열을 보내게 되는데, 객체를 담은 문자열을 객체 표기법 이라고 한다.
즉, 백엔드에서 응답의 결과물로 넘겨주는 것이 JSON이고, JSON은 객체를 담은 문자열 정도로 생각하면 된다.
받아온 JSON 데이터는 프론트에서 문자열을 벗겨 객체로 사용하게 된다.
JSON의 특징과 응답헤더
응답으로 주고받은 JSON은 응답의 body 부분 이다.
응답에는 header와 body부분으로 나뉘는데 body에는 JSON이 들어간다.
그렇다면 header에는 어떤게 들어갈까?
header에는 body와 관련된 요약정보가 들어가게 됩니다.
요약정보라 함은 응답을 보내는 사이트가 어디인지, 바디의 형태는 JSON인지 등등을 포함하고 있다. 요청도 마찬가지로 헤더가 존재한다. 요청또한 JSON이나 html 데이터 형태로 보낼 수 있다.
API와 CRUD
API는 크게 4가지 방식으로 구분할 수 있다.
1. 새로운 것을생성하는 API⇒ CREATE
2. 기존의 것을조회하는 API⇒ READ
3. 기존의 것을수정하는 API⇒ UPDATE
4. 기존의 것을삭제하는 API⇒ DELETE
plus 목록보기 API
- rest-API는 axios를 설치하면 되고 graphql-API는 apollo-client를 설치 후 메소드를 입력해야 사용할 수 있다.
- rest-API는 생성시 post, 수정시 put, 삭제시 delete, 조회시 get,
graphql-API는 좀 더 효율적으로 바뀌어서 생성, 수정, 삭제등 데이터가 변경되면 mutation 하나로 들어가고, 변경되지 않는 조회는 query로 입력한다.
⭐️ MUTATION은 변경이라 조심히 다뤄야 한다.
vs code에서 사용하는 방법
한장에 정리
API 명세서
실무에서도 설명서를 보고 친다. 설명서를 다른말로 Docs라고 한다.
**API 명세서**는**API 사용 설명서**이다.
홈페이지를 만들기 전, Back-end 개발자가 만들어 놓은 API 가 몇 개 있고, 어떻게 구성되어있는지 확인하기 위해 필요하다.
API명세서는 Back-end 개발자에게 받아야 한다.Back-end 개발자는 자신이 만든 API를 직접 문서 형태로 작성하거나, swagger 라는 프로그램을 설치해서 만든다.
데이터 전송 실습
REST-API
우선 postman을 다운받아 실행해준다.
http://example.codebootcamp.co.kr/api-docs/
or
https://practice.codebootcamp.co.kr/api-docs/
위 주소로 들어가 설명서도 열어준다.
이름을 같이 하고 메소드만 다르게 해서 통일감을 주는 걸 restful하다 라고 한다.
오픈 API를 제공하는 한국 사이트(koreanjson.com)
koreanjson에서 유저목록이라는 무료 api를 가져와 get 옆에 주소를 붙여넣고 send를 누르면 값을 받아올 수 있다.
vs code에서는 이 값을 상수에 담아주고 사용한다.
axios.get('https://koreanjson.com/posts/1')
graphql-API
http://example.codebootcamp.co.kr/graphql
or
https://practice.codebootcamp.co.kr/graphql
graphql은 연습도구와 설명서가 하나로 되어있다.
위 주소로 들어가준다.
여기서 s가 붙은것은 전체목록을 조회한다는 뜻!
난의도는 프로필이 가장쉽지만 좋은 방법은 아니다.??
이를 개선한 것이 게시판이고, 이것을 최종적으로 개선한게 프로덕트이다. (포트폴리오는 다 product이다.)
mutation {
//여기서 shift+space 를 누르면 사용할 수 있는 목록이 보인다.
}
프로필은 철수가 중복 되면 어떻게 하지? 하는 문제가 있었다.
그런데 보드는 순서를 조회하기 때문에 중복을 피할 수 있다. 12번을 조회했다.
하지만 수정에서 입력과 변경할 값이 잘 나눠져 있지 않아 헷갈린다.
프로덕트는 이를 최종 개선하여 고유한 id를 부여한다.
create를 하면 이렇게 고유의 아이디가 부여된다.
이렇게 부여된 아이디로 조회하면 잘 조회되는 걸 볼 수 있다.
update로 변경도 가능하다.
다시 조회 시 변경된 걸 볼 수 있다.
graphQl docs의 필수값
1-1 . ! 는 무조건 보내줘야하는 필수값입니다.
1-2 . [!]는 있다면 무조건 보내줘야하는 조건필수값 입니다..
오늘 퀴즈는 오전에 배운 graphql playground로 데이터 입력하고 받아오고 변경하는 문제이다.
