[TIL] 01월 13일 - 동기 vs 비동기

아주 예전에 배운 동기와 비동기 방식에 대해 배워보았다. 

 

동기와 비동기 방식의 목표는

 

1.동기 비동기 => async / await 

2.변수 함수가 이상할때 => Hoisting

3.vscode에서 데이터 전송 -> Apollo Client / Mutation

 

동기 vs 비동기

 

컴퓨터와 컴퓨터 사이의 데이터를 주고 받기 위해 요청 

요청받는 컴퓨터는 그것을 응답

HTTP

 

글을 등록하고 불러오기를 하는데 안불러와지는 이유는 바로 글등록 요청과 불러오기 요청을 같이한 

 

이유중 하나다. 그것을 바로 비동기 라고한다.

동기는 등록요청을 하면 요청이 될때까지 기다린 뒤 불러오기를 요청한다.

 

비동기는 동시에 여러일을 할때 사용한다.

동기는 등록 요청을 하면 요청이 완료될때까지 기다리고 불러오기를 요청하는데 비동기는 동시에 

여러일을 할때 사용된다. 게임을 다운받으면서 카톡을 하는 방식이 바로 비동기 방식이라 볼 수 있다.

동기는 서버 컴퓨터가 작업이 끝날 때 까지를 기다리는 통신인데 비동기는 서버컴퓨터가 작업이 끝날때까지 

기다리지 않는 통신이다.

// Javascript에서는 동기지만 라이브러리들은 대체적으로 비동기적이라 
// 기다리지 않고 바로 아래를 실행시키니 Promise(약속)

위 순서를 보면 아시겠지만 A의 계좌와 B의 계좌는 서로 요청과 응답을 확인한 후 같은 일을 동시에 진행하였다.

 

"계좌이체" 같은 작업은 동기 방식으로 처리해야 A에게 보냈는데 B에게는 못받는 상황이 없을 것이다. 

 

반대로 비동기 방식은 위 예제처럼 노드 사이의 작업 처리 단위를 동시에 맞추지 않아도 된다.

 

비동기 

 

동기는 서버 컴퓨터가 작업이 끝날때까지 기다리는 통신이다.

 

비동기는 서버컴퓨터가 작업이 끝날때까지는 기다리지 않는 통신이다.

// Javascript에서는 동기지만 라이브러리들은 대체적으로 비동기적이라
// 기다리지 않고 바로 아래를 실행시키니 promise
const data = axios.get('https://koreanjson.com/posts/1')
console.log(data) // Promise 약속

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

// 비동기 통신
function 함수이름() {
   const data = axios.get();
   console.log(data); // Promise
}

async function 함수이름() {
   const data = await axios.get();
   console.log(data); // {id: 1, title: "정당의 목적이나 활동이.."

const [실행함수] = useMutation();

실행함수() => 백엔드에 요청

state와 비슷한 useMutation()이란 도구를 활용해 나만의 함수를 만들 수 있다.

 

함수를 불러올때

crate Board 함수를 만들어서 불러와야함
const [ 실행 함수 ] = useMutation(CREATE_BOARD);

비동기 방식의 예 (시험날의학생과 선생)

---