자바스크립트는 기본적으로 동기적 방식이다.
자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.
즉, 함수 실행 창구가 1개이기 때문에 동시에 2개 이상의 함수를 실행할 수 없다.
따라서, 최상위의 실행중인 실행 컨텍스트를 제외한 나머지는 모두 태스크에서 대기한다. (싱글 스레드 방식)

✔︎ 동기(Synchronous)처리란 현재 실행중인 태스크가 종료할 때까지 다음 실행될 태스크가 대기하는 방식이다.
즉, 동기 처리 방식은 태스크를 순서대로 하나씩 처리하는 것이다.
✔︎ 비동기(asynchronous)처리란 현재 실행중인 태스크가 종료되지 않아도 다음 태스크를 바로 실행하는 방식이다.

서버와 통신

요청(request) <-> 응답(response)

Q. 글을 등록했는데 불러오기가 안되는 경우가 있다면?

👉 등록이 완료되기도 전에 불러오기를 해버린 것!
✔️ 해결 => 동기 방식 을 통해 순차적으로 실행되도록 한다.
( 게시글 등록 -> 게시글 등록 완료 -> 게시글 불러오기 )

Q. 그렇다면 비동기 방식은 언제 쓸까?

👉 서로 상관없는, 의존적이지 않은, 순서가 상관없는 작업을 실행 할때!
✔️ 비동기 방식 ( 게시물 목록 가져오기, 상품 목록 가져오기 )

Ajax

Ajax(Asynchronous Javascript and XML)란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다.
Ajax의 등장으로 웹페이지를 변경할 필요가 없는 부분은 다시 렌더링하지 않고 필요한 부분만 비동기 방식으로 렌더링 할 수 있게 되었다.

async-await

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

비동기 처리를 위해 async를 쓴다. async의 짝꿍인 await도 같이 써줘야 한다.
await는 동기 통신 을 위해 사용한다.

async function onClickUpdate() {
	try {
    	await updateBoard({
        	variables: {
            	boardId: router.query.aaa,
            	password: myPassword,
            	updateBoardInput: {
            	title: myTitle,
                contents: myContents
                },
              },
            });
          alert("수정 완료")
          router.push(`/boards/${router.query.aaa}`);
        } catch (error) {
      alert(error.message);
    }
 }

만일 await가 없다면 updateBoard에서 비동기 처리를 하는 동안 기다려주지 않고
바로 다음줄로 넘어가 수정이 되기도 전에 "수정 완료" 알림이 뜨게 된다.
따라서 updateBoard를 await를 통해 동기처리 하여
서버에 데이터가 등록될 때까지 기다리고 그 이후에 alert가 뜨도록 할 수 있다.