state 박스에 데이터 넣어주기도 버거운 내가 API를 배웠다 (넹...?)
와중에 이 어려운 API가 종류도 두 가지라 두 가지나 알아야한다!
axios의 Rest-API와 apollo-client의 GraphQL-API에 대해 살펴보자!
1. API 란?
우선 컴퓨터 상에서 특정 정보를 얻기 위해선 무조건 "2개"의 컴퓨터가 필요하다.
두 컴퓨터가 텍스트 데이터를 주고 받는 길을 HTTP라고 한다.
HTTP를 통해 프론트엔드 컴퓨터가 요청(request)을 하면, 백엔드 컴퓨터가 요청받은 데이터를 데이터베이스에서 가져와 응답(respose)해준다.
API란, 프론트엔드 컴퓨터가 백엔드 컴퓨터로 요청(request)을 보냈을 때 실행되는 백엔드 기능이라고 할 수 있다.
데이터가 넘쳐나는 세상에서 프론트엔드 컴퓨터는 다양한 데이터를 요청할 것이므로 HTTP는 수십 수만 개가 필요하고, 그 HTTP를 백엔드에서 담당하는 것이 API라고 할 수 있다.
2. API 종류
Rest-API
1) Rest-API는 API 이름이 홈페이지 주소처럼 생겼다.
http://naver.com/board/12) Rest-API를 쓸 경우 프론트엔드에서는 백엔드에서 response 해주는 모든 데이터를 받아야한다.
3) Rest-API의 요청 담당자(라이브러리)는 axios이다.
GraphQL-API
1) GraphQL-API는 일반적인 함수처럼 생겼다.
board(1)2) GraphQL-API는 Rest-API와 달리 프론트엔드에서 필요한 데이터만 골라서 받을 수 있다.
3) GraphQL-API의 요청 담당자(라이브러리)는 apollo-client이다.
3. CRUD
CRUD란, Creat Read Update Delete의 약자로 API를 생성하고 읽고 수정하고 삭제하는 것을 의미한다.
Rest-API
Rest-API에서는 post, get, put, delete로 실행할 수 있다.
GraphQL-API
GraphQL-API에서는 Creat Update Delete는 Mutation으로, Read는 Query로 실행할 수 있다.
4. API 명세서
API 명세서란, API에 대한 내용을 설명해주는 API 설명서이다.
프론트엔드가 해당 API를 활용하기 전, 백엔드에서 만들어 둔 API의 개수와 구성을 확인하기 위해 필요하다. 따라서 API 명세서 역시 백엔드가 만든다.
Rest-API
Rest-API는 API의 내용을 직접 확인하는 연습 창구와 API를 설명해둔 설명서 창구가 다르다.
연습은 포스트맨(Postman)에서 가능하며, 설명서는 스웨거(Swagger)에서 확인할 수 있다.
GraphQL-API
GraphQL-API는 연습 창구와 설명서 창구가 하나로 같다.
(Rest-API 보다 친절한 친구다!)
플레이그라운드 (Playground)에서 설명서를 확인하며 연습해볼 수 있다.
5. VS Code에서 활용하기
API 실행 방식에는 동기 실행과 비동기 실행이 있다.
게시글 등록 API와 게시글 불러오기 API가 있는 경우, 게시글 등록 API를 통해 게시글 등록이 완료되어야 게시글 불러오기 API를 통해 게시글을 불러올 수 있을 것이다.
자바스크립트의 경우 기본적으로 동기 실행이 디폴트 값이기 때문에 게시글 등록, 조회와 같이 순차적으로 처리를 해야 할 경우 따로 처리할 것이 없다.
그러나, 우리가 사용하는 axios와 apollo-client 라이브러리는 비동기 실행이 디폴트 값이기 때문에 따로 동기 실행으로 변환시켜줘야 한다!
이를 위해 async/await를 활용한다.
Rest-API
1) 비동기 통신
function freeBoard() {
const data = axios.get ('http://koreanjson.com/posts/1')
console.log(data) // Promise
}2) 동기 통신
async function freeBoard() {
const data = await axios.get ('http://koreanjson.com/posts/1')
console.log(data) //{id: 1, title: "정당한..."}
}[화살표 함수로 표현할 경우]
const freeBoard = asyns () => {
const data = await axios.get ('http://koreanjson.com/posts/1')
console.log(data) //{id: 1, title: "정당한..."}
}GraphQL-API
첫번째로 '_app.js' 파일에서 설치 도구를 셋팅해줘야 한다. 아직 내가 이 과정은 이해를 한게 아니므로... 세팅한 상태로 치고 넘어가겠다!
1) 비동기 통신
// graphql 요청에 필요한 도구 불러오기
import {useMutation, gql} from '@apollo/client'
// graphql 코드 생성
const CREATE_BOARD = gql `
mutation {
createBoard(writer:"철수", title:"제목입니다~~", contents:"내용이에요!!!"){
_id
number
message
}
}
`
//버튼 클릭 시 실행되는 함수에서 mutation 코드 생성 및 mutation 코드 실행
export default function GraphqlMutationPage() {
const [createBoard] = useMutation(CREATE_BOARD)
const onClickGraphqlApi = () => {
const result = createBoard()
console.log(result)
console.log(result.data.createBoard.message)
}
return (
<button onClick={onClickGraphqlApi}>GraphQl-API 요쳥하기!</button>
)
}2. 동기 통신
// graphql 요청에 필요한 도구 불러오기
import {useMutation, gql} from '@apollo/client'
// graphql 코드 생성
const CREATE_BOARD = gql `
mutation {
createBoard(writer:"철수", title:"제목입니다~~", contents:"내용이에요!!!"){
_id
number
message
}
}
`
//버튼 클릭 시 실행되는 함수에서 mutation 코드 생성 및 mutation 코드 실행
export default function GraphqlMutationPage() {
const [createBoard] = useMutation(CREATE_BOARD)
const onClickGraphqlApi = async() => {
const result = await createBoard()
console.log(result)
console.log(result.data.createBoard.message)
}
return (
<button onClick={onClickGraphqlApi}>GraphQl-API 요쳥하기!</button>
)
}