JavaScript CallBack 함수와 비동기 처리 Promise

 

JavaScript 비동기 처리

---

자바스크립트 비동기 처리

자바스크립트는 싱글 스레드 기반의 언어로, 한 번에 하나의 작업만 처리할 수 있다. 하지만 비동기 처리 방식을 통해 병렬 작업이 가능해 보이게 만들 수 있다. 주로 I/O 작업(네트워크 요청, 파일 읽기 등)이나 타이머와 같은 시간이 오래 걸리는 작업에서 사용된다. 

 

• 동기적(Synchronous) 처리 : 하나의 작업이 완료될 때까지 다음 작업을 시작하지 않는 방식. 즉 작업이 순차적으로 진행된다. 

console.log("Start");

for (let i = 0; i < 100000000; i++) {
	// 시간이 오래걸리는 작업
}

console.log("End");

위 코드는 `for`루프가 끝날 때 까지 다른 작업이 실행되지 않고 기다린다. 즉, "End"가 출력되기 전까지 모든 작업이 멈춘 상태로 대기하게 된다. CPU를 독점하기 때문에, 긴 작업이 있으면 페이지나 애플리케이션이 멈춘 것 처럼 느껴질 수 있다.

 

• 비동기적(Asynchronous) 처리: 작업을 시작한 후 해당 작업이 끝날 때까지 기다리지 않고, 다음 작업을 먼저 처리하는 방식이다. 작업이 완료되면 CallBack 함수나 Promise 등을 사용해 결과를 처리한다.

console.log("Start");

setTimeout(() => {
	console.log("This runs after 2 seconds");
}, 2000);

console.log("End");

위 코드에서 `setTimeout` 함수는 2초 후에 실행되지만, "End"는 바로 출력된다.

즉, 비동기 작업인 `setTimeout`이 처리되는 동안 다른 작업들이 계속해서 실행된다.

 

---

Callback: 함수 파라미터 + 실행권 이양

Callback ≠ Asynchronous

• 함수를 파라미터로 넘기는 것
• 파라미터 받은 함수에게 실행권을 넘기는 것

Callback은 함수가 파라미터로 전달되고, 그 실행권이 해당 함수로 이양되는 구조이다. 비동기 작업이 끝난 후 실행되는 함수로 많이 사용된다. 

function callback(param1, param2) {
	console.log(param1 + " and " + param2);
}

function caller(callback) {
	setTimeout(() => {
    	callback(arguments[1], arguments[2]);
    }, 2000);
}

