1. 동기 & 비동기

1-1. 동기 - 기다리는 것

• 작업방식이 순차적으로 진행되어 다음 작업을 하기전 전 단계가 마무리될 때 까지 기다린다.
• 쉽게 생각하면 직렬방식이라 생각하면 편하다.
• 위 사진으로 예시를 든다면 게시물 등록으로 3초를 기다리는 동안 게시물 등록완료는 3초를 기다려서 등록이 된 후에 게시물 등록완료를 진행하고 등록완료를 3초 기다린 후에 게시물 불러오기를 진행해서 순차적으로 진행되어 문제가 생기지 않게된다.

1-2. 비동기 - 기다리지 않는 것

• 작업방식이 요청한 작업을 기다리지 않고 바로 다른 작업을 진행하는 것이다.
• 쉽게 생각하면 병렬방식!
• 작업이 완료될 때 작업의 결과를 콜백함수나 프로미스를 통해 전달된다.
• 위 사진으로 예시를 든다면 게시물 등록을 하고 게시물 등록 완료를 기다리지 않아 완료가 되기전에 불러오기가 너무 빨리 진행되어 문제가 생긴다.

비동기가 필요한 순간

• 동시에 여러 일 할때 사용된다. 예를 들어 네이버의 홈페이지를 생각하면 각각의 컴포넌트마다 검색기능을 하는 곳, 뉴스를 보여줘야 하는 곳, 상품을 보여줘야 하는 곳 등등 수많은 곳들을 보여줘야 한다. 이럴때 모든 부분을 동기처리 된다면 페이지가 불러지는데 오랜 시간이 필요하므로 검색이 동기 되면서 뉴스도 동기하고 상품도 동기하면서 전체적인 섹션은 비동기처리를 해야하는 것 같다.

1-3. Promise 객체

• Promise는 JavaScript의 비동기 작업을 처리하기 위해 만들어진 객체이며 네트워크 요청, 파일 읽기 같은 비동기 작업에 사용
• 기존의 콜백 함수방식은 코드가 복잡해지기 쉬워서 이를 더 쉽게 처리하기 위해 Promise가 등장함.

Promise의 흐름

• Pending (대기 중): 다운로드 중.
• Fulfilled (이행됨): 다운로드 성공.
• Rejected (거부됨): 다운로드 실패.

1-3. async & await

• async와 await는 JavaScript에서 비동기 작업을 다루는 방식을 쉽게 만들어 주는 키워드

async 키워드

• async는 비동기 함수를 정의하는 키워드이며, 항상 Promise 객체를 반환하여 자동으로 비동기 처리를 위한 함수가 된다.

await 키워드

• await는 Promise가 해결될 때까지 기다리는 역할을 한다. await 키워드는 반드시 async 함수 내부에서만 사용할 수 있고 await는 Promise가 해결된 후에야 다음 줄의 코드가 실행되므로, 동기적인 코드 흐름을 제공한다.

// 비동기
  const onclickAsync = () => {
    const result = fetch("https://koreanjson.com/posts/1");
    console.log(result); // Promise
  };

// 동기
  const onClickSync = async () => {
    const result = await fetch("https://koreanjson.com/posts/1");
    const data = await result.json();
    console.log(data); // 제대로된 결과 => (title: "...", id = "...")
  };

• onclickAsync 함수의 경우 koreanjson의 API를 불러와 콘솔에 출력하고 있다. 하지만 제대로 된 값을 받지 못했고 Promise를 반환받게 된다.

• 이유는 아직 API를 받기도 전인데 바로 콘솔에 출력하고 있기 때문이다.

• onClickSync 함수의 경우 async를 주고 API에 await을 걸어줘서 API를 받아오고 받아온 값을 json형태로 바꾸고 받게 되어서 제대로 된 결과가 출력되고 있음.

2. GraphQL vsc에 적용하기

1. GraphQL을 npm으로 설치하기

1. apollographql에서 들어가서 설치할 코드(yarn add @apollo/client graphql)를 복사하고 터미널에 붙여준다.
2. package.json에 가보면 apollo/client와 graphql이 설치된 것을 볼 수 있다.

2. 설치받은 내용을 적용하기 위한 세팅파일 생성하기

1. src파일에 apllo-setting이라는 파일을 만들어준다.
2. 그 후 이 코드들을 붙여 넣어줌.

"use client";

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

interface IApolloSetting {
  children: React.ReactNode;
}
export default function ApolloSetting(props: IApolloSetting) {
  const client = new ApolloClient({
    uri: "http://main-example.codebootcamp.co.kr/graphql",
    cache: new InMemoryCache(),
  });

  return <ApolloProvider client={client}>{props.children}</ApolloProvider>;
}

3. layout.tsx에서 전체 페이지를 담당하는 부분에 ApolloSetting 함수를 덮어준다. {props.children}

3. mutation을 사용하기 전, playground에서 사용하려는 mutation이 제대로 작동하는지 확인한다.

4. 만약, 제대로 작동한다면, graphql mutation을 실행하려는 페이지 상단에서, apollo-client 의 도구들을 불러온다.

// graphql 요청에 필요한 도구 불러오기
import { useMutation, gql } from '@apollo/client'

5. javascript 입력 부분에 playground의 코드를 복사하여 아래와 같이 gql`` 사이에 붙여넣어 변수/상수를 만들어 준다.

// graphql 코드 생성
const 나의그래프큐엘셋팅 = gql`
	mutation {
		createBoard(
			writer: "123",
			title: "안녕하세요",
			contents: "반갑습니다"
		){
			_id
			number
			message
		}
	}
`

6. 위에서 만든 gql 변수/상수를 활용하여, useMutation을 만들어 준다.

// mutation 코드 생성
const [나의함수] = useMutation(나의그래프큐엘셋팅)

7. 게시물 등록 버튼을 클릭했을 때 실행되는 함수에서 mutation 코드를 실행해 준다.

const [나의함수] = useMutation(나의그래프큐엘셋팅);

const onClickSubmit = () => {
    나의함수({
				variables :{
					writer: "123",
					title: "안녕하세요",
					contents: "반갑습니다"
				}
		});
}

return <button onClick={onClickSubmit}>GRAPHQL-API 요청하기</button>;

8. 게시물이 정상적으로 등록되는지 확인해 준다.

• 개발자도구 -> 네트워트로 이동하면 상태확인 가능

추가 - async / await 적용

• 요청에 대한 응답으로 받은 객체(JSON)를 변수에 담아서 사용하기 위해서는 async / await을 통해 통신이 완료될 때까지 기다려줘야 한다.

// mutation에 동기식 처리
async function handleClickPost(){
	const result = await createBoard({
      variables: {
        aaa: "훈이",
        bbb: "1234",
        ccc: "안녕하세요 훈이에요",
        ddd: "반갑습니다"
      }
    })

	// 결과물 확인하기
	console.log(result)
}

return (
	<button onClick={handleClickPost}>게시물 등록</button>
)