How JavaScript works: Event loop and the rise of Async programming + 5 ways to better coding with…
브라우저에서 실행되는 복잡한 이미지 변환 알고리즘을 상상해보자.
호출 스택에 실행할 기능이 있는 동안 브라우저는 다른 작업을 수행할 수 없다. 차단되고 있다. 즉, 브라우저가 렌더링 할 수 없고 다른 코드를 실행할 수 없으며 그냥 멈춰 있다. 앱 UI가 더 이상 효율적이고 만족스럽지 않다.
앱이 멈췄다.
어떤 경우에는 이것이 그렇게 중요한 문제가 아닐 수 있지만 더 큰 문제가 있다. 브라우저가 호출 스택에서 너무 많은 작업을 처리하기 시작하면 오랫동안 응답하지 않을 수 있다. 그 시점에서 많은 브라우저는 페이지를 종료해야 하는지 묻는 오류를 발생시켜 조치를 취한다.
이는 UX를 망친다.
단일 .js 파일에 JavaScript 애플리케이션을 작성할 수 있지만 프로그램은 거의 확실하게 여러 블록으로 구성되어 있으며 그 중 하나만 지금 실행되고 나머지는 나중에 실행된다. 가장 일반적인 블록 단위는 함수이다.
JavaScript를 처음 접하는 대부분의 개발자가 가지고 있는 문제는 나중에 반드시 지금 바로 직후에 발생하는 것이 아니라는 점을 이해해야 한다. 즉, 지금 완료할 수 없는 작업은 정의상 비동기적으로 완료된다. 즉, 잠재의식적으로 예상했거나 희망했을 수 있는 위에서 언급한 차단 동작이 발생하지 않는다.
// ajax(..) is some arbitrary Ajax function given by a library
var response = ajax('<https://example.com/api>');
console.log(response);
// `response` won't have the response
표준 Ajax 요청이 동기식으로 완료되지 않는다는 사실을 알고 있을 것이다. 즉, 코드 실행 시 ajax(..) 함수에는 응답 변수에 할당하기 위해 반환할 값이 아직 없다.
비동기 함수가 결과를 반환하기를 “기다리는” 간단한 방법은 Callback이라는 함수를 사용하는 것이다.
ajax('<https://example.com/api>', function(response) {
console.log(response); // `response` is now available
});
참고: 실제로 동기식 Ajax 요청을 만들 수 있다. 하지만 절대 그렇게 하지 않는 것을 추천한다. 동기식 Ajax 요청을 하면 JavaScript 앱의 UI가 차단되어 사용자가 클릭, 데이터 입력, 탐색 또는 스크롤 할 수 없다. 이것은 사용자 상호 작용을 방지한다. 그것은 끔찍한 관행이 된다.
다음과 같이 절대 하지 않기를 바란다.
// This is assuming that you're using jQuery
jQuery.ajax({
url: '<https://api.example.com/endpoint>',
success: function(response) {
// This is your callback.
},
async: false // And this is a terrible idea
});