[자바스크립트(Java Script)]7. 동기적(Synchronous) vs 비동기적(Asynchronous) 처리 방식

Apr 14, 2025

Contents

1. 동기적(Synchronous)이란?2. 비동기적(Asynchronous)이란?3. 동기적 vs 비동기적 차이점 정리 4. 언제 동기적, 비동기적 처리를 사용할까?


<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border: 1px solid black;
            padding: 10px;
            margin-bottom: 5px;
        }

        .red {
            background-color: red;
        }

        .orange {
            background-color: orange;
        }

        .yellow {
            background-color: yellow;
        }

        .green {
            background-color: green;
        }
    </style>
</head>

<body>
    <div id="outer-box">

    </div>

    <script>
        let site = document.querySelector("#outer-box");

        makeRedBox();
        makeOrangeBox();
        makeWhiteBox2();
        makeYellowBox();
        makeGreenBox();


        function makeRedBox() {
            let divDom = document.createElement("div");
            divDom.setAttribute("class", "red");
            site.append(divDom);
        }

        function makeOrangeBox() {
            let divDom = document.createElement("div");
            divDom.setAttribute("class", "orange");
            site.append(divDom);
        }
        function makeYellowBox() {
            let divDom = document.createElement("div");
            divDom.setAttribute("class", "yellow");
            site.append(divDom);
        }
        function makeGreenBox() {
            let divDom = document.createElement("div");
            divDom.setAttribute("class", "green");
            site.append(divDom);
        }

        function makeWhiteBox() {
            let request = new XMLHttpRequest();
            request.open('GET', 'http://localhost:8080/api/boards/1', false); // 마지막 인자 false → 동기 요청
            request.send(null);
            let responseBody = JSON.parse(request.responseText);
            let divDom = document.createElement("div");
            divDom.innerHTML = responseBody.body.title;
            site.append(divDom);
        }

        async function makeWhiteBox2() {
            let response = await fetch("http://localhost:8080/api/boards/1");
            let responseBody = await response.json();
            let divDom = document.createElement("div");
            divDom.innerHTML = responseBody.body.title;
            site.append(divDom);
        }

    </script>
</body>

</html>

프로그래밍에서 데이터를 요청하고 응답을 처리하는 방식에는 동기적(Synchronous) 방식과 비동기적(Asynchronous) 방식이 있습니다. 이 두 개념은 특히 네트워크 요청(예: API 호출)에서 중요한 차이를 보입니다.

1. 동기적(Synchronous)이란?

동기적 처리는 하나의 작업이 끝나야만 다음 작업이 진행되는 방식입니다. 요청을 보낸 후 응답이 올 때까지 다음 코드가 실행되지 않고 대기 상태가 됩니다.

예제 코드 (동기적 요청)


function makeWhiteBox() {
    let request = new XMLHttpRequest();
    request.open('GET', 'http://localhost:8080/api/boards/1', false); // false -> 동기 요청
    request.send(null);
    
    let responseBody = JSON.parse(request.responseText);
    let divDom = document.createElement("div");
    divDom.innerHTML = responseBody.body.title;
    document.querySelector("#outer-box").append(divDom);
}

makeWhiteBoxSync();

2. 비동기적(Asynchronous)이란?

비동기적 처리는 하나의 작업이 실행되는 동안에도 다른 작업을 동시에 진행할 수 있는 방식입니다. API 요청을 보낸 후 응답을 기다리는 동안 다른 코드가 실행됩니다.

예제 코드 (비동기적 요청)


        async function makeWhiteBox2() {
            let response = await fetch("http://localhost:8080/api/boards/1");
            let responseBody = await response.json();
            
            let divDom = document.createElement("div");
            divDom.innerHTML = responseBody.body.title;
            site.append(divDom);
        }

    </script>
</body>

</html>

이 코드에서는 fetch API를 사용하여 비동기적으로 데이터를 요청합니다. await 키워드를 사용하면 해당 줄에서 응답을 기다리지만, 그동안 브라우저는 다른 작업을 계속 수행할 수 있습니다.

3. 동기적 vs 비동기적 차이점 정리

구분	동기적(Synchronous)	비동기적(Asynchronous)
실행 방식	요청 후 응답이 올 때까지 대기	요청 후 응답을 기다리는 동안 다른 작업 수행
UI 반응성	멈출 수 있음	원활한 UI 유지 가능
사용 예시	단순한 스크립트, 작은 데이터 처리	대규모 네트워크 요청, 파일 다운로드