728x90

비동기, Promise, async/await 확실히 이해하기 — 택배 배달로 비유해 보자!

자바스크립트를 공부하다 보면 꼭 마주치는 말:

비동기(Asynchronous)

그런데 도대체 “비동기”가 뭐길래 개발자들을 이토록 괴롭힐까요?
오늘은 택배 비유로 풀어보겠습니다.

동기(Synchronous)란?

→ 택배 아저씨 올 때까지 문 앞에서 꼼짝 않고 기다리는 것

  • 작업이 순서대로 하나하나 끝나야 다음으로 넘어갑니다.
  • 택배가 늦으면 다른 일은 못 하고 계속 기다림.

코드 예시

 
console.log("주문하기");
console.log("배송 도착");
console.log("택배 개봉");
 

출력:

 
주문하기
배송 도착
택배 개봉

비동기(Asynchronous)란?

→ 택배 시키고 다른 일 먼저 하다가, 택배 오면 다시 처리하는 것

  • 택배가 오는 동안 다른 일을 할 수 있어요.
  • 웹 개발에서 가장 흔한 비동기 작업: API 요청, 파일 읽기, 타이머 등

코드 예시

console.log("주문하기");
setTimeout(() => {
  console.log("배송 도착");
}, 3000);
console.log("다른 일 하기");

출력:

주문하기
다른 일 하기
(3초 후) 배송 도착

비동기 처리 방법 ① — 콜백(callback)

→ 택배기사님이 도착하면 “전화 주시라고” 부탁하는 것

  • 콜백 지옥(callback hell) 문제가 생길 수 있음.
  • 코드가 중첩되어 점점 읽기 어려워짐.

예:

setTimeout(() => {
  console.log("택배 도착!");
  setTimeout(() => {
    console.log("택배 개봉!");
  }, 1000);
}, 2000);

비동기 처리 방법 ② — Promise

→ 택배사에서 ‘배송 추적 번호’를 주는 것

  • “언젠간 올 거”라는 약속을 반환.
  • 성공(fulfilled) 또는 실패(rejected)를 알려줌.

비유

택배사가 “이 송장 번호로 배송 상황 확인하세요.”

코드:

let delivery = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("택배 도착!");
  }, 2000);
});

delivery.then((msg) => {
  console.log(msg);
});

출력:

(2초 후) 택배 도착!

비동기 처리 방법 ③ — async / await

→ 택배를 기다리긴 하되, 기다리는 동안 다른 일도 가능하고, 코드는 동기처럼 깔끔

  • async 함수는 항상 Promise를 반환.
  • await은 Promise가 끝날 때까지 기다려줌.
  • 코드가 동기처럼 읽히니 가독성이 좋음!

비유

택배기사님이 오기 전까지 다른 일하다가,
문 두드리면 바로 문 열러 가는 것

코드:

async function getDelivery() {
  console.log("주문하기");
  let result = await new Promise((resolve) => {
    setTimeout(() => {
      resolve("택배 도착!");
    }, 2000);
  });
  console.log(result);
  console.log("택배 개봉");
}

getDelivery();

출력:

주문하기
(2초 후) 택배 도착!
택배 개봉

정리

  • 동기(Sync) → 택배 올 때까지 아무것도 못함
  • 비동기(Async) → 택배 기다리면서 다른 일 가능
  • 콜백 → 택배기사님 전화
  • Promise → 송장 번호로 배송 추적
  • async/await → 깔끔하게 기다렸다 이어서 진행

자바스크립트에서 비동기 처리는 무조건 마주치게 되는 개념이에요.
헷갈릴 때는 “택배” 비유를 꼭 떠올려 보세요.
이해가 훨씬 수월해질 거예요!

혹시 더 깊이 다루고 싶은 부분이나, 다른 비유로 설명해보고 싶으신가요?

728x90

'개발자 성장 로드맵 > 프론트엔드' 카테고리의 다른 글

Next.js 프로젝트 구조와 구성  (0) 2025.07.15
ESLint, Prettier, TypeScript 설정부터 shadcn/ui 설치까지 한 번에 끝내기  (11) 2025.07.15
Next.js 렌더링 완전 정복! CSR·SSR·SSG·ISR을 카페 배달로 쉽게 이해하기  (2) 2025.07.14
nvm 설치와 자바스크립트 얕은 복사 vs 깊은 복사 완전 정리  (6) 2025.07.11
모듈 번들러(Webpack) 완전 정리  (2) 2025.07.11
728x90

1. script 로드 해결 방법

