노드JS에서 비동기로 소스 파일을 변경해보자


안녕하세요.
고코더 입니다.


Node.js의 가장 큰 특징중 하나는 비동기로 처리가 가능하다는 것입니다.
이전에도 설명을 자세히 다루었지만 다시 정의하자면 하나의 요청이 처리가 완료 되기 전에 다음 요청으로 진행이 가능합니다.
Node의 최대 성능을 처리해야 한다면 동기를 사용해야 합니다. 하지만 개발자의 의도에 따라 동기 처리와 비동기 처리가 가능합니다.



동기(synchronous) 예제


 1. 동기 방식으로 순차적으로 실행 가능한 Node 소스를 개발하였습니다. 파일을 읽어 올수 있도록 FileSystem(fs) 모듈을 이용해 파일을 불러오는 방식입니다. callback을 지정하지 않아 동기식으로 차례대로 실행을 합니다. 
1
2
3
4
5
6
7
var fs = require('fs'); //filesystem module
 
//동기(synchronous)
console.log(1new Date().getTime());
var data = fs.readFileSync('synchronous.js');
console.log(2new Date().getTime(),'File length:'+data.length);
console.log(3new Date().getTime());
cs

 2. 결과 모습입니다. 순서대로 실행되어 순번대로 1부터 3까지 실행 합니다. 



비동기(ansynchronous) 예제


 3. 이번에는 비동기식 예제를 개발합니다. 이전에 소스를 비동기 방식으로 만들어서 사용해보겠습니다. 
기존 readFileSync은 콜백을 사용할 수 없으므로 readFile으로 함수를 변경하고 콜백(callback)을 입력하였습니다. 
1
2
3
4
5
6
7
8
var fs = require('fs'); //filesystme module
 
//비동기(ansynchronous)
console.log(1new Date().getTime());
fs.readFile('ansynchronous.js'function(err, data) {
    console.log(2new Date().getTime(),'File length:'+data.length);
});
console.log(3new Date().getTime());
cs

 4. 이번에 순서를 보면 2번이 마지막에 실행되었고 3번이 먼저 실행되었습니다. 비동기로 노드를 사용하였기에 요청 이후에 바로 다음단계로 넘어가서 3번을 실행하였기 때문에 먼저 처리된 3번 log가 먼저 찍혀있습니다.




비동기에서 순차적으로 실행하기 


 5. 비동기를 기본 정책으로 사용하지만 로직에 따라 필요한 부분에서 순차적으로 실행되야 하는 경우가 발생합니다.
콜백(callback) 함수를 이용해 실행 순서를 제어 하는 방법입니다. 
1
2
3
4
5
6
7
8
9
10
11
12
var fs = require('fs'); //filesystme module
 
 
//비동기(ansynchronous) 순차실해
console.log(1new Date().getTime());
fs.readFile('ansynchronous_sync.js'function(err, data) {
    console.log(2new Date().getTime(),'File length:'+data.length);
    fs.readFile('ansynchronous.js'function(err, data) {
        console.log(3new Date().getTime(),'File length:'+data.length);
        console.log(4new Date().getTime());
    });
});
cs

 6. 콜백 함수를 이용해 개발자가 원하는 순서대로 실행 되도록 하였습니다.



마무리


비동기는 이제 필수 입니다.


댓글을 달아 주세요


노드JS가 운영되는 방식


안녕하세요.
고코더 입니다.


Node.js의 가장 큰 특징이라고 하면 싱글 쓰레드에 비동기 처리 방식입니다. 사용자의 요청은 한 곳에서 받지만 작업은 실질적으로 멀티쓰레드로 운영하여 결과를 구현합니다.
예제로 이 방식을 표현해보겠습니다.


 1. 싱글 스레드, 비동기 예제



" 따뜻한 오후 서점 독서중인 고코더는 배가 고파서 푸드코트로 이동합니다. 
주문 방식은 먼저 한식,중식,일식,양식등 다양한 입점사들의 요리를 보고 선택을 합니다.
그리고 계산대 앞에서 줄을 섭니다. 앞 손님은 돈까스를 주문합니다. 저는 요리 시간이 오래 걸리는 스테이크를 주문했습니다. 제 뒤에 기다리던 분은 재 빠르게 라면 하나를 주문합니다.
카운터 점원이 계산을 하면서 호출벨을 나눠주고 요리에 맞는 입점사 식당에 주문을 입력합니다. 입점식당은 주문 모니터에 "돈까스 1인분" 내역을 확인하고 요리에 들어갑니다.


고코더는 ITExpress 블로그에서 코딩 강의를 보면서 주문 벨을 만지작 거리면서 기다립니다. 저보다 늦게 주문한 라면이 제일 먼저 나오네요.
그리고 제 앞에서 돈까스를 주문했던 분도 음식을 픽업하고 자리에 돌아옵니다. 그리고 조금 기다리니 제 호출벨이 울리고 마지막으로 제가 주문한 스테이크를 가지러 갑니다. "

요즘 대부분 푸드코트가 운영되는 방식입니다. 계산은 한군데서 요리는 각 입점사가 하는 방식입니다.

여기서 푸드코트 계산을 담당하는 직원은 싱글 스레드 입니다. 
그리고 각 요리를 만들어서 벨을 호출하는 식당들은 비동기 방식입니다. 

입력은 하나의 스레드에서 받지만 순서대로 처리 하지 않고 먼저 처리된 결과 값을 반환해주는 방식이 바로
노드가 사용하는 싱글 스레드 비동기 방식입니다.

