async & await에 대해 수많은 블로그를 찾아보고 공부해봤지만 정확하게 어떻게 작동하는지 머리속에 와닿지 않는다. 일단 간단하게 정리 후 추후 실력이 쌓고나서 복습해야겠다.
우선 비동기 & 동기라는 말의 뜻부터 살펴보자 구글에 비동기(Asynchroy)를 검색해보면 Asynchrony, in computer programming, refers to the occurrence of events independent of the main program flow ...라고 나오는데 컴퓨터 프로그래밍 안에서 독립적인사건의 발생을 나타낸다고 나와있다. 즉, 각각의 이벤트가 독립적으로 발생하는 것을 의미하는데 간단하게 네이버 화면을예시로 들어보자면 우리가 네이버를 들어갔을때 왼쪽배너 오른쪽배너 스포츠,건강 모두 각기 다른 테마&주제별데이터들이 존재하는데 이들 각각이 독립적으로 실행되기 때문에 우리가 들어갔을때 어떤 페이지는 빨리뜨고어떤페이지는 늦게 뜨고 오류없이 실행되는것을 볼 수 있다. 반대로 동기는 시간의 흐름대로 동작이 될텐데
네이버 화면이 동기적이라면 어떤 건강테마 뜨고 스포츠 뜨고 배너뜨고 이런식으로 차례차례 시간의 흐름대로데이터가 읽혀져 나왔을 것이다. 여기까지가 내가 이해한 동기와 비동기의 차이점이다.
Javascript는 기본적으로 동기적방식으로 작동한다고 알고 있다. 하지만 외부 API를 요청하는(axios,fetch등) 것들 중 비동기적으로 작동하는 것들이 있다. 하지만 비 동기적으로 작동하게 되면 외부 API를 받아오기도 전에 즉, 게시글을 등록하자마자 게시글을 불러오게되면 등록이 되기도전에 요청하는것이 되므로 오류가 발생한다. 이럴땐 게시글이 등록 된 후에 게시글을 불러와야 오류가 발생되지 않을 것이다. 자바스크립트에서 비동기를 처리하는 방법에는 async await방법이 있다.
async function 함수이름 () {
const data = await axios.get}
함수 맨앞에 async를 작성하고 함수안에 await를 작성함수가 실행 된 후 await(기다렸다가) 실행해라
일단은 기본적으로 비동기 & 동기에 대해서 javascript 내에서 비동기를 처리하는 방법정도 까지 숙지하였고, promise, callback, callback지옥 등 정리되어야 할 개념들이 많이 남아있다.
