Create 상범.md (#77)

챕터_9/상범.md

@@ -0,0 +1,60 @@
+# 9장 비동기 프로그래밍 패턴
+
+## 콜백함수
+다른 함수에 인수로서 전달되어 비동기 작업이 완료된 후 실행
+
+단점 : 중첩된 콜백구조로 인해 코드 가독성과 유지보수성이 크게 저하될 수 있음
+
+```js
+// 콜백이 동기적 흐름처럼 보일 수 있지만 비동기적으로 실행됨
+function fetchData(callback) {
+  console.log('Fetching data...');
+  setTimeout(() => {
+    callback('Data received!');
+  }, 1000); // 비동기 작업
+}
+
+console.log('Start');
+fetchData((data) => {
+  console.log(data); // 나중에 실행됨 (비동기)
+});
+console.log('End');
+// Start
+// Fetching data...
+// End
+// Data received!
+```
+
+## 프로미스 패턴
+콜백보다 체계적이고 가독성이 높은 방법으로 비동기 작업 처리 가능, 이해하기 쉽고 유지보수성 높은 코드 작성 가능
+
+## async/await 패턴
+비동기 코드를 마치 동기 코드처럼 작성할 수 있게 도와주는 자바스크립트 기능
+
+
+```js
+function fetchData() {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve('Data received!');
+    }, 1000);
+  });
+}
+
+(async () => {
+  console.log('Start');
+  const data = await fetchData(); // 비동기 작업 대기
+  console.log(data);
+  console.log('End');
+})();
+
+// Start
+// Data received!
+// End
+```
+
+## async/await 데코레이터
+- 아직 실험적 기능지만 개발환경에선 사용 가능 (타입스크립트나 바벨 플러그인 쓰면 적용가능)
+
+> 데코레이터는 HOC와 비슷해서 꺼려짐
+