Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[박상범] 챕터 9: 비동기 프로그래밍 패턴 #77

Merged
merged 1 commit into from
Nov 25, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions 챕터_9/상범.md
Original file line number Diff line number Diff line change
@@ -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와 비슷해서 꺼려짐

Loading