CallBack 함수 (feat. 동기 & 비동기)

<당연히 알지만 다시 알고가자>
클라이언트(Client): 서버로 접속하는 컴퓨터, 보통 우리의 컴퓨터라고 해도 무방하다.
서버(Server): 서버는 무언가(서비스, 리소스 따위)를 제공하는 컴퓨터

1. 동기(synchronous): 클라이언트에서 서버에 자료를 요청하고 서버에서 자료를 줄 때까지 기다린다.
2. 비동기(asynchronous): 클라이언트에서 서버에 자료를 요청하고 서버에서 자료를 추출하는 동안 클라이언트는 기다리지 않고 할 일을 계속해서 한다.

동기와 비동기를 나타내는 그림(위의 사진첨부), 동기와 비동기에 대해서는 아래의 글에서 쉽게 설명해본다.

동기(synchronous)

1. 요청과 결과가 동시에 일어난다. (요청 처리속도에 따라 응답이 느릴수도 빠를수도 있음)
2. 프로그램은 응답이 완료 될 때까지 정지, 응답을 받고 나서야 진행
   (ex: 스타벅스에서 앞 사람이 커피를 주문하고 커피가 나올 때까지 다음 사람은 주문도 못함)

비동기(asynchronous)

1. 요청한 결과에 대한 응답을 바로 받지 않아도 됨 (물론 바로 받아도됨)
2. 비동기프로그래밍을 하는 이유

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

callback function (콜백함수)

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

1 function test(callback){
2 	 callback();
3 }
4
5 test(function(){
6 	 console.log("콜백");
7 })
8 // "콜백"
9

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

1 function loading(path, finish){
2	 console.log("파일경로", path);
3	 finish(path + "엑셀파일");
4 }
5
6 loading("/folder/test", function(result){
7 	 console.log("완료", result);
8 })
9 
10 // 2번 줄: "파일경로" "/folder/test"
11 // 7번 줄: "완료" "/folder/test/엑셀파일"
12 

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