동기동기 vs 비동기

JavaScript를 배우다 보면 꼭 마주치는 개념이 있다.

바로 동기(Synchronous)와 비동기(Asynchronous)

처음에는 그냥
“순서대로 실행되면 동기, 아니면 비동기”
정도로 이해했다.

아무리 생각해도 그렇게 단순한 것이 아닌 것 같아, 더 자세히 알아보고자 한다.

---

1. 동기(Synchronous)란 무엇일까?

동기는 말 그대로 순서대로 실행되는 방식이다.

앞의 작업이 끝나야 다음 작업이 실행된다.

console.log("1");
console.log("2");
console.log("3");

1
2
3

이처럼 예측 가능하고 직관적이다.

2. 그런데 왜 문제가 생길까?

문제는 시간이 오래 걸리는 작업이 등장할 때다.

예를 들어:

서버에서 데이터 받아오기

• 파일 읽기
• 결제 요청
• 이미지 업로드

이런 작업은 몇 초가 걸릴 수도 있다.
만약 이런 코드가 동기 방식이라면:

fetchData(); // 3초 걸림
console.log("다음 작업");

3초 동안 아무 일도 하지 못하고 기다리게 된다.

웹이라면 어떤 일이 벌어질까?

• 버튼 클릭해도 반응 없음
• 화면 멈춤
• 사용자 불편

즉, UI가 멈춘다.

---

3. 그래서 등장한 비동기(Asynchronous)

비동기는 이렇게 동작한다:

오래 걸리는 작업은 일단 맡겨두고 다른 일을 먼저 한다.

쉽게 비유하면,

• 동기: 음식 주문하고 나올 때까지 아무것도 안 하고 기다림
• 비동기: 음식 주문하고, 그동안 친구랑 대화하다가 음식 나오면 받음
  코드로 보면 이런 느낌이다:

fetchData().then(() => {
  console.log("데이터 도착");
});

console.log("다음 작업");

실행 흐름은:

다음 작업
데이터 도착

기다리지 않고 먼저 다음 코드가 실행된다.

---

4. JavaScript는 왜 비동기를 많이 쓸까?

여기서 중요한 포인트가 있다.

JavaScript는 기본적으로 단일 스레드(single-thread) 환경에서 실행된다.

즉, 한 번에 한 작업만 처리할 수 있다.

그런데 만약 네트워크 요청처럼 오래 걸리는 작업이
동기적으로 실행된다면?

→ 브라우저 전체가 멈춘다.

그래서 JavaScript는:

• Callback
• Promise
• async / await

같은 비동기 처리 방식을 발전시켜 왔다.

결국 이유는 하나다.

사용자 경험을 멈추지 않기 위해서.

---

5. 내가 이해하면서 달라진 점

처음엔 비동기가 그냥 “동시에 실행되는 것”이라고 생각했다.

하지만 실제로는 그렇지 않다.

비동기는:

• 동시에 여러 일을 처리하는 게 아니라
• 기다리는 동안 다른 일을 먼저 처리하는 방식이다.

그리고 중요한 건
“빠르게 실행하는 것”이 아니라
“흐름을 잘 제어하는 것”이라는 걸 알게 됐다.

---

6. 정리

구분	동기	비동기
실행 방식	순서대로 실행	기다리지 않고 다음 작업 실행
장점	이해하기 쉬움	UI 멈춤 방지
단점	오래 걸리는 작업에서 문제 발생	흐름 제어가 어려움

---

JavaScript에서 비동기를 배우는 순간,
웹이 단순한 문서가 아니라 하나의 프로그램이라는 걸 실감하게 된다.

버튼 하나가 멈추지 않고 반응하는 것,
데이터가 자연스럽게 불러와지는 것,

그 뒤에는 비동기 처리라는 개념이 숨어 있었다.

추후에 Promise와 async/await를 조금 더 정리해볼 생각이다.