async, await와 비동기

async와 await이란?

async와 await는 JavaScript에서 비동기 작업(asynchronous operation)을 쉽게 처리하기 위한 문법이다.

비동기란?

서버에서 데이터를 가져오는 작업은 시간이 걸린다. 이때 비동기 처리를 하지 않으면, 이 작업이 끝날 때까지 프로그램이 멈추게 됨.
그래서 기다리면서 다른 일도 할 수 있도록 비동기 방식으로 코드를 작성합니다.

async()

const fetchData = async () => { ... }

이처럼 async를 붙이면 비동기 함수가 된다. 이 함수는 항상 Promise를 반환하고 안에서 await를 사용할 수 있게 된다.

Promise란?

지금은 결과가 없지만, 나중에 성공하거나 실패하면 그 결과를 알려주는 객체
비동기 작업의 성공/실패 결과를 담는 객체라고 생각하면 된다.

await이란?

const { data: posts, error } = await supabase.from("posts").select("*");

await는 비동기 작업(Promise) 이 끝날 때까지 기다린다.

supabase.from(...).select("*")는 서버에 요청을 보내는 작업 → 시간이 걸리는 비동기 작업이기 때문에 await가 없으면 그 결과가 도착하기 전에 다음 코드가 실행될 수도 있다.

await를 붙이면 결과가 도착할 때까지 기다렸다가 posts 변수에 데이터를 넣게됨

💡 쉽게 말하면

키워드	의미
async	비동기 함수를 선언할 때 사용
await	Promise의 결과가 올 때까지 기다림 (async 함수 안에서만 사용 가능)