#20. 비동기 프로그래밍(2)

비동기 프로그래밍

이번 포스트에서는 자바스크립트에서 어떻게 비동기 작업을 처리하는지 알아보고,
callback 기법에 대해서 소개하겠다.

먼저, 비동기 작업은 setTimeout으로 처리한다.

console.log('1') // 동기

setTimeout(() => console.log('2'), 0) // 비동기

console.log('3') // 동기

setTimeout(() => console.log('4'), 0) // 비동기

// 실행 결과 = 1 3 2 4

---

이제 본격적으로 비동기 작업을 처리하는데 있어 callback이 필요한 이유를 알아보자.

const moveLeft = () => {
	setTimeout(() => console.log('left'), 10)
}

const moveRight = () => {
	setTimeout(() => console.log('right'), 30)
}

위의 예시는 캐릭터를 움직이는 코드다.
왼쪽으로 가는데 10ms 걸리고, 오른쪽으로 가는데 30ms가 걸린다.
캐릭터가 이동하는 작업은 비동기로 동작한다.

이 코드를 가지고 캐릭터를 오른쪽 왼쪽 오른쪽 왼쪽 순으로 이동시켜 보자.

moveRight()
moveLeft()
moveRight()
moveLeft()

// 실행 결과 : left, left, right, right

다들 예상했겠지만, 이렇게 하면 우리가 의도한대로 동작하지 않는다.
위의 경우에서 볼 수 있듯 비동기 작업은 실행 순서를 보장할 수 없다는 문제가 존재한다.

이 문제를 해결하기 위해 등장한게 바로 callback이다.

그러면, callback을 적용해서 문제를 해결해보자.

const moveLeft = (cb) => {
    setTimeout(() => {
    	console.log('left')
        
        if(cb){
          cb()
        }
    }, 10)
}

const moveRight = (cb) => {
    setTimeout(() => {
        console.log('right')
        
         if(cb){
          cb()
         }
    }, 30)
}

moveLeft, moveRight에 인자로 cb(함수)를 받고,
작업이 끝난 뒤 callback을 호출함으로써 비동기 작업의 순서가 보장된다.

그러면 이제, callback을 추가한 moveLeft, moveRight로 캐릭터를 이동시켜보자.

// 실행 코드

moveRight(function() {
    moveLeft(function() {
        moveRight(function() {
            moveLeft()
        })
    })
})

// 실행 결과 : right, left, right, left 

// 우리가 원하는 대로 동작하는 것을 확인할 수 있다.

이렇듯 callback은 비동기 작업의 순서를 보장하기 위해 사용된다.
하지만 callback 기법에는 아주 심각한 문제가 존재한다.
그것은 callback이 중첩되면 가독성이 매우 떨어진다는 것이다.

물론 지금은 그렇게 느끼지 않을 수도 있다.
그렇다면 오왼오왼오왼오왼오왼오왼 이렇게 움직이는 코드를 작성해보자.

물론 arrow function을 이용하면 더 간결해지긴 하지만 그래도 가독성이 떨어지는건 사실이다.

오늘은 여기서 마무리하도록 하고, 다음 시간에는 어떻게 callback hell을 해결하는지에 대해 설명해보겠다.