동기 / 비동기 작업

#Promise #콜백 #generator #async/await

목차

0. 기초개념

1. Javascript에서의 비동기 작업

1.1. Promise

1.1.1. Promise 만들기 #producer

1.1.2. Promise 사용하기 #consumer #후속 처리 메서드

1.2. async/await

1.3. Axios #비동기 작업의 대표적 예

1.3.1. Axios를 사용한 비동기 작업처리(Promise 활용)

1.3.2. Axios를 사용한 비동기 작업처리(async/await 활용)

2. Python에서의 비동기 작업

2.1. asyncio

---

기초개념

컴퓨터는 기본적으로 동기적으로 일을 한다. 하나의(싱글) 스레드에서 일을 전부 다 한다는 것이다. 이는 팀플에서 팀장이 자료조사, ppt 작성을 다 하는 것과 같다. 이땐 자료조사를 끝내기 전까진 ppt는 켜보지도 못한다. 이를 특정 함수가 delay가 벌어져서(처리시간이 길어서 : 자료조가사 길어져서) blocking(작업중단 : ppt작업은 시작도 못함)이 생겼다고 한다.

이는 너무 답답하다. 프로그래밍에서 한 작업이 길고, 언제 끝날지 모르면 사용자 입장에선 로딩 페이지만 멀뚱멀뚱 보고 있게되기 때문이다. 이때 비동기 처리가 사용된다.

비동기 처리를 사용할 때

- 요청한 작업이 오래 걸릴 때(회원가입시 인증메일 전송)

- 요청한 작업인 언제 끝날지 모를 때(타 서버와 데이터 통신)

---

Javascript에서의 비동기 처리

1. Promise

비동기처리를 한다는 것은 팀장이 무임승차를 하려는 팀원1한테 일을 시키는 것이다. 팀장은 자료조사를 하고, 팀원1은 ppt를 만들기로 한다. 현재 실행 태스크(자료조사)가 끝나지 않은 상태에서, 다음 태스크(ppt 작성)의 실행을 한다. 이를 위해 실행 태스크를 다른 스레드로 옮겨야(팀원1에게 일을 시켜야)한다. 그리고 팀장은 밍기적거리는 팀원1이 불안해서, ppt작성을 다한 후 보고하기로 약속(Promise) 받는다. 팀원1이 팀장한테 ppt 작성 끝냈다고 말하는게, 콜백함수가 실행되는 것이다.

Promise는 비동기 작업의 완료 또는 실패를 나타내는 개체이다. 콜백함수('executor 함수'라고 불림)를 인자로 받는다. 이는 promise가 new 키워드로 생성될 때 곧바로 실행된다. 또한 executor함수는 2개의 함수(resolve 함수와 reject 함수)를 인수로 받는다.

비동기 작업이 시작되면 Promise 객체가 반환

성공적으로 완료되면 resolve 콜백이 호출, 실패하면 reject 콜백이 호출

1.1. Promise 만들기 #producer

const myPromise = new Promise((resolve, reject) => {

// 비동기 작업 수행 코드들

if (/* 비동기 작업 성공 */) {

resolve("작업이 성공적으로 완료되었습니다."); // 성공 시

} else { /* 비동기 작업 실패 */

reject("작업이 실패했습니다."); // 실패 시

}

});

---

1.2. Promise 사용하기 #consumer #후속 처리 메서드

Promise를 사용해보자. Promise의 후속 처리 메서드를 쓰면 되는 것이다. '.then() & .catch() & .finally()'가 있으며, 이들은 콜백함수를 인자로 받는고, Promise를 반환한다.

비동기 작업이 성공했을 때 .then() 실행

비동기 작업이 실패했을 때 .catch() 실행

.finally()는 비동기 작업이 성공하든 실패하든 실행

myPromise

.then((result) => {

console.log(result); // 작업이 성공적으로 완료되었습니다.

})

.catch((error) => {

console.error(error); // 작업이 실패했습니다.

})

.finally(() => {

console.log('finally');

});

---

2. async / awiat

비동기 작업을 처리하는 Promise를 좀더 직관적으로 가독성 좋게 만든 것이다. 그러니 자연스레 Promise를 기반으로 한다.

async 함수는 항상 Promise를 반환

await 키워드는 Promise가 완료될 때까지 async 함수의 실행을 중지(다 될 때까지 기다림)

function delay(ms) {

return new Promise(resolve => {

setTimeout(resolve, ms);

});

}

async function example() {

await delay(2000); // await을 사용하여 비동기 함수 호출 : 2초 동안 대기

console.log('2초 후에 실행됨');

}

example();

---

3. Axios

비동기 작업의 대표적인 예는 '서버에서 데이터를 가져오는 작업'이다. 서버를 찍고 데이터를 가져오는 일은 얼마나 오래 걸릴지 예측하기 어렵다. 네트워크 상태와 같은 당시 상황에 영향을 받기 때문이다. axios는 이러한 일을 하는 javascript 라이브러리다. 비동기 작업은 Promise를 사용할 수도, async/await을 사용할 수도 있다고 했다. 예제 코드로 살펴보자.

---

3.1. Axios를 사용한 비동기 작업처리(Promise 활용)

// GET 요청 예제

axios.get('https://jsonplaceholder.typicode.com/posts/1') // Promise 반환

.then((response) => {

console.log('GET 성공:', response.data);

})

.catch((error) => {

console.error('GET 오류:', error);

});

---

3.2. Axios를 사용한 비동기 작업처리(async/await 활용)

// GET 요청 예제

async function getData() {

try {

const response = await axios.get('https://jsonplaceholder.typicode.com/posts/1');

console.log('GET 성공:', response.data);

} catch (error) {

console.error('GET 오류:', error);

}

}

getData();

---

2. Python에서의 비동기 작업

---

참고자료

생활코딩 : https://www.youtube.com/playlist?list=PLuHgQVnccGMBVQ4ZcIRmcOeu8uktUAbxI

이웅모 : 모던 자바스크립트 Deep Dive

앨런 : 프로그래밍에서 동기/비동기 개념에 대한 가장 직관적인 이해

드림코딩 : 자바스크립트 11, 12, 13

모던 자바스크립트 Deep Dive : 자바스크립트의 기본 개념과 동작 원리 ch45, 46