오늘은 동기와 비동기 그리고 이를 통해 REST-API와 GRAPHQL API를 VSCODE에서 요청하고 응답받는 작업을 해봤다. API를 코드에서 요청할때는 반드시 AWAIT를 사용해서 함수를 동기화 해준 후에 Async를 함수 앞에 써줘야 한다.
동기와 비동기가 도대체 뭐길래 중요한 걸까? 동기는 쉽게 말해 요청이나 작업이 순차적으로 작업이 되는 것이라면, 비동기는 여러 요청이 동시다발적으로 같은 시간에 요청이 일어나는 것이다.
그래서 '게시물등록' 요청과 게시물등록 API를 변수에 담아 console.log()로 출력하는 코드를 짰다면 await(기다려라!) 라는 일종의 명령을 입력하지 않는다면 게시물이 등록되어 '통신' 작업을 하는데는 시간이 걸리는데 게시물등록 통신작업이 완료되기 전에 컴퓨터는 api 정보를 변수에 담으려고 시도할 것이고 당연히 아직 아무런 정보도 오지 않았기 때문에 아무런 정보가 없어서 앞으로 정보가 올것이라는 promise라는 대답을 컴퓨터는 우리에게 해줄 것이다. 이를 코드로 표현하면 다음과 같다.
const onClickSubmit = () => { const result = 나의함수(); //나의 함수는 위에 있는 api 정보가 useMutation을 통해 담긴 함수이다. console.log(result); alert(result.data.createBoard.message); };
그러므로 우리는 여기에 정보가 들어오면 변수에 담기도록 동기화 작업을 해줘야 한다. 그리고 async(비동기)를 함수 앞에 써주어야만 한다.
const onClickSubmit = async () => { const result = await 나의함수(); console.log(result); alert(result.data.createBoard.message); };
이렇게 비동기를 동기화 해주게 되면 순차적으로 정보가 입력되서 정보가 변수 안에 담기게 될것이다.
그렇다면 동기와 비동기는 알겠는데 어떻게 '나의함수' 안에 api를 담은 것인가? 이런 식으로 api 요청은 어떻게 하나? 먼저 REST-API는 AXIOS를 IMPORT 해와야 한다.
import axios from "axios";
그 후에 JSX위에 axios.get(어떤 요청을 할지에 따라 get이 아닌 다른 요청이 들어갈 수 있다.)("REST-API주소") 이런식으로 입력하여 변수에 담는다.
이를다음과 같이 쓸 수 있다.
await axios.get("https://koreanjson.com/posts/1")
그렇다면 graphql API는 코드에서 어떻게 요청하는가? 이는 "@apollo/client"를 import해와야 한다. 이전에 _app.js 파일에 가서 아폴로 설정이 모든 파일에 적용되도록 세팅을 해둬야 한다.
먹는 아폴로가 아니다.....
그 후에 아폴로에서 우리가 원하는 기능을 걸어줄 훅인 'gql', 과 변수로 만들어 주기 위한 훅인 'useMutation' 을 import 해온다.
그 후에 gql 함수는 아래와 같이 담아준다.
const CREATE_BOARD = gql
mutation {
createBoard(writer: "둘리", title: "밥먹자", contents: "배고파요") {
_id
number
message
}
}
;
백틱이 두개라 코드박스에서 잘려나갔다. (죄송하다...)
아무튼 이런식으로 해주고 이 함수를 다시 또 useMutation을 사용해서 아래와 같이 담아준다.
const [나의함수] = useMutation(CREATE_BOARD);
그 후에 이것을 다시 result같은 변수에 담아주고 console.log(result) 이런식으로 해주면??
const onClickSubmit = async () => { const result = await 나의함수(); console.log(result); alert(result.data.createBoard.message); };
(당연한 이야기지만 무언가를 통해 이 함수가 작동되게끔 해줘야 한다.)
요청이 정상적으로 완료되며 콘솔과 엘럿창을 통해 확인해 볼 수 있게 된다.
자세하진 않지만 간략하고 이해하기 쉽게 적어보려고 노력했다. 부트캠프 특성상 시간이 촉박하여 블TIL을 자세하게 쓸 수 없는점 이해해 주시길 바란다.
