[JavaScript] 동기/비동기 (콜백)

동기(Synchronous) 비동기(Asynchronous) 첫 번째 해결 방법, 콜백이다. 여기까진 잘 이해가 됐지만... 이 다음이 문제다.

 

쭉 따라가다 보면 알 수 있지만, 콜백을 반복하다보면 함수 안에 함수가 들어가는 꼴이 반복되면서 콜백지옥 (Callback hell)이 만들어지는 것을 볼 수 있다. 물론 저 정도로 지옥은 아니겠지만 더 길어지면 정말 지옥이 될지도 모른다. 그래서 나온 방법이 Promise. 다음 포스팅에서 볼 수 있을 것이다. 물론 올리기 전에 내가 먼저 이해를 해야겠지만...

 

//  동기(Synchronous), 비동기(Asynchronous)
// 동기: 순차적으로 코드 실행O
// 비동기: 순차적으로 코드 실행X

console.log(1); // 1
console.log(2); // 2
console.log(3); // 3
// 순차적으로 실행

console.log(1);
setTimeout(()=>console.log(2), 1000);
console.log(3);
// 1, 3, 2 순으로 출력 => 비동기

// 콜백(callback) 패턴

const a = () => console.log(1);
const b = () => console.log(2);

a(); // 1
b(); // 2

const c = () => {
  setTimeout(()=>{console.log('응애?');}, 1000)
};
c(); // 응애? -> 2와 1이 출력된 후 1초 뒤에 출력됨(비동기)
b(); // 2
a(); // 1

const d = (callback) => {
  setTimeout(()=>{
    console.log('응애?');
    callback();
  }, 1000)
};
d(()=>{ // 매개변수가 함수
  b()
}); // 응애 출력 후 2 출력

// 같은 방식이 반복되면 콜백지옥 등장! b()안에 새로운 함수가 생기고 새로운 함수 안에 또 새로운 함수가 생기고...

// ex
// a(()=>{
//   b(()=>{
//     c()=>{
//       d();
//     }
//   })
// })