동기(Synchronous) vs 비동기(Asynchronous) 개념 정리

 

👉 동기(Synchronous): 요청을 하면 응답을 받을 때까지 기다리는 방식
👉 비동기(Asynchronous): 요청을 하면 응답을 기다리지 않고 다음 작업을 수행하는 방식

 

 

✅ 동기(Synchronous) 예제

• 음식점에서 주문하고 → 요리가 끝날 때까지 기다렸다가 → 음식을 받는 방식
• 요청한 일이 끝날 때까지 다른 일을 못함

✅ 비동기(Asynchronous) 예제

• 패스트푸드점에서 주문하고 → 번호표 받고 → 다른 일을 하다가 → 번호가 불리면 음식을 받는 방식
• 요청한 일이 끝나지 않아도 다른 일을 할 수 있음

 

💻 프로그래밍에서 동기 vs 비동기

1️⃣ 동기 방식 (Synchronous)

• 요청을 보내면 완료될 때까지 기다린 후 다음 작업을 수행
• 실행 순서가 정해져 있고, 코드가 순차적으로 실행됨
• 단점: 하나의 작업이 오래 걸리면 다음 작업이 지연됨 (블로킹 발생)

📌 동기 코드 예제 (JavaScript)

console.log("1. 시작");
alert("2. 여기를 클릭하세요!"); // 사용자가 클릭할 때까지 다음 코드 실행 안 됨
console.log("3. 끝");

✅ alert()이 끝나야 console.log("3. 끝")이 실행됨.

 

 

2️⃣ 비동기 방식 (Asynchronous)

• 요청을 보내면 기다리지 않고 다음 작업을 수행
• 요청이 완료되면 나중에 결과를 받아 처리
• 장점: 실행 중인 코드가 멈추지 않고 계속 실행 가능 (Non-blocking)

 

📌 비동기 코드 예제 (JavaScript)

console.log("1. 시작");

setTimeout(() => {
  console.log("2. 3초 후 실행");
}, 3000); // 3초 후 실행 (비동기)

console.log("3. 끝");

✅ setTimeout()을 실행한 후 바로 다음 코드(console.log("3. 끝"))가 실행됨.
✅ 3초 후에 "2. 3초 후 실행"이 출력됨.

 

 

🚀 동기 vs 비동기 비교

구분	동기(Synchronous)	비동기(Asynchronous)
실행 방식	요청이 끝날 때까지 기다림	요청 후 다른 작업 수행 가능
코드 진행	순차적으로 실행됨	요청 후 응답을 기다리지 않음
성능	느릴 수 있음 (대기 시간이 길어짐)	빠름 (비효율적 대기 없음)
예제	alert(), for 반복문	setTimeout(), fetch()

 

 

💡 비동기가 중요한 이유

1. 웹페이지 로딩 속도 개선
   • 웹사이트에서 데이터를 가져올 때 비동기를 사용하면 화면이 멈추지 않음.
2. 서버 요청 (API 호출)
   • fetch() 또는 axios 같은 비동기 함수로 데이터를 가져오면 사용자가 기다릴 필요 없음.
3. 실시간 처리 (예: 채팅, 게임, 주식 앱)
   • 비동기를 사용하면 여러 요청을 동시에 처리할 수 있음.

📌 비동기 API 호출 예제 (JavaScript)

console.log("데이터 요청 중...");

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json()) // 응답 데이터를 JSON으로 변환
  .then(data => console.log("받은 데이터:", data)) // 결과 출력
  .catch(error => console.log("에러 발생:", error));

console.log("다른 작업 실행 중...");

✅ fetch()가 서버에 요청을 보내는 동안 console.log("다른 작업 실행 중...")이 먼저 실행됨.
✅ 응답을 받으면 then()이 실행됨.

 

 

📌 결론

✔ 동기(Synchronous) → 요청을 보내면 결과를 받을 때까지 기다림.
✔ 비동기(Asynchronous) → 요청을 보내고 기다리지 않고 다음 작업을 실행.
✔ 비동기가 더 효율적 → 네트워크 요청, 데이터베이스 작업, 대기 시간이 긴 작업에 사용.

👉 즉, 웹 개발에서 비동기는 필수! 🚀