[변수미] 챕터 9: 비동기 프로그래밍 패턴

챕터_9/변수미.md

@@ -0,0 +1,76 @@
+비동기 자바스크립트 프로그래밍은 브라우저가 이벤트에 응답하여 다른 코드를 실행하는 동안, 백그라운드에서 오랜 시간이 걸리는 작업을 수행하게 해줍니다.
+
+## 9.1 비동기 프로그래밍
+
+자바스크립트에서 **동기 코드는 블로킹 방식**으로 실행됩니다.
+이는 코드가 순서대로 한 번에 한 문장씩 실행됨을 의미합니다
+
+반면에 **비동기 코드는** **논블로킹 방식**으로 실행됩니다.
+즉, 자바스크립트 엔진은 현 재 실행 중인 코드가 다른 작업을 기다리는 동안 백그라운드에서 해당 비동기 코드를 실행할 수 있습니다.
+비동기 함수를 호출하면, 함수 내부의 코드가 백그라운드에서 실행되며 호출자 에게 즉시 결과가 반환됩니다.
+
+> 비동기 코드는 오래 실행되는 작업을 수행할 때 유용합니다.
+
+동기 함수
+
+```js
+function synchronousFunction() {
+  // 동기 함수 동작
+}
+
+synchronousFunction();
+// 이 줄이 오기 전에 함수 내부의 코드를 실행
+```
+
+비동기 함수
+
+```js
+function asynchronousFunction() {
+  // 비동기 함수 동작
+}
+asynchronousFunction();
+// 함수 내부의 코드는 백그라운드에서 실행되며 // 이 줄로 제어권을 반환
+```
+
+## 9.2 배경(콜백함수)
+
+자바스크립트에서 콜백 함수는 다른 함수에 인수로서 전달되어, 비동기 작업이 완료된 후 실행됩니다.
+
+👎 '콜백 지옥'으로 불리는 상황을 초래할 수 있습니다.
+
+## 9.3 프로미스 패턴
+
+프로미스는 비동기 작업의 결과를 나타내는 객체로, pending, fulfilled, rejected의 세 가지 상태를 가질 수 있습니다
+
+```js
+function makeRequest(url) {
+	return new Promise((resolve, reject) => {
+		fetch(url)
+			•then(response => response.json()) .then(data => resolve(data))
+			.catch(error => reject(error));
+	});
+}
+
+makeRequest('http://example.com/’)
+	.then(data => console.log(data))
+	.catch(error => console.error(error));
+```
+
+👍 콜백보다 체계적이고 가독성이 높은 방법으로 비동기 작업을 처리할 수 있습니다.
+
+## 9-4 async/await 패턴
+
+비동기 코드를 마치 동기 코드처럼 작성할 수 있게 해주는 자바스크립트의 기능
+프로미스를 기반으로 구축되었으며, 비동기 코드 작업을 보다 쉽고 간결하게 만들어 줍니다.
+
+```js
+async function makeRequest() {
+  try {
+    const response = await fetch("http://example.com/");
+    const data = await response.json();
+    console.log(data);
+  } catch (error) {
+    console.error(error);
+  }
+}
+```