HTML에서 script를 언제, 어떻게 불러오냐에 따라 페이지 성능과 동작이 크게 달라져.
아래처럼 크게 3가지 방식이 있어.

1) body 최하단에 script 넣기

  • HTML 태그들 다 그린 후 JS 실행
  • 가장 기본적이고 안전한 방식
  • 단점: JS가 많아지면 로드 느림
  • 예시:
<body>
  <h1>Hello</h1>
  <script src="main.js"></script>
</body>

2) load 이벤트 리스너 등록

  • window.onload → 모든 리소스(img, css 등) 로딩 완료 후 실행
window.onload = function() {
  console.log("모든 리소스 로드 완료!");
};
 
  • DOMContentLoaded → HTML 파싱 완료 시점에 실행 (이미지, css는 기다리지 않음)
document.addEventListener("DOMContentLoaded", function() {
  console.log("DOM 준비 완료!");
});
  • 비유:
    • window.onload → 집 짓고 가구까지 다 들어온 후 집에 들어감
    • DOMContentLoaded → 집은 다 지었는데, 가구는 아직 옮기는 중

3) HTML5 script 속성

✅ defer

  • HTML 파싱과 JS 다운로드 동시에 진행
  • 단, 실행은 HTML 파싱 끝난 뒤
  • 여러 개 defer 스크립트 → 작성 순서대로 실행
  • 비유: “집 짓는 동안 가구 주문해 두고, 집 완공되면 가구 설치 시작”

예시:

<script src="main.js" async></script>

✅ async

  • HTML 파싱과 JS 다운로드 동시에 진행
  • 다운로드가 끝난 순간 바로 실행 (HTML 파싱 멈춤)
  • 여러 개 async 스크립트 → 실행 순서 보장 안 됨
  • 비유: “누가 먼저 도착하든 바로 가구 들이밀기 → 순서 뒤죽박죽”

예시:

<script src="main.js" async></script>

✅ defer vs async 한눈에 정리

속성 다운로드 실행 시점 순서 보장
defer HTML 파싱 중 HTML 파싱 끝나고 O
async HTML 파싱 중 다운로드 끝나면 즉시 X
 

2. this 개념 정리

this는 “누가 불렀냐”에 따라 달라진다

  • 기본적으로 this는 호출하는 주체를 가리킨다
  • this가 가리키는 대상은 상황별로 달라진다

✅ this의 여러 예시

1) 전역에서 this

console.log(this); // window (브라우저 기준)
  • 비유: “밖에서 혼자 말하면, 집 전체(윈도우)가 들음”

2) 함수 안에서 this

  • 엄격 모드(use strict) 여부에 따라 다름
    • strict 모드 → undefined
    • 비 strict 모드 → window
function foo() {
  console.log(this);
}

foo(); // window (비 strict)

3) 객체의 메서드에서 this

  • this → 해당 객체
const user = {
  name: "Alice",
  sayHello: function() {
    console.log(this.name);
  }
};

user.sayHello(); // Alice

4) 이벤트 리스너에서 this

  • 기본적으로 this → 이벤트가 걸린 HTML 요소
<button id="btn">클릭</button>

<script>
  document.getElementById("btn").addEventListener("click", function() {
    console.log(this); // <button> 요소
  });
</script>

5) 화살표 함수에서 this

  • 화살표 함수는 자신만의 this를 가지지 않는다 → 바깥 스코프의 this를 물려받음
const user = {
  name: "Alice",
  sayHello: () => {
    console.log(this.name);
  }
};

user.sayHello(); // undefined
  • 비유: 화살표 함수는 “나는 this를 새로 안 만들고, 부모님 따라갈래~”

✅ this의 디폴트는 window

  • 전역에서 this는 window
  • 하지만 함수나 객체 안에서 상황에 따라 달라지니 주의!

✅ 마무리

script 로딩 전략을 잘 선택하면 웹페이지 속도가 달라지고,
this 개념을 이해해야 자바스크립트를 제대로 다룰 수 있다!
defer와 async, this는 프런트엔드 개발 필수 개념이니 꼭 정리해 두자.

728x90

'개발자 성장 로드맵 > 프론트엔드' 카테고리의 다른 글

NPM 기초 완전 정리  (2) 2025.07.11
자바스크립트 모듈 시스템 완전 정리  (2) 2025.07.11
Front-End 개발 필수: 이벤트 버블링·캡처링, JS 모듈, 배열 메서드 총정리  (1) 2025.07.11
DOM + BOM 구조 설명  (0) 2025.07.10
프론트엔드 개발자 입문 로드맵  (2) 2025.06.21

+ Recent posts

티스토리툴바