가장 중요한 개념인 비동기 처리에 대해 블로그에 복습할 겸 정리해본다.
프론트에서 원하는 데이터를 보여주기 위해서는 백엔드에 데이터를 요청해야 한다. 서버(백엔드) 컴퓨터는 이때 데이터베이스에서 데이터 생성,조회,수정 혹은 삭제와 같은 과정을 거친 후 요청에 대해 브라우저에 응답을 하게 된다. 이때 요청-응답 과정에서 동기와 비동기 처리 두가지로 나뉘게 된다.
동기 처리
비동기를 알기 전 동기적인 처리에 대해서 먼저 살펴보면,
동기 처리는 작업 요청을 한 뒤 서버 컴퓨터의 작업이 끝날 때까지 기다린 후 다음 작업을 실행하는 방법이다.
예를 들어 게시판 서비스가 있고, 브라우저에서 게시글 등록을 한 뒤 그 내용을 보고 싶다고 가정해보자.
게시글을 등록했을 때 백엔드에 데이터가 저장되어야 내용을 확인할 수 있는데 이 때 이 순서가 지켜지지 않으면 저장되지 않은 데이터가 나오는 등 오류가 발생할 수 있다.
이처럼 동기 처리는 여러 작업을 수행할 때 순서가 필요한 처리 방식이라고 할 수 있다.
비동기 처리
반면 비동기는 요청들이 서로 기다릴 필요가 없을 때 쓰인다.
(예: 게시물 목록과 상품 목록을 동시에 가져오는 것, 게임 다운로드 받으면서 카톡이 가능한 것)
js는 default가 동기적 방식이고,
js에서 사용되는 라이브러리들(axios,apollo-client 등)은 비동기 방식이 default다.
function 함수이름() {
const data = axios.get('https://koreanjson.com/posts/1')
console.log(data) // 결과: Promise
}위의 코드처럼 axios로 get 메소드를 실행하고 바로 데이터를 호출하면 Promise 객체만 반환되고 데이터는 불러올 수 없다.
그래서, 비동기 작업이 디폴트인 라이브러리들을 동기로 처리하기 위해 async,await 명령어를 사용하게 된다.
async, await
api중 REST-API를 기준으로 사용법을 알아보면 위에 있던 코드를 개선할 수 있다.
async function 함수이름() {
const data = await axios.get('https://koreanjson.com/posts/1')
console.log(data) // {id: 1, title: "정당의 목적이나 활동이 ...", ...}
}처리할 함수 앞에 async를 붙여주고 실행할 메소드 앞에 await를 붙여준다.
await가 자동으로 비동기 처리 되지 않도록 기다려달라는 뜻이다.
이렇게 되면 순서대로 get 메소드로 데이터를 조회해서 data 변수에 데이터가 저장되어 결과를 볼 수 있게 된다.
