[JavsScript] 비동기처리 - Callback Function

JavaScript는 비동기적 언어다.

비동기(Asynchronous)란 

하나의 작업이 끝나지 않아도 다음 작업을 실행하는 방식을 의미한다.

 

동기(Synchronous)란?

하나의 작업이 끝나야 다음 작업을 실행하는 방식을 의미한다.

 

예를 들어 카페에 가서 커피를 구매한다고 생각하자.

 

동기적 처리의 예시

카페에 가서 커피를 주문할려고 한다. 

카페에 도착한 나는 점원에게 아이스 아메리카노를 주문하였고, 점원은 주문을 받은 후 커피를 만드는 중에 다른 손님이 왔지만, 커피를 만들고 나에게 건네주기 전까지는 다른 손님의 주문도 받지 않고 그 사람이 원하는 커피를 제작하지 않았다.

 

이처럼 동기적 처리에서는 하나의 작업이 끝나기 전까지는 다른 작업을 실행하지 않는 것이 특징이다.

 

비동기적 처리의 예시

카페에 가서 커피를 주문할려고 한다.

카페에 도착한 나는 점원에게 아이스 아메리카노를 주문하였고, 진동벨을 받았고 다른 점원이 커피를 만들기 시작하였다.

그리고 주문을 받은 점원은 바로 다른 손님의 손님을 주문 받았으며, 다른 손님의 메뉴도 바로 만들기 시작하였고, 나는 완성된 커피를 받았다.

 

이처럼 비동기적 처리는 하나의 작업을 진행 중이여도, 응답 상태(커피를 나에게 주지 않음)와 관련 없이 바로 다른 요청을 받아 작업을 동시적으로 진행하는 것이 특징이다.

 

비동기적 처리는 좀 더 빠르게 진행한다는 점에서 장점이 있지만, 기다려주지 않는 것이 문제가 될 수도 있다.

비동기적 처리를 하면, 내가 먼저 주문했지만, 뒤에 온 사람의 커피가 먼저 나올 수도 있고 그에 따른 오류가 발생할 수 있다.

 

 

JavaScript의 동기적 처리

console.log("1st")
console.log("2nd")
console.log("3rd")

/*
* 결과
* 1st
* 2nd
* 3rd
*/

위와 같은 코드를 보면 하나 하나 순서대로 실행되는 것을 확인할 수 있다.

 

JavsScript의 비동기적 처리

console.log("1st")

//setTimeout 메서드를 이용한 1번째 매개 변수(함수)를 2번째 매개 변수(지연 시간) 후에 실행 시킨다.
setTimeout( () => {
  console.log("2nd")
}, 0)

console.log("3rd")

/*
* 결과
* 1st
* 3rd
* 2nd
*/

위와 같은 결과가 나온 이유는 위에서 설명한 것과 같이 주문을 받고 응답을 해주지 않아도 다른 요청을 받기에  2nd를 출력하기 전에 3rd를 먼저 출력해버린 것이다.

 

이것이 문제가 되는 예시를 작성해보겠다.

//학생의 이름과 나이를 받아 출력하는 예제

// 학생의 이름과 나이를 받아 객체로 반환 하는 함수
function getStudent (name, age) {
  let student
  //받은 name, age를 student 객체에 저장을 0.1초 후에 실행
  setTimeout( () => {
    console.log("Wait 0.1 sec")
    student = {
    name : name,
    age : age
    }
  }, 100)
  
  // student 객체 반환
  return student
}

const student = getStudent("김인후", 22) //A
console.log(`학생의 이름은 ${student.name}이고, 나이는 ${student.age}살이다.` //B

/*
* 결과
* 학생의 이름은 undefined이고, 나이는 undefined이다.
* Wait 0.1 sec
*/

위와 같이 학생의 이름과 나이의 값을 찾지 못 하고 출력하는 이유는 비동기적인 처리로, A 요청(getStudent)의 요청을 받고 응답을 받기 전에 다른 요청인 B 요청(console.log())를 실행 시켰기 때문이다.

 

CallBack Function을 이용한 비동기처리

위와 같은 문제가 나타나기에, CallBack Function을 이용하여 아래와 같이 문제를 해결할 수 있다.

//학생의 이름과 나이를 받아 출력하는 예제

// 학생의 이름과 나이, 함수를 받아 실행식을 실행 시키는 함수
function getStudent (name, age, func) {

  //받은 name, age를 student 객체에 저장을 0.1초 후에 실행
  setTimeout( () => {
    console.log("Wait 0.1 sec")
    student = {
    name : name,
    age : age
    }
    func(student)
  }, 100)
  
}

getStudent("김인후", 22, (student) => {
  console.log(`학생의 이름은 ${student.name}이고, 나이는 ${student.age}살 이다.`)
})



/*
* 결과
* 학생의 이름은 김인후이고, 나이는 22살이다..
* Wait 0.1 sec
*/

 

JavaScript의 프로젝트가 점점 커지고 복잡해지면서 CallBack Function만으로는 해결이 힘들어져서 Promise나 async/await를 이용하는 방법을 사용한다.