콜백 패턴(callback pattern)
콜백 함수의 대표적인 사용처는 이벤트 핸들러이지만, 일반적인 자바스크립트 처리 로직 중에서도 이러한 콜백 패턴을 이용해서 해당 함수의 호출이 끝나고 난 뒤에 처리할 수 있도록 활용할 수 있습니다.
비동기 처리가 많은 자바스크립트에서 다양하게 응용할 수 있습니다. 특히 하나의 공통 라이브러리를 이용할 때 콜백 함수를 넘겨주는 것은 라이브러리의 확장성을 높입니다.
적용예시
ajax() 함수를 공통으로 사용하기 위해 콜백 패턴이 사용되었습니다. 이 함수는 XMLHttpRequest가 빈번하게 일어나기 때문에 이를 효율적으로 호출하려고 정의되었습니다. 예시와 같이 XMLHttpRequest의 순서가 보장되어야 할 때가 콜백 함수를 활용하기 가장 좋은 예입니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="userInfo"></div>
<script>
(function () {
function ajax(method, url, data, callback) {
let xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.onload = function () {
if (xhr.status === 200) {
callback.call(this, xhr.responseText);
}
}
xhr.send(data);
}
ajax("POST", "/login", "id=hello&password=word", function (responseText) {
if (responseText === "Success") {
console.log("Success to login!");
ajax("GET", "/userInfo", "id=hello", displayUserInfo);
} else {
console.log("Failed to login");
}
});
function displayUserInfo(responseText) {
document.getElementById("userInfo").innerHTML = responseText;
}
}());
</script>
</body>
</html>
특히 많이 사용되는 곳은 바로 Node.js와 같은 서버 환경입니다. 왜냐하면 Node.js와 같은 서버는 비동기 non-blocking으로 서버가 동작하며, 파일을 하나 읽을 때나 비동기 처리를 할 때 항상 콜백 패턴을 이용하기 때문입니다.
//Node.js의 파일 시스템에서 파일을 읽을 때의 콜백 함수 처리 부분
fs.readFile("/sample.txt", function(err, data) {
console.log(data);
});4단계 이상의 콜백 함수가 겹치면 소스를 읽는 것 자체가 불가능할 정도로 복잡해지므로 적당하게 함수명을 따로 분리해서 소스를 정리하느 것이 콜백 패턴의 가장 주의할 점입니다.
#
참고 도서 : 속깊은 자바스크립트
이전글 :
2021/02/10 - [Study Note/Javascript] - javascript #디자인패턴 - 폼 검증을 위한 데커레이터 패턴(decorator pattern)
javascript #디자인패턴 - 폼 검증을 위한 데커레이터 패턴(decorator pattern)
데커레이터 패턴 프락시 패턴은 호출되는 객체가 아닌 별도의 중간자 역할을 수행하는 프락시 객체가 추가 기능을 수행하는 패턴이라고 한다면, 데커레이터(decorator) 패턴은 호출 대상이 되는
simuing.tistory.com
2021/02/10 - [Study Note/Javascript] - javascript #디자인패턴 - 객체 기반 데커레이터 패턴(decorator pattern)
javascript #디자인패턴 - 객체 기반 데커레이터 패턴(decorator pattern)
하나의 객체에 여러 가지 기능들을 추가함으로써 기존의 객체에 추가로 꾸며진 객체를 만들어낼 수 있습니다. 데커레이터 패턴을 이용해 각기 다른 부품으로 이루어진 컴퓨터의 가격을 알아봅
simuing.tistory.com
2021/02/10 - [Study Note/Javascript] - javascript #디자인패턴 - 함수 기반 데커레이터 패턴(decorator pattern)
javascript #디자인패턴 - 함수 기반 데커레이터 패턴(decorator pattern)
프락시 패턴에서 살펴봤던 래퍼 기능을 데커레이터 패턴과 함께 사용하면, 해당 함수가 호출되기 전에 여러 가지 함수가 호출될 수 있도록 응용할 수 있습니다. 이렇게 응용할 수 있는 상황은
simuing.tistory.com
2021/02/10 - [Study Note/Javascript] - javascript #디자인패턴 - Init-time branching 패턴
javascript #디자인패턴 - Init-time branching 패턴
Init-time branching 패턴 Init-time branching 패턴은 이름 그대로 초기화 단계에서 분기하여 같은 함수를 환경에 따라 다르게 정의하는 것을 의미합니다. 보통 웹페이지가 처음 열릴 때 실행된다고 해서 I
simuing.tistory.com
2021/02/12 - [Study Note/Javascript] - javascript #디자인패턴 - Self-defining function 패턴
javascript #디자인패턴 - Self-defining function 패턴
Self-defining function 패턴 앞서 살펴본 Init-time branching 패턴은 처음 웹페이지 초기화 단계에서 컴퓨팅 자원을 소모하여 향후 어떠한 방법으로 함수가 호출될 지 결정하는 것이었다면, Self-defining funct
simuing.tistory.com
2021/02/13 - [Study Note/Javascript] - javascript #디자인패턴 - 메모이제이션 패턴 (memoization pattern)
javascript #디자인패턴 - 메모이제이션 패턴 (memoization pattern)
메모이제이션(memoization) 패턴 패턴의 이름대로 '메모'를 하는 것이 특징입니다. 메모를 하는 대상은 바로 함수 또는 객체입니다. 이 패턴의 활용 용도는 일반적인 프로그래밍 언어에서 캐시를 사
simuing.tistory.com
2021/02/13 - [Study Note/Javascript] - javascript #디자인패턴 - Self-invoking constructor 패턴
javascript #디자인패턴 - Self-invoking constructor 패턴
Self-invoking constructor 패턴 자바스크립트에서는 new 키워드를 생략하더라도 생성자 함수를 일반 함수인 것처럼 호출하고 실행하므로 오류는 발생하지 않고 오동작만 하게 됩니다. 이러한 경우는
simuing.tistory.com
'Study Note > Javascript' 카테고리의 다른 글
| javascript #DOM reflow 시 자원 소모 최소화 방법 (0) | 2021.02.14 |
|---|---|
| javascript #디자인 패턴 - 커링 패턴(currying pattern) (0) | 2021.02.13 |
| javascript #디자인패턴 - Self-invoking constructor 패턴 (0) | 2021.02.13 |
| javascript #디자인패턴 - 메모이제이션 패턴 (memoization pattern) (0) | 2021.02.13 |
| javascript #디자인패턴 - Self-defining function 패턴 (0) | 2021.02.12 |
댓글