그렇다면 멀티 스레드 방식으로 운영되는 푸드코트는 어떨까요?


 2. 멀티 스레드, 동기 방식



어릴적 갔던 푸드코트들은 입주 식당마다 계산 점원이 따로 있었습니다. 
각 먹고 싶은 식당 앞에서 줄을 서고 계산하고 음식을 기다리는 방식입니다. 
배가 너무 고파서 오늘은 중식과 한식을 동시에 먹고 싶다면 각 식당에서 줄을 서고 결제를 합니다. 
음식점 마다 서있는 사람들로 인해 복잡하고 음식점들도 계산을 하는 직원이 한명씩 더 필요했습니다. 

만약 아주 큰 공간에 직원이 충분한 식당들로 이루어진 구조라면 물런 멀티스레드 동기 방식이 유리할 수도 있습니다.



마무리



하지만 최소한에 자원으로 최대한에 효율을 이끌어야 하는 인프라에 기본을 생각한다면 비동기가 좋지 않을까요?


댓글을 달아 주세요


ajax 동기식은 진정한 동기 방식이 아니다


안녕하세요.
고코더 입니다.



요즘은 백엔드와 프론트로 나눠져 있는 웹생태계 덕분에 ajax 사용이 많아졌습니다. 거의 필수적인 함수 입니다. 저도 처음 ajax를 만나고 이렇게 자주 사용할줄은 몰랐네요. 

 1. 그런데 ajax에 보면 항상 보이는 옵션이 있습니다. async 라는 옵션입니다. 많은 분들이 이 옵션으로 동기,비동기를 처리할 수 있는걸로 알고 있습니다. 하지만 맞는 말이기도 하고 틀린 말이기도 합니다. 사실 ajax 자체가 비동기 처리를 위해 사용되는건데 동기로 지정한다는게 약간 어불성설 같습니다. 




 2. 우선 사용법은 아래와 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
<head>
<script type="text/javascript">
var arryData = [];    //배열을 선언
 
    node = {
        "name"    :    'gocoder',
        "url" :    'gocoder.net'
    };      
    arryData.push(node);    //배열을 push 뒤에 넣는다
 
 
    node = {
        "name"    :    '이름',
        "url" :    '주소'
    };      
    arryData.unshift(node);    //배열을 unshift 맨 앞에 넣는다
 
 
    node = {
        "name"    :    'gc',
        "url" :    'gocoder.net'
    };      
    arryData.push(node);    //배열을 push 뒤에 넣는다
 
    for (var i = 0; i < arryData.length; i++) {
        document.write(arryData[i].name);
        document.write(' , ');
        document.write(arryData[i].url);
        document.write('<br>');
    }
</script>
</head>
 
</html>
cs

 3. 그래서 해당 jqery 함수 설명을 찾아보았습니다.  결론적으로 ajax는 기본적으로 비동기를 사용하고 도메인간 요청이나 jsonp 와 같이 동기로 처리해도 소용 없는 것들은 자동으로 비동기로만 지원한다고 합니다. 그리고 그외에 동기 요청 할때는 브라우저를 일시적으로 잠궈서(Lock)을 걸어서 동기 처리를 한다고 하네요. 결론은 ajax가 처리하는 우리가 아는 동기 프로세스라기 보다는 일시중지를 이용하는 방식입니다.



마무리


ajax로 된 결과 값을 순차적인 로직에 담아야 한다면
sync : false 를 이용해서 동기처리를 활용하세요.










댓글을 달아 주세요


동기식 비동기식 뭐가 다를까?


안녕하세요.
고코더 입니다.



동기, 비동기 단어 자체가 영어로 보면 머리속에 들어오는데 번역된 한글로 보면 조금 헷갈린 구석이 있습니다.

동기(synchronous)
    - 응답을 받아야만 다음 동작을 실행 
비동기는 (Asynchronous)
    - 응답에 상관 없이 바로 다음 프로세스를 진행



 1. 동기방식


우리가 많이 사용하는 ajax는 보통 동기식을 많이 사용합니다. 해당 데이터를 모두 가져와서 다음 프로세스에서 함께 사용하는 경우가 많기 때문입니다. 동기는 하수도관이 하나 입니다. 물길이 하나여서 하나가 다 된 다음 다음 프로스세를 순차적으로 실행합니다. 프로세스적 절차가 중요한 사이트 관리자 페이지라던가 금융 업무와 같은 곳에서는 동기식인 경우가 많습니다.

특징
    - 한번에 하나씩 처리하면서 내려간다
    - 순차적으로 처리하기에 비동기에 비해 느리게 결과 값이 나타난다.
    - 디버깅이 쉽다




 2. 비동기 


비동기는 다양한 작업이 동시에 일어납니다. 예를 들면 메인화면이 노출되는데 실시간 채팅창은 로딩 된데로 뜨고 게시판 미리보기도 로딩되는데로 뜹니다. 그리고 로그인창이 오랫동안 로딩 하다 404에러가 난다면 다른 프로세스와 상관없이 나중에 오류가 난 박스대로 보여집니다. 이처럼 비동기는 우리가 많이 보는 사이트에 모습입니다.

특징
    - 여러가지 로직이 동시에 처리 된다.
    - 매우 빠르게 결과가 도출된다.
    - 다른 프로세스의 결과 값을 받아 쓸때 이를 조절해야 한다.




마무리


번역 자체가 이상해서 항상 헷갈립니다.
동기가 기다려서 순차적으로 실행하는 단어입니다!!
"동시시 시작하기 위해 기다린다" 이렇게 외우세요!



댓글을 달아 주세요