2026.03.16

[JS 기초] async / await

JavaScript에서 비동기 코드를 더 쉽게 작성할 수 있도록 도와주는 async / await 문법을 설명합니다.

async

await

fetch

javascript

js기초

async / await ⚡

JavaScript에서 서버 데이터를 가져올 때
fetch를 많이 사용합니다.

하지만 fetch 코드를 작성하다 보면
then이 계속 이어지는 구조가 됩니다.

예

javascript

fetch("API주소")
.then(response => response.json())
.then(data => {
  console.log(data);
});

이 방식은 코드가 길어지면
가독성이 떨어질 수 있습니다.

그래서 JavaScript에는
비동기 코드를 더 쉽게 작성하는 문법이 있습니다.

바로 async / await 입니다.

주요 포인트 Top3

# async

함수 앞에 붙여 비동기 함수를 만듭니다.

# await

비동기 작업이 끝날 때까지 기다립니다.

# 코드 가독성

then 대신 사용하여 코드를 읽기 쉽게 만듭니다.

01. async란 무엇인가

async는 비동기 함수를 선언할 때 사용하는 키워드입니다.

javascript

async function loadData(){
 
}

또는

javascript

const loadData = async () => {
 
}

async가 붙은 함수는
비동기 작업을 처리할 수 있는 함수가 됩니다.

02. await란 무엇인가

await는 비동기 작업이 끝날 때까지 기다리는 키워드입니다.

javascript

await fetch("API주소");

즉

code

서버 요청
→ 응답 올 때까지 기다림
→ 다음 코드 실행

이 흐름이 됩니다.

03. async / await 기본 구조

javascript

const loadData = async () => {
 
  const response = await fetch("API주소");
 
  const data = await response.json();
 
  console.log(data);
 
};

실행 흐름

code

서버 요청
→ 데이터 응답
→ JSON 변환
→ 데이터 사용

04. then 방식과 비교

then 방식

javascript

fetch("API주소")
.then(response => response.json())
.then(data => {
  console.log(data);
});

async / await 방식

javascript

const loadData = async () => {
 
  const response = await fetch("API주소");
  const data = await response.json();
 
  console.log(data);
 
};

차이점

code

then → 함수가 계속 이어짐
async/await → 일반 코드처럼 읽힘

그래서 async / await가 가독성이 더 좋습니다.

05. 실제 웹 개발 예시

예를 들어
게시글 데이터를 가져오는 코드

javascript

const loadPosts = async () => {
 
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
 
  const posts = await response.json();
 
  console.log(posts);
 
};
 
loadPosts();

이 코드는

code

게시글 데이터 요청
→ 서버 응답
→ JSON 변환
→ 데이터 출력

을 수행합니다.

06. async / await 사용 규칙

await는 반드시 async 함수 안에서 사용해야 합니다.

잘못된 예

javascript

await fetch("API주소");

올바른 예

javascript

const loadData = async () => {
 
  const data = await fetch("API주소");
 
};

GOYO.’s Tip 💡

async / await는
fetch와 거의 항상 같이 사용됩니다.

즉 실제 코드 구조는 보통 이렇게 됩니다.

code

async 함수 만들기
↓
fetch 요청
↓
await로 응답 기다림
↓
JSON 변환
↓
데이터 사용

마무리 🎯

async / await는
JavaScript에서 비동기 코드를 더 쉽게 작성하는 문법입니다.

특히

code

fetch
서버 요청
API 데이터 처리

같은 작업에서
매우 자주 사용됩니다.

목록으로 가기

이전 클래스[JS 기초] 서버 데이터 요청 fetch 다음 클래스[JS 기초] try / catch / finally

다음 클래스

javascript