[박승훈] 챕터 9: 비동기 프로그래밍 패턴

챕터_9/박승훈.md

@@ -0,0 +1,203 @@
+## 비동기 프로그래밍
+
+- 자바스크립트에서 동기 코드는 블로킹 방식으로 실행
+- 코드가 순서대로 한 번에 한 문장씩 실행됨을 의미
+- 비동기 코드는 논블로킹 방식으로 실행
+- 코드의 나머지 부분을 차단하지 않고 오래 실행되는 작업을 수행할 때 유용
+  - 네트워크 요청, 파일 시스템 액세스, 데이터베이스 쿼리 등
+
+
+## 콜백 함수
+
+- 비동기 코드를 작성하기 위한 원시적인 방법
+- 다른 함수의 인수로 전달되어 비동기 작업 이후 실행
+- 주요 단점으로는 '콜백 지옥'이 발생할 수 있음
+
+
+## 프로미스 패턴
+
+> 자바스크립트에서 비동기 작업을 처리하는 더 나은 방법
+
+- 프로미스는 비동기 작업의 결과를 나타내는 객체
+  - 대기(pending), 이행(fulfilled), 거부(rejected) 상태를 가짐
+
+
+### 프로미스 생성
+
+- Promise 생성자를 사용하여 프로미스 객체를 생성
+  - 함수를 인수로 받으며 함수는 resolve와 reject를 인수로 받음
+  - `new Promise((resolve, reject) => { ... })`
+  - resolve: 프로미스가 성공적으로 완료되었을 때 호출
+  - reject: 프로미스가 실패했을 때 호출
+- 호출자는 반환된 Promise 객체의 .then 및 .catch 메서드를 호출하여 요청 결과 처리
+
+
+### 프로미스의 장점
+
+- 콜백보다 체계적이고 가독성 높은 비동기 처리 가능
+- 콜백 지옥을 방지할 수 있음
+
+
+### 프로미스 병렬 처리
+
+> Promise.all 메서드를 사용하여 여러 프로미스를 병렬로 처리
+
+```javascript
+Promise.all([promise1, promise2, promise3])
+  .then((values) => {
+    console.log(values);
+  });
+```
+
+
+### 프로미스 순차 실행
+
+> Promise.resolve 메서드를 사용하여 프로미스를 순차적으로 실행
+
+```javascript
+Promise.resolve()
+  .then(() => promise1())
+  .then(() => promise2())
+  .then(() => promise3())
+  .then(() => console.log('All done!'));
+```
+
+
+### 프로미스 메모이제이션
+
+> 프로미스를 캐시하여 중복 호출을 방지
+
+```javascript
+const cache = new Map();
+
+function memoizedFunc(url) {
+  if (cache.has(url)) {
+    return cache.get(url);
+  }
+
+  return new Promise((resolve, reject) => {
+    fetch(url)
+      .then((response) => response.json())
+      .then((data) => {
+        cache.set(url, data);
+        resolve(data);
+      })
+      .catch(reject);
+  });
+}
+```
+
+
+### 프로미스 데코레이터
+
+> 고차 함수를 사용하여 프로미스를 래핑
+
+```javascript
+function logger(fn) {
+  return function(...args) {
+    console.log('Function called with', args);
+    return fn(...args).then((result) => {
+      console.log('Function returned', result);
+      return result;
+    });
+  };
+}
+
+const makeRequestWithLogger = logger(makeRequest);
+
+makeRequestWithLogger('http://example.com')
+  .then((data) => console.log(data));
+  .catch((error) => console.error(error));
+```
+
+
+## async/await 패턴
+
+> 비동기 코드를 마치 동기 코드처럼 작성할 수 있게 해주는 최신 문법
+
+- async/await는 프로미스를 기반으로 동작
+- async 함수는 항상 Promise를 반환
+
+
+### 비동기 반복
+
+> for-await-of 반복문을 사용하여 비동기 반복 가능 객체를 순회
+
+```javascript
+async function* createAsyncIterable() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+async function main() {
+  for await (const value of createAsyncIterable()) {
+    console.log(value);
+  }
+}
+```
+
+
+### 비동기 병렬
+
+> Promise.all 메서드를 사용하여 여러 프로미스를 병렬로 처리
+
+```javascript
+async function main() {
+  const [result1, result2, result3] = await Promise.all([
+    promise1(),
+    promise2(),
+    promise3(),
+  ]);
+
+  console.log(result1, result2, result3);
+}
+```
+
+
+### 비동기 순차 실행
+
+> Promise.resolve 메서드를 사용하여 프로미스를 순차적으로 실행
+
+```javascript
+async function main() {
+  let result = await Promise.resolve();
+
+  result = await promise1();
+  result = await promise2();
+  result = await promise3();
+
+  console.log(result);
+}
+```
+
+
+### async/await 데코레이터
+
+> 고차 함수를 사용하여 async 함수를 래핑
+
+사용법이 python이나 java의 데코레이터와 비슷해서 신기해서 가져왔어요.
+
+```javascript
+function asyncLogger(fn) {
+  return async function(...args) {
+    console.log('Function called with', args);
+    const result = await fn(...args);
+    console.log('Function returned', result);
+    return result;
+  };
+}
+
+@asyncLogger
+async function main() {
+  const data = await makeRequest('http://example.com');
+  console.log(data);
+}
+```
+
+
+## 총평
+
+이번 장은 비동기 프로그래밍에 대해 알아봤어요. 콜백함수부터 프로미스, async-await 등 자바스크립트의 비동기 처리 방식은 3가지의 비교가 정형화되어 있어서 어느 정도 알고 있던 내용인 것 같네요. 어느 정도 비동기에 대해서 알게된 이후엔 Promise.all, Promise.allSettled, Promise.race 등 다양한 메서드들을 접할 수 있었고, 이번 책의 내용에서 소개되었을 때 보다 쉽게 짚고 넘어갈 수 있었어요.
+
+반면 내용에서 decorator를 사용하여 래핑하는 방법이나 메모이제이션 방법 등은 신기했어요. 생각해보지 않거나 잘 활용하지 않아본 활용 사례들도 몇몇 있었고요. 그래서 눈길이 가는 예시들만 정리해보게 되었습니다. 이번 장을 통해 비동기 프로그래밍에 대해 전체적으로 다시 한 번 정리할 수 있었던 것 같아서 좋았어요.