아하
검색 이미지
생활꿀팁 이미지
생활꿀팁생활
생활꿀팁 이미지
생활꿀팁생활
하얀고슴도치236
하얀고슴도치23619.10.02

비동기 통신, 동기 통신의 차이점이 무엇인가요??

비동기 통신, 동기 통신의 차이점이 무엇인가요??

응답이 올때까지 기다린다? 뭐 이런차이라고 대충 알고있는데

정확하게 차이점과 어떨때 각자 사용하는것이 맞는지 궁금합니다^^

55글자 더 채워주세요.
답변의 개수
1개의 답변이 있어요!
  • 일반적인 비동기 XHR 코드를 먼저 보겠습니다. (Promise나 async/await 등은 다루지 않겠습니다.)

    let xhr = new XMLHttpRequest(); xhr.open('GET', 'https://www.a-ha.io/404', true); // async = true xhr.send(); xhr.onload = function() { // ----- 응답을 받고 실행될 코드 시작 if (xhr.status != 200) { alert('오류가 발생했습니다.'); } else { alert(xhr.responseText); } // ----- 응답을 받고 실행될 코드 끝 }; xhr.onerror = function() { alert('요청을 실패했습니다.'); }; // ---------- 그냥 아무 코드 alert('이 메시지가 언제 보일까요?');

    응답을 받고 실행될 코드 부분이 응답이 올 때까지 기다린 후 실행되긴 합니다.

    아래는 웹 워커가 아닌 이상 실제로 사용하지는 않는 동기 XHR입니다.

    let xhr = new XMLHttpRequest(); xhr.open('GET', 'https://www.a-ha.io/404', false); // async = false try { xhr.send(); // ----- 응답을 받고 실행될 코드 시작 if (xhr.status != 200) { alert('오류가 발생했습니다.'); } else { alert(xhr.responseText); } // ----- 응답을 받고 실행될 코드 끝 } catch(err) { alert('요청을 실패했습니다.'); } // ---------- 그냥 아무 코드 alert('이 메시지가 언제 보일까요?');

    응답을 받고 실행될 코드 부분이 응답이 올 때까지 기다린 후 실행된다는 점도 같습니다.
    동기식이면 콜백을 사용하지 않아도 됩니다. 콜백지옥에 빠질 일이 없습니다!

    그런데 위 두 코드를 실행해보면 이 메시지가 언제 보일까요? 메시지가 나타나는 시점이 다릅니다.

    동기 XHR은 응답을 기다리는 동안 실행이 멈춥니다. 심지어 화면 업데이트도 이루어지지 않습니다.
    비동기 XHR은 응답이 올 때까지 기다리지 않고 다음 코드를 실행하고, 완료됐을 때 콜백을 실행합니다.


    동기 통신은 직관적입니다. 콜백 지옥에 빠질 일도 없습니다. 하지만 다른 코드의 실행이 멈춥니다.
    응답을 기다리는 동안 (해당 스레드에서) 할 게 없거나 늦어도 되는 경우에 동기 통신을 씁니다.
    화면 업데이트 등의 다른 작업을 다른 스레드에서 처리해서 정말로 할 게 없을 때나 쓸 수 있습니다.

    비동기 통신을 써야 같은 스레드에서 여러 작업을 하는 동안 다른 작업이 멈추지 않습니다.
    콜백 때문에 가독성이 떨어지기도 합니다. 콜백 안에 콜백 안에 콜백 안에 콜백 안에 콜백...
    하지만 (극한의 최적화가 필요한 게 아닌 이상) Promise, async/await 등을 쓰면 될 문제입니다.