ASYNC/AWAIT

wooo·2023년 3월 17일

VSCODE에서 API 요청

데이터를 주고 받기 위해서는 브라우저에서 데이터를 요청하고, 그 요청을 받은 백엔드 컴퓨터는 데이터베이스에서 데이터를 처리하여 브라우저에 응답을 돌려준다. 이때 데이터가 처리되지 않은 상태에서 해당 데이터를 불러오면 에러가 발생하게 된다.

동기 vs 비동기

기본적으로 자바스크립트는 서버 컴퓨터의 작업이 끝날 때까지 기다린 후 다음 작업을 실행하는 동기 실행 방식으로 통신하지만, axios나 apollo-client같이 통신을 도와주는 라이브러리들은 기본적으로 서버 컴퓨터의 작업이 끝날 때까지 기다리지 않는 비동기 실행 방식으로 통신하기 때문에 이를 동기 방식으로 바꾸어 주어야한다.

동기 ---> API 요청을 보내고 응답을 받을 때까지 기다리자!!
비동기 -> API 요청을 보내고 응답을 받을 때까지기다리지 말자!!

요약하자면 프론트에서 백으로 API를 요청하면 백에서는 데이터 베이스에 그 정보를 저장하고 응답을 준다. 이때 응답을 받을 때까지 기다리는 것이 동기, 기다리지 않는 것을 비동기라고 한다.

비동기는 요청들이 서로 기다릴 필요가 없을 때 사용할 수 있고 동시에 여러 일 할 때 효율적이다.

ASYNC와 AWAIT

위에서 말한 것과 같이 axios나 apollo-client 같은 경우 비동기 방식으로 통신이 이루어져 아래와 같이 나타난다.

	function 함수이름() {
	const data = axios.get('https://koreanjson.com/posts/1')
	console.log(data) // Promise
	}

💡 Promise 객체
Promise 객체는 자바스크립트에서 비동기 처리에서 사용되는 객체이다. 주로 서버에서 받아온 데이터를 화면에 표시하기 위해서 사용하며 데이터를 받아오기도 전에 데이터를 화면에 표시하려고 하면 오류가 발생하거나 빈 화면이 뜨게 되는데, 이러한 문제를 해결하기 위한 방법 중 하나이다.
프로미스에는 세 가지의 처리 과정 상태를 나타낸다.

Pending(대기): 비동기 처리 로직이 아직 완료되지 않은 상태

Fulfilled(이행): 비동기 처리가 완료되어 프로미스가 결과 값을 반환해 준 상태

Rejected(실패): 비동기 처리가 실패하거나 오류가 발생한 상태

웹 개발을 하면서 데이터를 다루다보면 만날 수 있는 개념이기 때문에 꼭 이해하기!!!!

이를 해결해주기 위해서는 async와 await 명령어를 사용해주면 된다.

	```jsx
	**async** function 함수이름() {
	const data = **await** axios.get('https://koreanjson.com/posts/1')
	console.log(data) // {id: 1, title: "정당의 목적이나 활동이 ...", ...}
	}

async/await을 사용해주면 await이 작성된 부분의 코드 실행이 완전히 완료되기 전까지는 상단의 코드가 실행되지 않고 작업이 완전히 완료된 후 완성된 데이터를 화면에 나타낸다.

실습

vscode에서 playground에서 연습했던 코드를 적용하기에 앞서 app.js라는 파일에 아래와 같이 apollo.client를 세팅해준다.

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

function MyApp({ Component, pageProps }){
	const client = new ApolloClient({
		uri: "http://backend-example.codebootcamp.co.kr/graphql",
		cache: new InMemoryCache()
	})

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

이렇게 세팅을 다 끝마피면 위의 사진에서 보이는 것 처럼 return 안의 Component 자리에 index.js가 들어오게 되고 index.js가 합쳐진 app.js가 실행되는 원리이다.

⚡️ 처음에는 익숙하지 않아 에러가 많이 발생하기 때문에 플레이 그라운드에서 먼저 코드를 확인하고 그 다음 vscode에서 사용하는 방법을 추천!

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

// 2. gql`` 사이에 복붙 후 아래와 같은 형태를 만들어줌!
const aaa = gql`
    mutation{
        createBoard
        (
            writer : "문동은"
            title: "이모님 구합니다."
            contents: "연락주세요."
        )
        {
            _id
            number
            message
        }
    }
`

export default function GraphqlMutationPage() {
	// 3. gql 변수/상수를 활용하여, useMutation 코드 생성
    const [qqq] = useMutation(aaa)

    // 4.게시물 등록 버튼을 클릭했을 때 실행되는 함수에서 mutation 코드를 실행
    const onClickSubmit = async () => {
        const result = await qqq()
        console.log(result)
    }

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

조금 더 실전에 가깝게!

graphql 코드

const CREATE_BOARD = gql`
	mutation createBoard($writer: String, $title: String, $contents:String){
		createBoard
		(
			writer: $writer
			title: $title 
			contents: $contents
		)
		{
			_id
	        number
			message
		}
	}
`

mutation 코드

    const onClickSubmit = async () => {
        const result = await qqq({
            variables: {    // variables 이게 $ 역할을 함
                writer: "문동은",
                title: "이모님 구합니다.",
                contents: "연락주세요."
            }
        })
    }

에러 잡는 방법

기능은 나중에 시간이 지나면 다 할 수 있다고 한다. 하지만 에러는 많이 확인하고 스스로 해결한 만큼 나중에 문제가 발생했을 때 해당 에러가 어떠한 부분에서 발생하고 어떻게 하면 해결할 수 있는지 알 수 있다고 한다. 그만큼 에러를 확인하고 해결하는 과정은 되게 중요하다!

에러는 아래와 같은 방법으로 확인이 가능하다.

html/css 같은 부분에서 문제가 발생한 경우
브라우저의 elements 탭으로 이동
elements 왼쪽의 마우스 버튼을 클릭하여 에러가 난 부분을 확인 및 수정
그 다음 vscode로 이동하여 다시 수정

javascript 문제일 경우 console 탭으로 이동하여 확인하기

가장 중요한건 network
네트워크 창을 켠 상태에서 다시 실행하기
빨간색으로 표시된 에러를 찾은 후 클릭하면 어느 부분이 에러인지 확인 가능
이때 header와 payload(리퀘에 보내는 부분), response를 중점적으로 봐야한다. 특히 response에 에러 메세지가 다 뜨기 때문에 중점적으로 확인하면 좋다!!