일정 순서:
동기 / 비동기
비동기.
예) 게시글 등록을 하고, 등록이 완료되고 나서야 불러오기를 할 수 있음. 등록하자마자 불러오기를 요청할 경우 등록이 완료되지 않았으니 그때에는 비어있다.
따라서 등록이 완료될 때까지 기다려야함.
따라서 다 진행이 되면 게시물 불러오기를 요청해야한다.
이것이 동기 방식이다.(순서가 있다.)
순서가 있는 동기방식
순서 없이 먼저 받아오는것 먼저 처리하는 비동기방식
따라서비동기 방식은 요청들이서로 기다릴 필요가 없을때 사용.
즉, 동시에 여러작업을 할때 사용.
웹페이지를 요청시에, 모든 화면 구성요소들이 순서대로 보여지지 않음. 만약 순서를 기다릴 경우 너무 오래걸림.
따라서 먼저 받아오는대로 그려지는 비동기방식을 사용.
게임을 다운받으면서 카톡 => 비동기
순서가 존재하는 경우에는 어쩔 수 없이 동기방식을 사용한다.
자바스크립트는 기본적으로 동기 방식으로 작동한다.
위에서부터 코드를 한줄씩 읽어, 해당 코드가 끝나면 다음줄로, 넘어가는 형태.(차례대로 실행)
그러나, 외부에 요청하는 라이브러리 들은 (axios, fetch()등) 거의 비동기로 작동한다.
즉, 만나게되면 해당 요청을 진행하고, 이 요청을 끝날때까지 기다리지 않고 바로 아래 코드를 실행한다.
즉, 위의 경우에 axios를 만나 해당 요청을 진행하지만 실제 변수에는 요청한 결과가 담기지 않고 Promise라고 나오게 된다는 것이다.(비동기로 작동을 하기에 차례로 실행되지 않고 다음 코드로 넘어감)
Promise는 데이터를 보내주겠다는 약속인데, 만약 Promise가 아니라 실제 변수에 담긴 데이터를 보고 싶다면 이것을 동기적으로 바꾸어주어야한다. => 이 요청앞에 await라는 명령어를 붙이면 동기적으로 작동하게된다.
이렇게 await를 앞에 붙이게 되면 해당요청의 결과를 받아올 때까지 기다리게되고 이렇게 비동기적 요청을 동기적으로 바꿀 수 있다.
이때 await와 같이 사용되어야 하는 명령어가 있는데 바로 async이다.
await를 사용하는 함수 앞에 async를 붙여주어 감싸주어야 한다.
