[javascript] 비동기 처리를 알아보자 ① (callback 함수)

동기/비동기 대충 야매로 개념만 알고 있었다

 

정확한 사용 이유와 처리 방법은 잘 몰른다

 

제대로 알아보자

 

 

---

 

javascript는 싱글스레드라 두 가지 작업을 동시에 실행 할 수 없다

 

동기처리와 비동기 처리가 있는데

 

 

Synchronous : 동기

 

ASynchronous : 비동기

 

 

동기처리는 작업 요청과 동시에 일을 처리한다 이와 달리 비동기처리는 작업은 요청하지만 그 자리에서

바로 안 해주도 된다

 

 

예를 들어 커피집에 손님들이 줄을 서고 앞사람이 커피를 받고나서 다음 사람 받을수 있는게 동기처리이고  주문은 차례차례 받고 커피는 만들어지는데로 받을 수 있는건 비동기 처리다

 

 

다음과 같은 코드가 있다

console.log(1);    // 숫자 1찍기

setTimeout(()=>{   // 0초 뒤 숫자 2찍기
  console.log(2)
},0)

console.log(3);    // 숫자 3찍기

 

 

setTimeout은 시간을 정해 주고 실행시키는 "비동기적" 메소드 이다

 

따라서 설정값을 '0'으로 해줘도 '비동기적'메소드 이기때문에

동기적 함수인 console.log() 끝난 후 실행된다

 

결과:

1
3
2

 

①  콘솔 1찍음

②  비동기적 메소드, 비동기처리하는 다른 프로그램에 넘겨줌

③  콘솔 3찍기

④  비동기적 API제외한 모든 프로그램 실행된 이후 콘솔 2찍음

 

 

 

 

 

 

비동기 처리는 서버와 데이터를 주고 받을 때 자주 이용된다

 

if 서버로부터 데이터를 다 받고나서 처리를 해준다면? 

-> 데이터를 다 받아오고 난 후 작업을 다 끝내야 다음 코드가 실행 되므로

     언제 끝날지도 모르는데 다음 코드 실행 못시키고 기다린다 기분이 별로 좋지않다

=> 비동기처리

---

 

비동기처리방법: callback

 

다음과 같은 예문이 있다

const testcallback = function(callback) {            //testcallback 함수, 파라미터가 함수임
  console.log("testcallback 안";                     //testcallback 내부 메소드
  callback();                                        //파라미터 실행
};

testcallback(function() {console.log("이게 콜백")}); //testcallback 함수 실행, 함수인자 넘겨줌

 

 

메소드들 간에 순서를 주기 위해

 

testcallback 함수를 정의하고 실행 할 때 그안에 원하는 기능을 넣어서 보내준다

 

그러면 순서적으로 testcallback 내부의 메소드가 실행되고 넘겨 받은 파라미터(함수)가 실행 될수있다

 

 

결과:

testcallback안
이게콜백

 

 

 

다른 예문:

function getData(){                                  //getData정의
  var tableData;               
  $.get('http://domain.com',function(response){      //주소로부터 데이터를 받는다, = response
    tableData = response;                            //tableData에 초기화
  });
  return tableData;                                  //tableData 반환
}

console.log(getData());

위와 같으면 어떤일이 생길까? $.get 함수는 비동기 메소드이다

 

데이터를 다 받아오기전에

 

tableData = response;  가 실행 되어 결과 값은 undefined가 될 것이다

 

=> 데이터가 다 받아진 후 다음으로 넘어갈 수 있도록 순서를 줘야 한다

 

 

 

callback함수를 써서 다음과 같이 만들었다

function getData( callback ) {                  //파라미터 (함수)
  let tableData;
  $.get('http://domain',function(response){     // 데이터 받아옴
    callback(response);                         // 받아온 파라미터(함수) 실행
  }
}

getData( function(res) { console.log(res) } );  // 함수를 인자로 줌

 

 

 

요런식으로 순서를 주자

 

 

 

---

비동기 처리는 코드의 실행을 멈추지 않고 실행 할 수 있으며

비동기 처리는 어떤 동작에 필요한 준비가 된 상태에서만 동작 수행 할 수 있게 한다

 

 

 

 

 

비동기 처리하는 방법이 몇가지 더 있다

 

 

다음편에서 더 알아보자

 

 

 

 

 

 

 

 

 

 

 

참고: pro-self-studier.tistory.com/89