JavaScript

[JavaScript] 비동기 통신과 동기 통신 비교

개발자 leelee 2024. 7. 16. 23:23

 

 

비동기 통신

 

장점

  1. 작업을 중단하지 않고도 웹 페이지와 상호 작용할 수 있다.
    예를 들어, 데이터를 로드하는 동안 사용자는 다른 작업을 수행할 수 있다는 것.
  2. 서버와 클라이언트가 동시에 작업을 수행할 수 있어 효율적이다.
  3. 요청을 보낸 후 다른 작업을 수행할 수 있어서 응답 시간이 줄어든다.

단점

  1. 콜백 함수, 프로미스, async/await 등 알아야할 개념이 조금 더 복잡하다.
  2. 어디에서 오류가 생겼는지 디버깅과 작업순서를 관리하기 힘들다.

 

예시 : 사용자가 버튼을 클릭하면 서버에 데이터를 요청하고, 서버에서 응답을 받은 후 결과를 웹 페이지에 표시

(AJAX) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX Example</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <button id="fetchData">Fetch Data (AJAX)</button>
    <div id="result"></div>

    <script>
        $('#fetchData').on('click', function() {
            $.ajax({
                url: 'https://jsonplaceholder.typicode.com/users/1', // 예제 API URL
                method: 'GET',
                success: function(data) {
                    $('#result').html('User Name: ' + data.name);
                },
                error: function(err) {
                    console.error('Error:', err);
                }
            });
        });
    </script>
</body>
</html>

 

동기 통신

 

장점

  1. 코드가 순차적으로 실행되므로 간단하다.
  2. 작업이 순서대로 실행된다.
  3. 요청이 완료되기 전에 다음 작업을 시작하지 않는다.

 

단점

  1. 요청이 완료될 때까지 기다려야한다.
  2. 비효율적인 사용 

 

예시 : 사용자가 버튼을 클릭하면 서버에 데이터를 요청하고, 서버에서 응답을 받은 후 결과를 웹 페이지에 표시

(SQL호출) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Synchronous Example</title>
</head>
<body>
    <button id="fetchDataSync">Fetch Data (Sync)</button>
    <div id="resultSync"></div>

    <script>
        document.getElementById('fetchDataSync').addEventListener('click', function() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/1', false); // false for synchronous request
            xhr.send();
            if (xhr.status === 200) {
                var data = JSON.parse(xhr.responseText);
                document.getElementById('resultSync').innerHTML = 'User Name: ' + data.name;
            } else {
                console.error('Error:', xhr.statusText);
            }
        });
    </script>
</body>
</html>