caller(callback, "Hello, "GoodBye");

function summation(param1, param2) {
  console.log(`${param1} + ${param2}`)
}

// summation('Hello', 'World')

function summation_caller(callback/* callee */, param1, param2) {
  // callback(param1, param2)
  setTimeout(
    /* 무엇을 호출할래요? */ () => callback(param1, param2),
    /* 몇초뒤 호출할래요? */ 1000
  );
}

summation_caller(summation, 'Hello', 'World')

• Callback 자체로는 비동기 함수와 직접적인 관계는 없으나 비동기 로직이 끝나면 그 비동기 로직의 결과값을 통해 Callback을 실행한다.→ 비동기 함수에게 실행권을 넘기기 위해 Callback을 많이 사용할 뿐이다.
• 함수가 끝난 후 실행할 함수를 인수로 전달하여 처리한다. 하지만 콜백 함수는 중첩될수록 코드가 복잡해지며 콜백 지옥(Callback Hell)을 야기할 수있다.

Callback Hell(콜백 지옥)

비동기 작업을 수행할 때, 그 결과를 기반으로 여러 단계의 Callback을 처리해야 할 때 Callback Hell이 발생한다.

 

Callbacl Hell 예시 코드

const egg = '🥚';
eggToChick(
  /* 1단계 달걀 */egg, 
  /* 2단계 함수 */(chick) => 
    chickToHen(
    /* 2단계 삐약 */  chick, 
    /* 3단계 함수*/(hen) => 
      henToEgg(
       /* 3단계 꼬꼬 */ hen,
       /* 4단계 함수 */ (egg) => eggToFried(egg)
      )
    )
)



function eggToChick(egg, handleChick) {
	  const chick = "🐥"
	  console.log("egg to chick : ", egg, "", chick)
	  handleChick(chick)
}

function chickToHen(chick, handleHen) {
	  const hen = "🐓"
	  console.log("chick to hen : ", chick, " → ", hen)
	  handleHen(hen)
}

function henToEgg(hen, handleEgg) {
	  const egg = "🥚"
	  console.log("hen to egg : ", hen, " → ", egg)
	  handleEgg(egg)
}

function eggToFried(egg) {
	  const fried = "🍳"
	  console.log("egg to fried : ", egg, " → ", fried)
}

 

실행결과 

egg to chick :  🥚  🐥
chick to hen :  🐥  →  🐓
hen to egg :  🐓  →  🥚
egg to fried :  🥚  →  🍳

 

콜백이 중첩되어 코드가 복잡해지는 형상이다. 이런 중첩된 코드는 읽기 어렵고 유지보수가 힘들기 때문에 추후에 나오는 Promise를 도입하게 된다.

 

---

Promise

Callback + Asynchronous = Promise

 

Promise는 비동기 작업을 다루기 위한 객체이다. 콜백 헬 문제를 해결하고, 비동기 작업의 결과를 더 구조화 된 방식으로 처리할 수 있게 해준다. 기본적으로 Promise는 비동기 작업이 완료되었을 때, 성공하거나 실패한 결과를 처리할 수 있는 두가지 상태로 구분된다.

• Asynchronous 비동기 함수 (Executor) : Caller = Producer (파라미터 주입)
• Callback 비동기 처리 후 수행할 함수 (Executee): Callee = Consumer(파라미터를 받아 수행)
  • Executor에게 자신의 제어권을 넘긴다

- Promise를 Producer-Consumer Pattern on Asynchronouse라고 표현하기도 한다.

function caller(callee) {
	var produced = producing();
    callee(produced)
}

caller(function callee(produced) {
	consuming(produced);
});

Promise의 상태와 그에 따른 콜백

1. Pending (대기): 비동기 작업이 아직 완료되지 않은 상태.
2. Fulfilled (성공): 비동기 작업이 성공적으로 완료된 상태. resolve() 호출.
3. Rejected (실패): 비동기 작업이 실패한 상태. reject() 호출

Promise 코드 예시:

• Callback 형태(Pseudo 코드)
  • Resolve 성공 시 실행할 콜백
  • Reject 실패 시 실행할 콜백

예시 코드(1)

function producing() {
  return { success: true, value: '성공했습니다 :)' }; // 성공 여부에 따라 수정 가능
}

function producer(resolve, reject) {
  var produced = producing();
  
  if (produced.success) {
    resolve(produced.value);
  } else {
    reject(produced.value);
  }
}

producer(
  /* 성공 콜백 */
  function resolve(fulfilled) {
    console.log('성공👍 ' + fulfilled);
  },
  /* 실패 콜백 */
  function reject(rejected) {
    console.log('실패😖 ' + rejected);
  }
);

 

예시 코드(2)

function caller(resolve, reject) {
  const produced = producing() // API 호출해줘, 이미지 가져와줘
  if (succeeded) resolve(produced)
  if (failed) reject(produced)
}

caller(
  function resolve(produced) { consuming(produced) },
  function reject(produced) { consuming(produced) },
)

• Promise로 변환 (Pseudo 코드, 기본 함수 리터럴)

예시 코드(1) // 실무에서 사용하는 형태(실제 코드, 화살표 함수)

function fetchUserInformation(id) {
  if ( id === 1 ) {
    return { status: 200, user: { name: 'CheonSang', age: 10 } }
  } else {
    return { status: 500, user: undefined }
  }
}

const id = 2
new Promise(
  function producer(resolve, reject) {
    const result = fetchUserInformation(id)
      if (result.status === 200) { resolve(result.user) }
      if (result.status === 500) { reject() }
  }
)

   .then((user) => console.log('성공 :) - ' + JSON.stringify(user)))
   .catch((  ) => console.log('실패 :( - 유저가 ... 없답니다!'))
   .finally((  ) => console.log(' -  끝 - '))

 

예시 코드(2)

new Promise(function caller(resolve, reject) {
	const produced = producing();
	if (succeeded) resolve(produced);
	if (failed) reject(produced);
})
	.then(function resolve(produced) { consuming(produced) })
	.catch(function reject(produced) { consuming(produced) });

 

---

Promise의 상태 관리

• Pending 상태: 비동기 작업이 진행 중이며, 성공 또는 실패 상태로 전환되지 않은 상태.
• Fulfilled 상태: 작업이 성공하면 `.then()` 메서드로 결과값을 처리
• Rejected 상태: 작업이 실패하면 `.catch()` 메서드로 오류 처리

`.then()`으로 성공 콜백 처리

new Promise((resolve, reject) => {
  const produced = producing();
  resolve(produced);
})
  .then(produced => {
    console.log(produced);
  });

 

`.catch()`로 실패 콜백 처리

new Promise((resolve, reject) => {
  const produced = producing();
  reject(produced);
})
  .catch(error => {
    console.log(error);
  });

 

`.finally()`로 완료 처리(성공 /실패 상관 없이)

new Promise((resolve, reject) => {
  const produced = '데이터 처리 중 오류 발생!';
  reject(produced);
})
  .catch(error => {
    console.log('실패:', error);
  })
  .finally(() => {
    console.log('작업 완료! (성공 여부와 관계없이 실행)');
  });

---

Promise Hell (중첩된 Promise 문제)

Promise를 중첩해서 사용하다 보면 코드가 복잡해지고 유지보수가 어려워진다. Callback Hell과 동일하다.

step1(value1)
  .then((value2) => {
    step2(value2)
      .then((value3) => {
        step3(value3)
          .then((value4) => {
            console.log(value4);
          });
      });
  });

 

Promise Chain: Promise Hell 해결 방법1.

Promise Chain은 하나의 비동기 작업이 완료된 후 그 결과를 바탕으로 또 다른 비동기 작업을 수행할 때 유용한 패턴이다.

이 패턴을 통해 개발자는 여러 비동기 작업을 순차적으로 처리할 수 있으며, 필요한 정보만 뽑아서 체계적으로 사용 할 수 있다.

 

예시 코드(1)

step1(value1)
  .then((value2) => {
    return step2(value2);
  })
  .then((value3) => {
    return step3(value3);
  })
  .then((value4) => {
    console.log(value4);
  });

 

예시 코드(2)

const fetchUser = (id) => new Promise((resolve, reject) => {
  if (id === 1) {
    resolve({ status: 200, user: { name: 'Aaron', age: 10 } })
  } else {
    reject({ status: 500, user: undefined })
  }
})

const id = 1
const fetched_promise = fetchUser(id);
const redefined_promise = fetched_promise.then((result) => {
  return { username: result.user.name, userage: result.user.age };
})
const parsed_promise = redefined_promise.then((redefined_user) => {
  return { username: redefined_user.username };
})

fetchUser(id)
  .then((user) => ({ username: user.name, userage: user.age }))
  .then((redefined_user) => ({ username: redefined_user.username }))


fetchUser(id)
  .then((user) => { console.log({ name: user.name }) })

fetchUser(id)
  .then((user) => { console.log({ age: user.age }) })

fetchUser(id)
  .then((user) => { console.log(true) })

 

위 예시 코드에서 아래와 같이 필요한 정보만 뽑아서 사용 할 수 있다.

fetchUser(id)
  .then((user) => { console.log({ name: user.name }) })

fetchUser(id)
  .then((user) => { console.log({ age: user.age }) })

fetchUser(id)
  .then((user) => { console.log(true) })

---

ℹ️참고

[ASAC 6기 강의자료]

https://velog.io/@jwo0o0/Javascript-%EB%8F%99%EA%B8%B0%EC%99%80-%EB%B9%84%EB%8F%99%EA%B8%B0

[Javascript] 자바스크립트가 비동기를 처리하는 방법 - callback function, Promise, async/await

https://ko.javascript.info/callbacks

콜백

https://medium.com/sjk5766/promise-hell%EA%B3%BC-promise-chain-73a3349d7f01

Promise hell과 Promise chain

https://ko.javascript.info/promise-chaining

프라미스 체이닝

https://medium.com/cstech/asynchronous-programming-in-javascript-with-async-await-24b599a394cb

Asynchronous Programming in JavaScript with Async & Await