컴퓨터에서 데이터를 처리할때 프론트엔드 컴퓨터에서 데이터에 대한 HTTP요청을 하게된다.
여기서 동기/비동기 방식의 차이를 확인할 수 있는데
웹사이트 게시판을 생각해보면,
게시물 등록을 누르고 등록이 완료된 후 게시물을 보는 과정 - (1) 이 있고
게시물 목록과 함께 광고나 다른 글들이 동시에 표출되는 과정 - (2) 이 있다고 할때 여기서 1번을 동기, 2번을 비동기라고 생각하면된다.
자바스크립트는 기본적으로 동기 방식으로 처리되는데 우리가 사용하는 라이브러리 대부분은 비동기 방식으로 데이터를 처리한다.
웹을 만들때 동기 방식으로 구현을 해야하는 부분이 있을텐데 그때 비동기 방식을 -> 동기 방식으로 변경해주는 명령어가 바로 "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) 차이뿐만아니라 데이터 처리 방식에도 차이가 있으니 구분해서 잘 활용해야 할 필요가 있다.