WEB 웹팁 디자인팁 폰트 컬러 UI/UX 모바일UI Widget 디자인소스 기획팁 웹서비스 회사복지 스타트업 회사후기 메모/서식 퍼블팁 추천사이트 HTML•CSS 자바스크립트 jQuery React 앵귤러JS Node.js Codepen 개발팁 PHP 한글코딩 인터뷰 안드로이드 오픈API 파이썬 Flutter 서버관리팁

Javascript 비동기 프로그래밍

2016년 06월 10일

작성자 : 이상건 (NHN 엔터테인먼트 / 회원개발팀 / kdsr2z0@gmail.com )

Javascript 의 특성

javascript는 script 언어이므로 인터프리터(interpreter) 에 의해 실행된다.
객체 기반의 언어이다.
단일 쓰레드에 의해 실행된다.

자바스크립트는 빠르고 쉽게 배워서 사용할 수 있다.

쉬운 언어이기 때문에 그만큼 많이 사용되지만, 조심해야할 부분을 쉽게 놓칠 수 있다.

또, 생각보다 다양한 방식으로 javascript를 프로그래밍 할 수 있다.

Javascript의 비동기 프로그래밍

동기 프로그래밍이란, 어떤 작업을 요청한 후 그 작업이 완료되기까지 기다렸다가, 응답을 받아 처리하는 것을 말한다.

반면 비동기 프로그래밍이란, 어떤 작업을 요청한 후 다른 작업을 수행하다가 interrupt 등을 이용하여 작업 완료를 알리면 그에대한 응답을 받아 처리하는 것을 말한다.

Javascript는 단일 쓰레드 기반이기때문에 비동기 프로그래밍을 하기가 어렵다. 더군다나 javascript는 별도의 사용자 정의 interrupt function을 지원하지 않고 있다.

그러나 Javascript에서도 비동기 프로그래밍을 할 수 있다. 정확하게는 비동기 프로그래밍 처럼 동작하게 만들 수 있는 것이다.

그 방법은 timer를 활용하는 방법이다.

javascript의 timer

setTimeout : 단 한번 실행 된다.

setTimeout(function(){ alert("Hello"); }, 3000);

setInterval : 지정된 시간마다 실행된다.

setInterval(function(){ alert("Hello"); }, 3000);

clearTimeout : 타이머를 제거한다.

function myFunction() {
    myVar = setTimeout(function(){ alert("Hello"); }, 3000);
}

function myStopFunction() {
    clearTimeout(myVar);
}

timer를 이용한 비동기 프로그래밍

단일 쓰레드에의해 실행되는 비동기 프로그래밍은 단순하다.

setInterval 을 이용하여 주기적으로 callback 함수를 호출하여 timeCount 를 증가 시키면서 특정 timeCount에 도달했을때, event를 발생(function 호출) 시키는 것이다.

    <!DOCTYPE html>
    <html>
    <body>

    <button onclick="myFunction()">Try it</button>

    <script>
    var timeCount = 1;
    function myFunction() {
        setInterval(function(){ 
            timeCount++;
            if(timeCount%10==0) {
                alert("Hello"); 
            }
        }, 1000);
    }
    </script>

    </body>
    </html>

위 예제 코드에 보면, 버튼을 클릭할 때 마다 timer가 하나씩 생겨난다.

하지만 그러한 방법은 위험한 방법이다. 여러개의 타이머가 동작할 시, 각 타이머의 callback에 의해 다른 timer의 지연이 발생할 수 있기 때문이다.

여러개의 비동기 작업이 있을때는 timer를 여러개 쓰는것 보다, 하나의 timer에 여러개의 timeCount를 두는것이 더 효율 적일 것이다.

    var timeCount = 1;
    var timeCount2 = 1;
    var timeCount3 = 1;
    function myFunction() {
        setInterval(function(){ 
            timeCount++;
            timeCount++;
            timeCount++;
            if(timeCount%10==0) {
                alert("Hello"); 
            }
            if(timeCount2%20==0) {
                alert("Hello2"); 
            }
            if(timeCount3%30==0) {
                alert("Hello3"); 
            }
        }, 1000);
    }