04일차) 백엔드와 통신하자! async/await

동기/비동기

게시글을 등록 수 게시글을 불러왔을 때 게시글이 불러와지지 않는 경우가 있다. 이러한 문제는 게시글 등록 요청 후 백엔드 컴퓨터에 요청을 전송하고 데이터가 처리된 후 게시글 불러오기 과정이 실행되어야 하는데 데이터 처리 이전에 게시글 불러오기 과정이 실행되어져 문제가 발생하는 것이다!

이러한 실행 방식을 ### 비동기 실행이라 한다.

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

동기통신(async/await)

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

우리가 비동기 실행 방식에서 동기 실행 방식으로 변경해주기 위해서는 async/await이 필요하다.

위 코드처럼 작성하면 되는데 await 해주기 위해서는 꼭 async 도 함께 작성되어야하니 유의해야 한다!!

이렇게 작성하면 await 이 작성된 부분의 코드 실행이 완전히 완료되기 전까지는 하단의 코드로 실행이 넘어가지 않는다. 완전히 완료된 후 완성된 데이터를 받아오기 때문에 해당 코드를 실행하면 콘솔 창에 우리가 불러오고자 했던 데이터가 잘 보여지는 것을 알 수 있다.

axios.get는 비동기로 작동하는데
await.axios.get하면 동기적으로 작동하게됨!!
async / await는 비동기를 동기로 바꿔주는 명령어!
둘은 짝꿍임!