HTML.동기(Syncronous)와 비동기(Asyncronous)

자바스크립트의 핵심: 동기 vs 비동기, 그리고 AJAX

안녕하세요! 오늘은 웹 개발자라면 반드시 알아야 할 자바스크립트의 동기(Synchronous)와 비동기(Asynchronous) 개념, 그리고 AJAX 기술에 대해 알아보겠습니다. 특히, 웹이 멈추는 이유, 서버 통신 시 필수인 XMLHttpRequest 및 jQuery의 AJAX 사용법, 그리고 CORS까지 정리했어요!

---

📌 목차

1. 동기와 비동기의 이해
2. 콜백 함수와 콜백 헬
3. AJAX 개념과 사용법
4. CORS란?
5. 마무리하며

---

1. 동기 vs 비동기란?

✅ 동기(Synchronous): 순차적 흐름

• 한 작업이 끝나야 다음 작업이 시작됩니다.
• 예측 가능하지만, 긴 작업 시 웹이 멈출 수 있어요.

// 예: 동기 함수 호출
function syncTask() {
    console.log("1. 시작");
    console.log("2. 처리 중");
    console.log("3. 완료");
}
syncTask();
// 결과: 1 → 2 → 3 순서대로 실행

✅ 비동기(Asynchronous): 병렬적 처리

• 작업이 끝나기를 기다리지 않고 다음 작업 진행
• 인터페이스가 멈추지 않아 UX 향상

// 예: 비동기 함수 (setTimeout 사용)
console.log("1. 시작");
setTimeout(() => {
    console.log("2. 비동기 완료");
}, 1000);
console.log("3. 다음 작업");
// 결과: 1 → 3 → (1초 후) 2

---

2. 콜백 함수와 콜백 헬

🔁 콜백 함수란?

다른 함수에 인자로 전달되어 특정 시점에 호출되는 함수입니다.

function delayedMessage(msg, callback) {
    setTimeout(function() {
        console.log(msg);
        callback();
    }, 2000);
}

delayedMessage("작업 완료!", function() {
    console.log("콜백 실행됨!");
});

💣 콜백 헬(Callback Hell)

콜백이 중첩되면서 가독성이 나빠지는 현상입니다.

// 콜백 헬 예시
login(user, function() {
    fetchProfile(user, function() {
        getPosts(user, function() {
            console.log("모든 작업 완료");
        });
    });
});

🧩 해결 방법: Promise / async-await

// Promise 사용
login(user)
.then(fetchProfile)
.then(getPosts)
.catch(error => console.error(error));

// async/await 사용
async function loadUserData() {
    try {
        await login(user);
        await fetchProfile(user);
        await getPosts(user);
    } catch (err) {
        console.error(err);
    }
}

---

3. AJAX란? (Asynchronous JavaScript and XML)

전체 페이지를 새로 고치지 않고도 서버와 데이터를 주고받는 기술입니다.

🔧 XMLHttpRequest 기본 사용법

let xhr = new XMLHttpRequest();
xhr.open("GET", "test.txt", true);
xhr.send();

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        document.getElementById("result").innerHTML = xhr.responseText;
    }
};

💡 readyState 설명

• 0: 요청 초기화 안 됨
• 1: 연결 설정
• 2: 요청 수신됨
• 3: 처리 중
• 4: 완료

💡 jQuery를 이용한 AJAX 요청

// GET 요청
$.get("test.txt", function(data, status) {
    $("#target").html(data);
    console.log("Status: " + status);
});

// POST 요청
$.post("server.php", { name: "홍길동" }, function(data) {
    console.log("서버 응답:", data);
});

---

4. CORS란?

CORS(Cross-Origin Resource Sharing)는 다른 도메인의 자원에 접근할 수 있도록 허용하는 보안 메커니즘입니다.

기본적으로 웹 브라우저는 동일 출처 정책(Same-Origin Policy)을 따르므로, CORS 설정이 없으면 다른 도메인으로의 요청은 차단됩니다.

💡 서버에서 CORS 허용 방법 (Node.js 예시)

const express = require("express");
const cors = require("cors");
const app = express();

app.use(cors());

app.get("/data", (req, res) => {
    res.json({ msg: "Hello from CORS-enabled server" });
});

---

5. 마무리하며

웹 개발에서 비동기 처리는 사용자 경험을 좌우하는 핵심 요소입니다. AJAX, Promise, async/await를 제대로 이해하고 활용할 수 있다면, 성능 좋은 인터랙티브 웹 앱을 만들 수 있습니다.

끝으로, 이벤트 리스너, 타이머 함수(setTimeout, setInterval) 등도 꼭 함께 연습해보세요!

---