동기 / 비동기 + async / await

전은찬·2023년 1월 12일
0
post-thumbnail

코딩 부트캠프 4일차

목요일.
오늘은 부트캠프 4일차다.
이론적으로 동기 / 비동기 통신 방법에 대해 배웠다.

일단 먼저 처리 과정에 대한 이해가 필요하다.
우리가 데이터를 주고 받기위해 브라우저에서 데이터를 request하면 백엔드 컴퓨터가 요청을 받고, 데이터베이스에서 데이터를 처리한 후에 브라우저에 response를 돌려준다.
이 과정을 정확히 이해하고 다음으로 넘어가자.

기본 JS는 서버 컴퓨터의 작업이 끝날 때까지 기다린 후에 다음 작업을 실행하는 동기 실행 방식으로 통신하지만
axios나 apollo-client와 같은 통신을 도와주는 라이브러리들은 기본적으로 서버 컴퓨터의 작업이 끝날 때까지 기다리지않는 비동기 실행방식으로 통신한다.
그래서 간혹 콘솔에서 데이터가 처리되기 이전에 불러오기 과정이 실행되어 문제가 발생하는 경우가 있다.

이러한 문제가 있는 비동기 통신 방법이 아닌 동기 통신 방법으로 사용해야만 하는 경우가 있는데 동기 통신 방법은 서버 컴퓨터의 작업이 끝날 때까지 기다린 후에 다음 작업을 실행하는 통신이다.

// 동기 방식과 비동기 방식을 시각적으로 표현한 이미지 //

이를 도와주는 명령어는 async/await 이다.
async와 await를 사용하면 await가 작성된 부분의 코드 실행이 완전히 완료되기 전까지는 그 다음, 하단의 코드가 실행되지 않도록 해준다.
즉 작업이 완전이 종료된 후에 완성된 데이터를 불러오기 때문에 문제없이 원하는 화면을 출력할 수 있을 것이다.

async와 await를 작성하는 위치이다.
// 자료출처 : 코드캠프 {} //

본 캠프 이전에 프리캠프에서 동기 / 비동기에 대해 얇게 배운 적이 있다.

동기
ex) 점원에게 주문하면 주문 진행되고 끝날 때 까지 대기
비동기
ex) 주문하면 대기열로 빠지고 진행하면서 다음 주문 접수, 요청 받고 응답 없어도 요청 받기 가능

stack, queue 이라는 자료구조는 데이터를 효율적으로 관리하기 위한 체계이다.
stack // Last In First Out 나중에 들어 온 신호가 먼저 나감
queue // First In First Out 처음 들어 온 신호가 먼저 나감

promise 객체에는
fulfilled : 요청이 성공한 상태,
pending : 요청에 대한 응답을 기다리는 상태,
rejected : 요청이 실패한 상태가 있다

그 당시의 필기 내용인데 본캠프 와서 강의로 직접 듣고
코딩까지 해보니까 아주 조금은 이해가 되는 것 같아서 다행이다 ㅜ!!

그리고 오늘은 나름 블로깅도 재미를 붙인 나를 발견한 것 같기도..? ^__^

profile
no record no memory

0개의 댓글