javascript - 비동기 이해하기

김예찬·2021년 5월 3일
0

자바스크립트로 비동기를 처리하는 방법을 정리합니다😁.


자바스크립트가 구동되는 환경은 하나의 쓰레드로 돌아가는 싱글 쓰레드 환경입니다. 이는 컴퓨터가 여러가지 일을 한번에 처리하지 못하고, 동기적으로 처리해야 한다는 말입니다. 이러한 개념 때문에 이벤트 루프라는 개념 또한 자바스크립트에 존재하는합니다. 하지만, 이처럼 하나의 일을 처리할 때 까지 뒤의 일들은 대기하게 된다면, 시간을 오래걸리는 일이나, 오류가 생기면 컴퓨터의 사용이 불가해 질 것입니다. 이를 해결하기 위해, 자바스크립트는 비동기라는 개념을 사용하는데 이를 이번 포스트를 통해 정리해 보겠습니다!


이 포스트는 캡틴 판교님의 블로그를 토대로 하고 있습니다😏

비동기

특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미

비동기 처리의 사례

  1. axios, ajax 등 서버와의 통신
function getData() {
	var tableData;
	$.get('https://domain.com/products/1', function(response) {
		tableData = response;
	});
	return tableData;
}

console.log(getData()); // undefined

제이쿼리의 ajax를 통해 서버와 통신하는 부분. 하지만 getData()를 호출한 부분을 보면 undefined을 반환하는데 이는 자바스크립트의 비동기 특성상 서버가 응답하기 전 이미 return을 하기 때문.

  1. setTimeout

setTimeout은 Web API의 한 종류. 일정 시간 있다 지정한 코드를 실행 해줌.

// #1
console.log('Hello');
// #2
setTimeout(function() {
	console.log('Bye');
}, 3000);
// #3
console.log('Hello Again');

비동기 처리에 대해 이해가 없다면
'Hello' -> 'Bye' -> 'Hello Again' 순으로 출력될 것으로 예상하지만, 실제 결과 값은 'Hello' -> 'Hello Again' -> 'Bye' 순으로 이루어집니다.


콜백 함수로 비동기 처리 문제점 해결

위에 나타나는 문제들을 해결하기 위해, 콜백 함수를 사용. 콜백 함수란 특정한 일이 트리거되면 실행되는 함수로, 어떤 함수를 만들 때, 함수 로직안에 시간이 걸리는 일이 발생한다면, 그 일이 발생될 때 실행되는 콜백 함수를 파라미터로 받아줍니다..

function getData(callbackFunc) {
	$.get('https://domain.com/products/1', function(response) {
		callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
	});
}

getData(function(tableData) {
	console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});

ajax의 get 요청의 경우 2번째 파라미터로 넣은 함수가 서버와의 통신을 완료 후 실행 됨으로, 비동기로 발생되는 문제를 해결할 수 있습니다..


콜백 지옥

위처럼 콜백함수는 비동기의 문제를 타계하는 좋은 해결책이 되지만, 과도하게 사용하게 될 경우, 가독성이 떨어지고 코드가 우측으로 길어지는 문제점이 발생하게 되는데, 이를 콜백지옥이라고 부릅니다.

$.get('url', function(response) {
	parseValue(response, function(id) {
		auth(id, function(result) {
			display(result, function(text) {
				console.log(text);
			});
		});
	});
});

코드를 작성하다보면 데이터를 받아와 화면에 표시하기 까지 처리해야 될 일이 많은 경우들이 빈번히 일어나는데, 이런 모든 과정을 비동기로 처리하게 된다면 위와 같은 코드가 작성되게됩니다...ㅠㅠ


콜백 지옥을 벗어나자

이러한 콜백 지옥을 벗어나기 위해서 PromisAsync라는 새로운 자바스크립트의 문법이 나왔습니다. 이는 추후 다시 블로깅할 예정입니다.
(금방 정리하도록 하겠습니다!🙄)

profile
프론트엔드

0개의 댓글