[TIL] Day4

은채·2022년 5월 12일

TIL 코드캠프

코드캠프 TIL

목록 보기

4/43

Day 4 학습목표

1. 동기와 비동기 방식 ' Async-Await'

두 개의 컴퓨터가 서로 데이터를 주고 받기 위한 HTTP 통신 중
요청이 있으면 반드시 응답을 받아와야하는 HTTP의 규칙

등록하고, 요청했는데 안 불러와진다?
글이 작성해서 백엔드로 넘어간 다음 db에 저장이 되면, 그 내용을 불러와야하는데
등록이 되기 전에 불러오는 요청이 들어가서 없다고 나온다

비동기

순서가 상관이 없을 때 - 동시에 여러개의 일을 해도 괜찮으면, 요청이 서로 기다릴 필요가 없을 때
서버 컴퓨터가 작업이 끝날 때까지 기다리지 않는 통신
서버에 요청 (등록, 수정, 삭제 등) 저장이 될 때까지 기다리지 않음

(ex.네이버 메인 / 게임받으며 카톡하기)

' async/ await ': 비동기를 동기로 바꿔주는 명령어

동기

게시글 등록 - 완료 (응답이 모두 끝난 후 요청) - 불러오기
서버 컴퓨터가 작업이 끝날 때까지 기다리는 통신
순서가 있는 경우에는 동기 방식으로 해야 한다.

2. Vscode에서 데이터 전송하기

백엔드에서 데이터를 받아올 때까지 기다려야 하지만, 그렇지 않고 두 번째 줄로 바로 넘어오게 된다.
data 안에는 비어있음, 언젠간 주겠다는 promise 만..
왜 ?

📌 javascript는 기본적으로 동기적 방식이다
한 줄 한 줄 내려간다.

📌 axios 등의 라이브러리 => 비동기적 방식
데이터 요청을 했는데, 기다리지 않고 다음 줄로 내려와버린다.

기다리게 하는 명령어

async / await

async는 await가 실행되는 함수에 붙여주면 된다.

vscode 실습

rest api

클릭 함수의 이름은 보통 두 가지로 많이 사용한다
1) handleClick 2) onClick

axios로 get 요청을 보내보자

결과는???

다 받아올 때까지 기다리지 않고 바로 console.log()를 해버리는 바람에 Promise만 나온다.

async/await 를 다시 해보자

결과는??

백엔드에서 데이터를 받아올 때까지 기다렸다가 result {} 저장해서 보여준다.
data를 보려면 result.data!

자바스크립트였다면 이렇게 했겠지만, 리액트에서는 state를 쓰자.

{data}는 빈 문자열이었다가.
rest api 요청 후, 데이터를 받아오면 result.data.titledl data state에 저장되어 보여지게 된다.

graphql

app.js (설정파일)에 graphql을 위한 설정을 해야한다.

const [실행함수] = useMutation() - 변경 / post, put, delete
const [실행함수] = useQuery() - 가져오기 / get

실행하기
createBoard()

import { useState } from 'react';
import { gql, useMutation } from '@apollo/client';

const CREATE_BOARD = gql`
  mutation {
    createBoard(
      writer: "철수"
      title: "제목입니다~"
      contents: "내용이에요!!!"
    ) {
      _id
      number
      message
    }
  }
`;

export default function GraphqlMutationPage() {
  const [data, setData] = useState('');
  const [callGraphql] = useMutation(CREATE_BOARD);

  const onClickGraphqlApi = async () => {
    const result = await callGraphql();
    console.log(result);
    setData(result.data.createBoard.message);
  };

  return (
    <div>
      <div>{data}</div>
      <button onClick={onClickGraphqlApi}> Graphql-Api 요청하기 </button>
    </div>
  );
}

1) useMutation을 이용해서 함수를 만든다.
2) playground에서 처럼 요청 함수를 작성한다.
2-1) 상단이나 다른 파일에 mutation/query 함수 작성 후 변수에 담아야 함
2-2) 이 때, apollo/client에서 gql, useMutation을 import 해야함
2-2) 그 함수의 이름을 useMutation에 걸어주기
3) 실행 함수에 await 를 붙여, 백엔드에 저장 및 데이터 응답을 받아 올 수 있게 기다려야 한다
4) result.data 안에 함수 이름으로 한 번 더 들어가야 함.
=> result.data.createBoard.return 받고싶은 것