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에러가 난다면 다른 프로세스와 상관없이 나중에 오류가 난 박스대로 보여집니다. 이처럼 비동기는 우리가 많이 보는 사이트에 모습입니다.

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




마무리


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



댓글을 달아 주세요