9891be28b09a8a21f766b0f4bfaa52a8.jpg

콜백함수에 대해 알아보던 중.. 별안간 동기/ 비동기를 많이 접하게되는 데-
대체 동기/비동기 그리고 콜백함수는...?!

동기 & 비동기의 비유방식으로는 커피숍의 진동벨로 들 수 있다.
커피숍에가서 음료 주문을 하고 진동벨을 받아와서 자리에 앉아 업무를 본다.
그 사이 진동벨이 울리면 주문한 음료를 가져온다
=> 비동기 ; 각자의 일을 처리하고 서로에게 영향을 주지 않음
근데, 진동벨이 없이 음료를 시키고 음료가 나올 때까지 기다려야 하는 상황이라면 자리에 앉아서 업무를 볼 수가 없는 데..!
=> 동기 ; 앞의 일이 끝나야 다음일을 처리할 수 있음.

image.png

동기(synchronous)

요청과 그 결과가 동시에 일어남. 하지만 요청 처리 속도에 따라 응답을 바로 받을 수도 있고 기다려야 할 수도 있음. 프로그램은 응답이 완료될 때까지 프로그램이 정지(말 그대로 어플리케이션이 잠시 멈춤), 응답을 받고 나서야 진행됨.

비동기(asynchronous)

요청한 결과에 대한 응답을 바로 받지 않아도 됨 (물론 바로 받아도됨)

  • 비동기프로그래밍을 하는 이유
    가장 큰이유는 속도
    동기 프로그래밍은 기능을 요청을 한 후, 요청이 끝날 때까지 무작정 대기를 해야 하지만 비동기 프로그래밍은 기능을 요청을 한후, 다른 작업을 하고 있다가 끝났다는 이벤트를 받고 난 후 이후의 처리를 하면 되기 때문에 비동기 프로그래밍이 동기프로그래밍 보다 빠름. (특히 DB 호출이 잦은 경우)

callback function (콜백함수)

자바스크립트의 비동기성을 표현하는 가장 일반적인 기법.
호출된 함수를 알려줘서 다른 프로그램이나 다른 모듈에서 함수를 호출하게 하는 방법.
필요할 때 호출해서 쓰는 함수가 아니라 어떤 이벤트가 발생하면 사용자에게 알려주는 역할을 하고 특정 함수의 인자로 넘겨서 코드 내부에서 호출되는 함수.
계속적으로 요청하는 것과 무슨일이 벌어졌을 때 요청되는 것의 차이

<ex1>

test라는 함수는 인자로 함수로 받음. 5행에 새로운 함수를 전달 하면 1줄의 test함수 매개변수 e에 저장이 되고 2행에서 e()호출. 그 결과로는 console.log 안의 '콜백'으로 나오게 됨

스크린샷 2019-11-09 오전 1.45.42.png

<ex2>

loading이라는 변수에 함수 저장. 이 함수는 path, finish이라는 매개변수를 받고 6행에서 loading 함수를 호출. path의 인자로 '/folder/text'를, finish 인자로는 함수를 전달.

스크린샷 2019-11-09 오후 3.13.43.png

어떤 작업을 진행시켜두고 (loading 함수 호출 & 데이터와 콜백함수 전달)
loading 함수 내에서 작업을 처리. (path 출력, path + '엑셀파일' 연산)
완료 되었을 때 전달받은 콜백함수(finish) 호출
콜백함수에서는 결과를 받고 작업 이후의 기능을 처리.