[Javascript] async와 await | 동기와 비동기 방식

동기와 비동기 방식이란?

서버와 통신하는 방식의 종류이다.

 

동기 (Syncronous: 동시에 일어나는)

- 서버 컴퓨터의 작업이 끝날 때까지 기다리는 통신 방식

- 서버에 여러가지 요청을 보낼 경우, 이전 요청에 대한 응답이 끝나야 다음 요청을 보낼 수 있다.

출처 : 코드캠프 강의 자료

 

 

비동기 (Asynchronous : 동시에 일어나지 않는)

- 서버 컴퓨터의 작업이 끝날 때까지 기다리지 않는 통신 방식

- 서버에 여러가지 요청을 보낼 경우, 이전의 요청에 대한 응답이 끝나지 않아도 다른 요청을 보낼 수 있다.

- 비동기 처리는 Javascript의 중요한 이슈 중 하나이다.

출처 : 코드캠프 강의 자료

 

Javascript의 비동기 처리

비동기 처리 방식으로 작동되는 함수의 경우, 이전에 요청한 작업이 완료되지 않았는데 또 다른 요청을 보내는 바람에 오류가 발생할 수 있다.

const data = axios.get('http://koreanjson.com/posts/1') 
console.log(data)  // Promise

Javascript는 한 줄씩 실행된다.(인터프리터 언어) Line1에서 get 요청이 진행되는 동안 응답이 완료되지 않아도 Line2로 넘어가기 때문에 Line2가 콘솔에 찍히는 시점에는 data값이 존재하지 않는다. 이러한 경우에는 Promise가 반환된다.

Promise는 아직 저장이 끝나지 않았지만 추후에는 data를 불러올 수 있다고 약속한다는 의미이다.

 

왜 이런 사태가?

Javascript는 동기 방식으로 통신하지만, axios를 비롯한 라이브러리들은 대체로 비동기 방식으로 작동하기 때문이다.

 

async와 await

이런 경우 async와 await를 사용하여 비동기 통신을 동기 통신으로 바꾸어 줄 수 있다.

//비동기 통신
function 함수이름(){
    const data = axios.get('http://koreanjson.com/posts/1') 
    console.log(data)  // Promise
}

//동기 통신 
async function 함수이름(){ 
    const data = await axios.get('http://koreanjson.com/posts/1') 
    console.log(data)  // {id:1, title: "..."}
}

 

실습

상단의 코드를 VSCode에 입력하고 라이브서버를 돌려보면 Promise가 찍히는 것을 확인할 수 있다.

여기에 async/await를 추가해주면

기다렸다가 데이터를 정상적으로 받아온다.

이제 긁어온 data 객체 안의 정보를 페이지에 반영할 수 있다.