동기 실행과 비동기 실행

비동기 실행: 컴퓨터 작업이 끝날 때까지 기다리지 않는 통신이다. 서로 기다려 줄 필요가 없을 경우, 여러가지 요청을 동시에 처리해 줄 때에 이용됨
<<예를 들어 naver.com 사이트에 접속한다면, 사이트 좌측의 언론사 부분과 우측의 쇼핑몰 광고 부분이 나옵니다. 이 둘은 서로 기다려 줄 필요가 없으니 비동기 실행이라고 볼 수 있습니다.>>

동기 실행: 서버 컴퓨터의 작업이 끝날 때까지 기다린 후 다음 작업을 실행하는 통신이다.
<<게시글을 등록 후 불러온다고 가정한다면, 등록 요청과 불러오기 과정이 동시에 실행하면 등록 요청이 미처 완료되지 않은 채로 불러오기 과정이 실행된다면 문제가 일어나게 됩니다.>>

따라서 동기 실행 방식은 등록 요청을 하게 되면, 그 과정이 완료된 후까지 기다리고 게시판을 불러오기 때문에 문제 없이 작업 가능하다!

REST-API에서 동기/비동기 실행

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

위 코드는 요청된 응답을 가져와 저장하고, 그 데이터를 콘솔 창에 찍어주도록 작성한 코드입니다. 해당 코드를 실행하면 콘솔창에는 리턴된 Promise 객체가 보여지게 됩니다.

Promise 객체는 자바스크립트에서 비동기 처리에서 사용되는 객체입니다. 위에서 말했듯, 게시글 등록과 게시글 불러오기를 동시에 실행한다면 오류나 빈 화면이 뜰 것입니다.
<<등록된 글이 저장이 되지도 않은 채로 게시글을 불러오려고 하기 때문에!>>
이 상태에선 무엇이 문제이고 데이터 간에 어떤 상태인지 알기가 어렵습니다. 따라서 Promise 객체는 세 가지 상태(= 처리과정)가 있습니다.

• Pending(대기): 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행): 비동기 처리가 완료되어 프로미스가 결과 값을 반환해 준 상태
• Rejected(실패): 비동기 처리가 실패하거나 오류가 발생한 상태

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

비동기 통신과 동기 통신은 다음과 같은 형식으로 사용합니다. 형식에서의 차이는 동기통신에서 function 앞에 async가 있고, const data = 뒤에는 await 가 붙습니다. 동기 통신에서 이 둘은 짝꿍이라고 보면 쉽습니다. 또한 동기 통신으로 처리하며 데이터를 문제 없이 불러올 수 있기 때문에 Promise 객체가 아닌 데이터가 정상적으로 콘솔에 찍힙니다.