상세 컨텐츠

본문 제목

Callback 함수 (수정 중)

programming/Javascript

by Dohangang 2023. 8. 17. 02:12

본문

 

 

 

 

 

- 차례

1) Callback 함수는 무엇인가?

2) Callback 함수의 필요성(why? when?)

3) 어떻게 사용할까?

4) 문제점과 해결방안

 

 

 

 

 

 

 

 


 

 

 

 

 

 

 

 

1) Callback 함수는 무엇인가?

 

콜백함수는 다른 함수의 인자로 전달되는 함수로, 특정 이벤트나 조건이 발생했을 때 호출되는 함수입니다. 즉, 다른 함수 내에서 사용될 때 실행되는 함수를 말합니다. (나중에 호출되는 것이 목적)

 

 

 

 

 

 

 

2) Callback 함수의 필요성 (why? when?)

 

비동기 작업의 완료나 이벤트 처리와 같이 나중에 발생하는 일에 대한 응답을 처리할 때 유용하다.

 

  • 웹 페이지에서 버튼 클릭 이벤트에 응답하는 함수를 정의할 때
  • 파일 다운로드가 완료되면 실행되는 함수를 정의할 때
  • 타이머나 인터벌로 주기적 작업을 수행하는 함수를 정의할 때
  • 비동기적인 작업 (예: 파일 다운로드, 네트워크 요청)을 수행할 때
  • 이벤트 핸들링 (예: 버튼 클릭, 마우스 이동)에 대한 반응을 정의할 때

 

 

 

 

 

3) 어떻게 사용할까?

 

콜백함수를 정의하고, 다른 함수에 인자로 전달한다.

이후 해당 함수 내에서 특정 이벤트나 상황이 발생하면 콜백함수가 호출된다.

 

Node.js에서 MySQL 데이터베이스에 쿼리를 실행하고 결과를 출력하는 예

위의 코드에서 callback 함수는 connection.query() 메서드의 두 번째 인자로 전달된 함수다. 이 함수는 쿼리 실행 결과가 도착했을 때 호출됩니다.

즉, 데이터베이스 쿼리의 결과가 준비되었을 때 이 함수가 실행되며, 이 때 error, results, fields 인자들이 전달된다.

데이터베이스 쿼리 결과에 따라 이 함수 내에서 error가 발생하면 에러 처리를 하고, 그렇지 않은 경우에는 results를 출력하게 된다.


 

 

 

 

 

4) 문제점과 해결방안

 

- 문제점 (콜백지옥: Callback hell)

비동기 작업을 연속적으로 처리하다 보면 콜백 함수를 중첩해서 사용하게 되고, 이로 인해 가독성이 떨어져 코드의 관리에 어려움이 발생한다.

 

콜백지옥 예

 

 

- 해결방안 (Promise와 Async/Await)

Promise를 사용하여 비동기 작업을 체인 형태로 연결하거나, Async/Await를 활용하여 더욱 구조적이고 가독성을 향상시켜 유지보수성을 높일 수 있다.

 

Promise를 사용한 코드

 

Async/Await를 사용한 코드

 

 

 

 

 

 

 

 

 

 

 

 

 

 

'programming > Javascript' 카테고리의 다른 글

async/await 기초 이해 (javascript)  (0) 2023.09.12
Promise 기초 (Javascript)  (2) 2023.08.29
자바스크립트 동기, 비동기 (기초)  (0) 2023.08.05

관련글 더보기