데이터 처리 방식 _ async & await

권지현·2022년 1월 13일
0

동기와 비동기 방식 ?

컴퓨터에서 데이터를 처리할때 프론트엔드 컴퓨터에서 데이터에 대한 HTTP요청을 하게된다.

여기서 동기/비동기 방식의 차이를 확인할 수 있는데

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

웹사이트 게시판을 생각해보면,

게시물 등록을 누르고 등록이 완료된 후 게시물을 보는 과정 - (1) 이 있고
게시물 목록과 함께 광고나 다른 글들이 동시에 표출되는 과정 - (2) 이 있다고 할때 여기서 1번을 동기, 2번을 비동기라고 생각하면된다.

그렇다면 ASYNC와 AWAIT는 무엇인고 ?

자바스크립트는 기본적으로 동기 방식으로 처리되는데 우리가 사용하는 라이브러리 대부분은 비동기 방식으로 데이터를 처리한다.
웹을 만들때 동기 방식으로 구현을 해야하는 부분이 있을텐데 그때 비동기 방식을 -> 동기 방식으로 변경해주는 명령어가 바로 "ASYNC / AWAIT"이다.

💡 비동기

function newBoard(){
	const data = axios.get("https://koreanjson.com/posts/1")
    	console.log(result.data.title)
} //결과값 : Promise

비동기 방식에서는 컴퓨터에서 순차적으로 코드를 읽어가면서 데이터를 요청하고 응답을 받기 전에 그 다음 코드를 읽고 결과를 도출하기 때문에 결과값이 "Promise"라고 나타난다.

💡 비동기 -> 동기

async function newBoard(){
	const data = await axios.get("https://koreanjson.com/posts/1")
    	console.log(result.data.title)
} //결과값 : {id : 1, title : "정당의 목적이나 활동이...",}

비동기방식을 동기방식으로 바꿔주기위해 async/await 명령어를 넣어주었고,
데이터를 요청한 뒤 이 명령어로 인해 응답을 받고 난 이후 아래 코드를 읽어가는 방식으로 변화되었다. 따라서 결과값이 비동기 방식과 차이를 보이는 것이다.

데이터를 요청할 때 쓰는 API도구(REST - axios) 와 메서드(READ - GET) 차이뿐만아니라 데이터 처리 방식에도 차이가 있으니 구분해서 잘 활용해야 할 필요가 있다.

profile
FE 개발자 성장 기록 👩🏻‍💻

0개의 댓글