동기와 비동기

하나의 작업이 끝날 때까지 다음 작업이 기다리는 실행 방식입니다.

카페로 비유하면, 첫 번째 손님이 주문(데이터 호출)한 커피(응답 데이터)가 나올 때까지 다음 손님은 주문할 수 없습니다. 커피가 나와야(호출 성공) 다음 손님이 주문할 수 있는데, 이것이 동기 방식입니다.

하나의 작업이 진행되는 동안 다른 작업도 함께 진행되는 방식입니다.

첫 번째 손님의 커피를 만드는 동안 다음 손님의 주문도 받고, 먼저 완성된 순서대로 커피를 내주는 것이 비동기 방식입니다.

---

JavaScript 실행 환경 내부에는 call stack과 callback queue라는 영역이 있습니다.

stack : LIFO(Last In First Out) 방식으로, 마지막에 들어온 함수가 가장 먼저 처리됩니다. queue : FIFO(First In First Out)으로 내부 데이터가 처리됩니다. 먼저 들어온 함수, 데이터가 가장 먼저 처리되는 구조입니다.

setTimeout(() => {
	console.log("setTimeout call")
})

const func3 = function() {
	console.log("func3 call")
}

const func2 = function() {
	func3()
	console.log("func2 call")
}

const func1 = function() {
	func2()
	console.log("func1 call")
}

func1()

log => 

func3 call
func2 call
func1 call
setTimeout call

사용자 입장에서는 동기 방식으로 데이터를 받으면 기다리는 시간이 길어져 불편합니다.

Promise

• JavaScript에서 비동기 작업을 간편하게 처리해 주는 객체입니다.
• 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다.
• pending(대기), fulfilled(이행), rejected(거부) 세 가지 상태가 있습니다.

const promiseTest01 = function () {
    return new Promise((resolver , reject) => {
        resolver(100);
    })
}

promiseTest01()

const promiseTest02 = function () {
    return new Promise((resolver , reject) => {
        setTimeout(() =>{
            resolver(100);
        } , 2000)
    })
}

promiseTest()

log =>

1.  Promise {fulfilled : 100} // 데이터를 바로 받았기에 데이터 100을 리턴
2.  Promise {pending} // 2초가 지나지 않았기에 pending(대기)상태

async/await

async/await를 사용하면 비동기 코드를 동기 코드처럼 순서대로 읽히게 작성할 수 있습니다.

데이터를 받아온 뒤에 다음 코드를 실행해야 할 때 특히 유용합니다.

async/await 예시

async function 함수이름() {
	const data = await axios.get('https://koreanjson.com/posts/1')
	console.log(data) 
    // {id: 1, title: "정당의 목적이나 활동이 ...", ...}
}
// await이 작성된 부분의 코드 실행이 완전히 완료되기 전까지는 하단의 코드로 실행이 넘어가지 않습니다. 
// 완전히 완료된 후 완성된 데이터를 받아오기 때문에 해당 코드를 실행하면 콘솔 창에 우리가 불러오고자 했던 데이터가 잘 보여지는 것을 알 수 있습니다.

await는 async 함수 안에서만 사용할 수 있으니 유의해야 합니다.