4일차 데이터 통신(동기통신과 비동기통신)

1. 동기와 비동기방식 -> Async-Await
2. vscode에서 데이터 전송해보기 -> Apollo-Client/ Mutation

동기 vs 비동기

비동기

Q : 비동기는 언제 쓰는데?
A : 요청들이 서로 기다릴 필요가 없을때 사용한다.

Q : 그럼 언제 기다릴 필요가 없는데?
A : 동시에 여러 일을 할때 사용한다.

서로 다른 api를 사용하여 데이터를 받아올 때 동시에 처리해주어야 된다.
만일 동시에 처리하지 않으면 게시물 가져와서 보여준 이후에 상품 목록을 가져와 보여주게 된다.

가능하면 비동기가 효율적이나 그렇지 못할때 어쩔 수 없이 동기를 한다

동기

순서가 있는 작업에서 동기 사용

비교

기본적으로 자바스크립트는 서버 컴퓨터의 작업이 끝날 때까지 기다린 후 다음 작업을 실행하는 동기 실행 방식으로 통신 하지만 axios나 apollo-client같이 통신을 도와주는 라이브러리들은 자바스크립트와 다르게 끝날때까지 기다리지 않고 같이 실행하는 비동기 실행 방식으로 통신한다. 따라서 조치가 필요하다.

비동기 통신은 요청들 사이에 서로 기다려줄 필요가 없으므로 여러 가지 요청을 동시에 처리할 수 있는 장점이 있지만,
데이터를 요청하고 화면에 뿌려주는 경우, 아직 응답이 오지 않았는데도 화면에 그려주려하면 에러가 발생할 수 있다.
그래서 우리는 이러한 비동기 실행 방식을 동기 실행 방식으로 바꾸어주어야한다.
이것을 도와주는 명령어가 async/await 이다.

async / await

비동기를 동기로 바꿔주는 명령어

REST-API에서의 async/await

async/await을 사용해주면 await 이후의 코드가 완전히 실행완료되기 전까지는 하단의 코드가 실행되지 않는다.
이렇게 되면 작업이 완전히 완료된 후 완성된 데이터를 화면에 잘 그려줄 수 있다

비동기 통신하면 const data에 axios.get(주소)했을때 값을 가지고 오는데 요청을 보내고 기다리지 않고 바로 다음줄에 console을 찍으면 Promise 값만 나온다.
동기 통신을 이용하여 axios.get을 통해 요청을 보내놓고 데이터를 받아올 때까지 기다린 이후에 다음 작업을 진행하게 된다.

데이터통신에서 객체가 아닌 문자열 또는 HTML로 주고 받는데 axios는 문자열을 제거한 값을 넘겨주어 사용하기 편하다.

호이스팅

예전에는 비동기 통신에서 화살표함수 대신 함수 선언을 하게되면 호이스팅 때문에 이름이 같은 함수면 덮어쓰기가 되는 중복선언 에러가 발생한다. 따라서 화살표 함수를 사용해 비동기방식으로 처리하게 되어 에러를 해결할 수 있다.
또한 async는 함수 앞에 붙게 되므로 아래와 같이 써줄 수 있다.

const onClickSync = async () => {
  //async function onClickSync() {
    const result = await axios.get('https://koreanjson.com/posts/1');
    setTitle(result.data.title);
  }

함수 선언식과 화살표 함수의 차이는 바로 호이스팅과 관련이 있습니다.
호이스팅이란 변수의 선언과 초기화를 분리해서 선언만 코드의 최상단으로 끌어올려주는 것 인데요.
함수 선언식과 변수 var는 코드가 실행되기 전에 선언부만 식별자를 모두 끌어오기 때문에 코드 실행이전에 해당 변수 또는 함수에 접근이 가능합니다.
또한 재선언과 재할당이 가능하기 때문에 예기치 못한 에러가 발생할 수 있어요!
const나 let 역시 호이스팅은 되지만 할당되기 전, 즉 코드가 실행되기 전에는 Temporal Dead Zone, TDZ에 들어가 있기 때문에 접근이 불가능하다는 차이점이 있습니다.
그리고 const의 경우에는 재선언/재할당이 모두 불가능해 예기치 못한 에러를 미연에 방지할 수 있습니다.
우리가 함수 선언식보다는 화살표 함수를 사용하고, let이나 const 변수 선언을 사용하는 이유는 호이스팅과 밀접한 연관이 있다는 것을 알아야한다.

동기 / 비동기 실습

apollo-client 사용해보기

vscode에서 apollo-client를 사용하여 graphql-API 요청하실 때는 useQuery()와 useMutation()을 사용해서 통신한다.
apollo-client에서 import 해주시는 것도 잊지말기!
또한, useQuery()와 useMutation()을 사용하기에 앞서 _app.js에 Apollo-client 관련 설정을 먼저 해주어야 했던 것도 기억한다!

axios와는 다르게 useMutaion을 사용할 때에는 '모든 페이지에서 useMutation을 사용할 거에요' 라고 세팅을 해줘야 한다. 세팅 파일인 _app.js에서 세팅을 해줘야 한다.

import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client';

export default function App({ Component, pageProps }) {
  const client = new ApolloClient({
    uri: 'http://practice.codebootcamp.co.kr/graphql',
    cache: new InMemoryCache(),
  });

  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

API 디버깅하기

• preflight
  

Network 탭에 가서 확인한다.
Type이 preflight 라는게 있는데 이것은 무시해도 된다.
prefligh란 백엔드에게 내가 요청할건데 무슨 메서드가 있는지 물어보는 것이다.

• Header, Body, Response
  

스코프체인

• 스코프체인으로 인해 23번 째 줄 writer는 15번째 줄의 writer를 가리킨다.

URI vs URL

소소한 팁

• 라이브러리나 서비스의 다운로드 수가
  천만 이상 -> 어딜가나 사용됨
  백만 이상 -> 자주 사용됨
  십만 이상 -> 꽤 쓸만하네?

• 데이터베이스가 있는 것은 프론트,백엔드 컴퓨터와 구분하기 위해 원통형으로 그린다.

• apollo 앞에 @가 붙은 것은 뒤에 회사이름이기 때문이다.

  import {gql, useMutation} from "@apollo/clien";