프라미스 & Async Await

🤝 프라미스 (Promise) & Async_Await

프라미스와 async/await는 자바스크립트(JavaScript)와 같은 언어에서 비동기(Asynchronous) 작업을 더 쉽게 다루기 위해 사용하는 프로그래밍 패턴이자 문법입니다. 전통적인 콜백(Callback) 방식의 단점인 '콜백 헬(Callback Hell)'을 해결하고, 비동기 코드를 마치 동기 코드처럼 순차적으로 보이게 만들어 줍니다.

---

🤝 프라미스 (Promise)

프라미스는 비동기 작업의 최종 성공 또는 실패를 나타내는 객체입니다. 비동기 작업이 시작될 때 프라미스 객체가 즉시 반환되며, 이 객체는 미래의 어떤 시점에 특정 결과를 알려주겠다고 '약속(Promise)'합니다.

• 상태 (State) : `pending`(대기), `fulfilled`(성공), `rejected`(실패)의 세 가지 상태를 가집니다.
• 메서드 체이닝 : `.then()`(성공 시 실행), `.catch()`(실패 시 실행), `.finally()`(성공/실패 여부와 상관없이 실행) 메서드를 체인 형태로 연결하여, 비동기 작업의 흐름을 순차적으로 표현할 수 있습니다.

```javascript fetch('https://api.example.com/data')

 .then(response => response.json()) // 성공하면, 응답을 JSON으로 변환
 .then(data => console.log(data))   // 변환된 데이터를 출력
 .catch(error => console.error('오류 발생:', error)); // 실패하면, 에러를 출력

```

---

🚀 async / await

async/await는 프라미스를 더욱더 동기 코드처럼 보이게 만들어주는 문법적 설탕(Syntactic Sugar)입니다. `async` 키워드는 함수가 항상 프라미스를 반환하도록 만들고, `await` 키워드는 프라미스가 처리될 때까지(성공 또는 실패) 함수의 실행을 일시 중지시킵니다.

• async : 함수 선언부 앞에 붙여, 해당 함수가 비동기 함수임을 나타냅니다.
• await : `async` 함수 내에서만 사용할 수 있으며, 프라미스 앞에 붙여 해당 프라미스가 완료될 때까지 기다립니다.

```javascript async function fetchData() {

 try {
   const response = await fetch('https://api.example.com/data');
   const data = await response.json();
   console.log(data);
 } catch (error) {
   console.error('오류 발생:', error);
 }

} ``` 이 코드는 `try-catch` 구문을 사용하여, 동기적인 코드와 매우 유사한 형태로 비동기 로직과 에러 처리를 할 수 있게 해줍니다.

---

💡 개발자 핵심 Point

• `async/await`는 프라미스를 기반으로 동작합니다. `await`는 프라미스의 결과를 기다리는 역할을 합니다.
• 프라미스와 `async/await`를 사용하면, 콜백 헬 문제를 해결하고 비동기 코드의 가독성과 유지보수성을 획기적으로 향상시킬 수 있습니다.
• 현대적인 자바스크립트 개발에서 비동기 처리를 위해 프라미스와 `async/await`를 사용하는 것은 사실상의 표준입니다.