들어가며
요새 React가 핫하다고 한다. 그래서 대세에 맞춰서 React에 관한 공부를 간단히 시작해보려고 한다. React는 자바스크립트의 라이브러리 중 하나이므로, React에 대한 포스팅을 본격 시작하기 전에 공부에 필요한 Java Script의 개념들을 살짝 정리하고 가고자 한다.
동기와 비동기 처리
우선, 위키피디아에 나와있는 동기와 비동기에 대한 정의는 다음과 같다.
동기(Synchronization): the coordination of events to operate a system in unison.
비동기(Asynchronization): refers to the occurrence of events independent of the main program flow and ways
to deal with such events.
(출처: 위키피디아)
즉, 동기 처리는 요청과 그에 대한 결과을 하나의 작업처리 단위로 맞추겠다는 뜻이다. 따라서 어떤 요청이 들어왔을 때 이에 대한 결과가 나올 때까지 프로그램이 다른 일을 하지않고 대기하고 있다. 비동기 처리는 이와 반대로 요청과 그에 대한 결과를 하나의 작업처리 단위로 보지않으므로, 요청을 보내고 결과가 나올 때까지 기다리지않고 바로 다른 작업을 수행한다.
유튜브 페이지를 띄울 때 동기와 비동기 처리로 하면 각각 다음과 같다.
동기식 처리) 유튜브 페이지를 띄우기 위한 모든 작업이 완료되고 나서야 결과를 확인할 수 있다. 따라서 작업이 완료되기 전까지는 왼쪽 처럼 빈 화면을 띄우게 되며 작업을 완료하기 전까지 기다려야 하며 사용자는 다른 요청을 보낼 수 없다.
비동기식 처리) 비동기식으로 작업을 수행하게 되면 처리가 먼저 끝난 작업부터 그 결과를 보여준다. 따라서 동영상과 같은 무거운 데이터는 아직 처리가 안된 상태이지만 일부 작업이 완료된 부분들은 화면에 띄워져 있는 것을 확인할 수 있다.
웹을 동기식으로 처리하게 되면 사용자는 굉장히 답답함을 느낄 것이다. 따라서 자바스크립트는 비동기식으로 처리하는 특성을 지닌다. 다음으로 비동기식으로 처리하는 몇가지 대표적인 예시를 알아보자.
비동기 처리의 예
1) ajax 통신
통신할 때는 보통 오래 걸리므로, 비동기식 처리가 필수적인데 이러한 비동기식 통신을 위하여 ajax을 주로 이용한다.
function getData() {
var data;
$.get('https://url',function(response) {
data = response;
});
return data;
}
console.log(getData()); // undefined
위의 코드를 보면, url에 데이터를 보내달라는 요청을 보내고 그것을 콘솔에 출력하는 프로그램이다. 그렇지만 실행결과 받아온 데이터가 출력되는 것이 아니라, 'undefined'가 출력된다. 이는 요청받은 url에서 데이터를 보내주기까지 시간이 걸리므로 이를 기다려주지않고 출력하는 부분이 먼저 실행되었기 때문다.
2) setTimeout()
setTimeout()은 WEB API 중의 하나인데 해당 코드를 바로 실행하지않고 특정 시간 대기 후 실행시켜 달라는 뜻이다.
function sayHello() {
setTimeout(()=>console.log("HELLO"),1000)
sayGoodBye()
}
function sayGoodBye() {
console.log("BYE")
}
sayHello()
프로그래머는 다음과 같은 동작을 기대하며 위와 같은 프로그램을 작성했다.
1) 1초 기다린다.
2) HELLO가 출력된다.
3) BYE가 출력된다.
하지만, setTimeout은 비동기식 처리이므로 실제 코드는 다음과 같이 수행된다.
1) BYE가 출력된다.
2) 1초 기다린다.
3) HELLO가 출력된다.
비동기 처리의 문제와 해결책
웹 개발을 위해서는 비동기식 처리는 거의 필수적이지만, 비동기식 처리 시 위에서 살펴본 것과 같이 데이터를 아직 못받았는데 그 데이터에 대한 처리를 해버린다던지, 예상치 못한 순서로 프로그램이 실행된다던지하는 등의 문제가 발생할 수 있다. 따라서 비동기식 처리를 기본으로 하지만 이 부분은 꼭 동기식으로 처리해야겠다고 할 때 사용하는 프로그램 기법들이 있는데 이를 소개하고자 한다.
1) callback
2) Promise
3) async와 await
위의 기법들을 구체적으로 어떻게 사용하는 지에 대해서는 각각 3개의 포스팅을 통해 소개할 예정이다.