자바스크립트 기본 개념 : "async () => {}" "Promise, resolve"

const 함수명 = async () => {

             ...........

........................

             const 변수명 = await fetch(변수명);

}

 

데이터처리, api 요청하는 부분을 위와 같은 식으로 표현하는 경우가 많다. 

대충은 무슨 뜻인지 알겠지만 벡앤드 개발자인 나에게는 문법이 익숙치 않아서 하나하나 파헤쳐서 공부해 보았다. 

관련내용을 공유하려고 한다. 

 

**위의 함수는 비동기 화살표 함수로 선언된 형태.

1. async 키워드: 함수 내부에서 await를 사용할 수 있도록 만듦. 즉, 비동기 처리를 위한 함수임.

    2. await은 Async 사용시 같이 사용되는 키워드다. 해당 줄에서 실행이 멈췄다가 Promise(비동기 작업)가 완료되면 다음 코드로 넘어가게 한다. 

 

**사용 예시

✅ 일반적인 화살표 함수

const myFunction = () => {
  console.log("Hello, World!")
}
myFunction()

 

 

➡️ myFunction은 단순한 화살표 함수.

 

✅ 비동기 화살표 함수 (async 추가)

const fetchData = async () => {
  const response = await fetch("https://api.example.com/data")
  const data = await response.json()
  console.log(data)
}
fetchData()

➡️ fetchData 함수는 async를 사용하여 await fetch(...)를 실행할 수 있음.

 

 

 ** await의 핵심 역할

✅ Promise의 결과를 기다려서 변수에 저장한다.
✅ 비동기 코드를 동기 코드처럼 읽기 쉽게 만든다.
✅ then() 체이닝 없이 직관적인 코드를 작성할 수 있다.

---

🔹 await을 사용하지 않는 경우

만약 await을 사용하지 않으면, 아래처럼 then()을 사용해야 한다.

const fetchData = () => {
  fetch("https://api.example.com/data")
    .then((response) => response.json())
    .then((data) => console.log(data))
}

fetchData()​

 

👆 이전 방식 (Promise .then())은 코드가 중첩되면서 가독성이 떨어진다.

---

🔹 코드예제를 좀 더 살펴보면

const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms))

const asyncFunction = async () => {
  console.log("3초 대기 중...")
  await delay(3000) // 3초 동안 기다림
  console.log("완료!")
}

asyncFunction()

📌 실행 흐름

1. "3초 대기 중..." 출력
2. 3초 동안 기다림 (await delay(3000))
3. "완료!" 출력

• new Promise(...)
  • 새로운 Promise 객체를 생성.
  • Promise는 비동기 작업이 끝나면 resolve 또는 reject를 호출하는 방식으로 동작함.
• (resolve) => { ... }
  • Promise 생성자의 콜백 함수.
  • resolve는 Promise를 성공 상태(fulfilled) 로 변경하는 함수.
• setTimeout(resolve, 1000)
  • 1000ms(= 1초) 후 resolve()가 실행됨.
  • 즉, 이 Promise는 1초 뒤에 자동으로 완료(fulfilled) 됨.

---

🔹 실전 활용 예시

 

1. API 호출 전 딜레이 추가

const fetchData = async () => {
  console.log("API 호출 전 2초 기다림...")
  await new Promise((resolve) => setTimeout(resolve, 2000))
  console.log("API 호출 시작!")
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1")
  const data = await response.json()
  console.log("데이터:", data)
}
fetchData()

 

• API 서버 부담을 줄이기 위해 딜레이 추가
• "API 호출 전 2초 기다림..." → 2초 후 → API 요청 실행

 

 

 

2. 로딩 화면 추가

• 1.5초 동안 "로딩 중..." 표시 후 데이터를 화면에 표시하는 UI 효과 추가 가능.

const loadData = async () => {
  console.log("데이터 로딩 중...")
  await new Promise((resolve) => setTimeout(resolve, 1500))
  console.log("로딩 완료! 데이터 표시")
}
loadData()

 

*** resolve()

✅ resolve(value)는 Promise를 성공 상태로 변경하고, 결과를 전달하는 함수다.

👉 "작업이 끝났어! 여기 결과 가져가!" 라고 알려주는 역할.

tsx

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("✅ 성공했어!") // 2초 후에 성공 메시지 전달
  }, 2000)
})

myPromise.then((result) => {
  console.log(result) // 2초 후: ✅ 성공했어!
})

🔹 설명

1. Promise 생성
   • 2초 후에 resolve("✅ 성공했어!") 실행됨.
2. .then() 사용
   • resolve()가 호출되면 .then() 안의 코드가 실행됨.

---

4. Promise의 동작 방식

Promise의 상태는 3가지가 있다.

상태설명

pending	대기 중 (아직 작업이 끝나지 않음)
fulfilled	성공적으로 완료됨 (resolve 호출됨)
rejected	실패함 (reject 호출됨)

 

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("🎉 성공!")
  }, 3000)
})

console.log(myPromise) // Promise { <pending> } (3초 동안 대기)

 

 

처음에는 pending 상태 → 3초 후에 fulfilled 상태가 됨.

---

5. reject() (실패 처리)

비동기 작업이 실패했을 때 reject()를 호출하면 에러를 처리할 수 있다.

 

const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms))

const asyncFunction = async () => {
  console.log("⏳ 2초 기다리는 중...")
  await delay(2000) // 2초 대기
  console.log("✅ 완료!")
}

asyncFunction()

• reject("❌ 실패했어!")를 호출하면 .catch()에서 에러를 처리함.

---

6. async/await와 Promise

✅ await를 사용하면 Promise의 결과를 쉽게 받을 수 있다.

 

🔹 최종 정리

개념설명

Promise	비동기 작업을 다루는 객체 (결과가 나올 때까지 기다릴 수 있음)
resolve(value)	Promise가 성공했을 때 결과를 전달
reject(error)	Promise가 실패했을 때 에러 전달
await	Promise의 결과를 쉽게 받을 수 있다.

💡 Promise는 "미래에 결과를 줄게!" 라는 약속을 하는 객체!
💡 resolve()를 호출하면 Promise가 성공적으로 끝남
💡 new를 사용하면 새로운 객체를 만들 수 있음