부트캠프 3일차는 오늘은 통신프론트앤드와 백엔드가 어떻게 통신을 하는지 배웠다.
통신하는 방법은 크게 2가지 이다.
- Rest
- Graphql
예전에는 Rest 라는 방법밖에 없었다가 최근에 Graphql 방식이 나와 많이 변경중이다.
사용방식은 아래와 같다.
Rest-API
https://naver.com//board/1 (네이버에서 1번 게시글 조회)
https://naver.com/profile/철수 (네이버에서 철수 프로필 조회)
Graphql-API
board(1) (1번 게시글 조회)
profile("철수") (철수 프로필 조회)
Rest-API는 요청 내용에 대해 모든 내용을 다 전송한다.
(쓸모없는 데이터도 모두 전송받는다)
쓸모없는 데이터도 모두 전송하다보니 규모가 작을때는 별 문제 없지만 이용자수가 많아질수록 엄청난 트래픽이 발생한다는 이야기...
Graphql-API가 나온이유가 바로 이러한 점을 보완하기 위해 나왔다.
형식에서도 볼수 있지만 Graphql-API는 함수형으로 되어 있고 객체형식이라서 원하는 객체의 값에 접근해서 해당 값만 불러올수 있다.
이러한 이유 때문에 프론트엔드 개발자가 백엔드 개발자에게 기능요청을 하지 않아도 된다고 한다.
API 요청방식은 둘다 비슷하다.
다만 이부분에서도 Graphql-API가 더 간단한 편이다.
rest API는 백엔드 컴퓨터에 요청시 4가지 방법으로 요청한다
Create(생성): POST
Read(조회): Get
Update(수정): PUT
Delete(삭제): Delete
Graphql API는 2가지로 끝이다.
Mutation
Query
무엇인가를 업데이트(삭제,수정,생성)할때는 Mutation
조회만 할때는 Query
점점 바뀌어 가는 추세이긴 하지만 Graphql이 좋다고 무조건 사용하기는 어려우니 Rest 방식도 조금씩 알려주신다고 한다.
Mutation과 Query 사용방법은 비교적 쉬운편이며 제공되어 있는 개발참고 문서에 보면 자세히 나와있다.
Query 예시
query {
fetchProfile(name:"영희"){
school
}
}
미리 만들어져있는 기능에 query로 조회를 해보았다.
"영희"란 이름을 가진 프로필에 접근해 해당 프로필의 school값을 요청한다.
{
"data": {
"fetchProfile": {
"school": "다람초"
}
}
}정상적으로 요청을 하면 위에처럼 data를 변환 받는다.
"영희"는 다람초에 다닌다.
Mutation 예시
mutation {
createBoard(
writer:"abc"
title:"첫글"
contents:"없음"){
message
number
}
}게시글을 등록하는 기능인 createBoard를 사용하기에 Mutation으로 생성을 해보았다.
{
"data": {
"createBoard": {
"message": "게시물이 정상적으로 등록되었습니다.",
"number": 162
}
}
}정상적으로 요청하면 데이터를 받는다.
162번 번호를 가진 새로운 게시글이 등록되었다.
요청시에는 꼭 적어야하는값, 꼭 반환해야하는 값들이 있다. 그 값들을 적지 않으면 에러가 난다.
해당 값은 개발문서에 적혀져 있다.
문법은 복습을 많이 해둬야 할거 같다.
어제 배웠던 state도 과제로 많이 복습을 했지만 오늘 다시사용하려니 바로바로 작성이 어렵다.
점점 익숙해지도록 자주자주 사용해봐야겠다.
