Notice
Recent Posts
Recent Comments
Link
«   2025/07   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Archives
Today
Total
관리 메뉴

ddodoi 님의 블로그

9주차-파트01: Node.js의 비동기 처리 방식 본문

웹풀스택 일일정리

9주차-파트01: Node.js의 비동기 처리 방식

ddodoi 2024. 10. 14. 15:45

CHAPTER 1. Node.js 비동기 처리 방식

✔️논블러킹 I/O => 한명이 일을 하는데 요리를 순차적으로 X, 중간중간 비는 시간이 있으면 다른 요리를 한다.

ex) 라면 1개 (물 끓는 시간 5분), 볶음밥(완성 5분)

: 라면 물 끓여놓고 => 볶음밥 요리 => 라면 요리

 

[라면을 끓이는 순서]                                                                                    [라면을 끓이는 순서] 

1. 물을 끓인다 : 5분                                                                                    1. 물을 끓인다 : 5분

2. 스프를 넣는다 : 10초                                                                               2. 스프를 넣는다 : 10초

3. 면을 넣는다 : 10초                                                                                  3. 면을 넣는다 : 10초 

4. 라면을 더 끓인다 : 3분                                                                            4. 라면을 더 끓인다 : 3분

4. 파를 넣는다 : 10초                                                                                  4. 파를 넣는다 : 10초

5. 먹는다 : 완성                                                                                           5. 먹는다 : 완성

-현실(위 순서를 순차적으로 해내야 하기 때문에 8분 30초)                         -5분

 

 

 

동기 vs 비동기

  • 동기(Synchronous): A 작업이 끝난 후에야 B 작업이 시작됩니다. 즉, 순차적으로 처리되며, 앞선 작업이 완료될 때까지 대기합니다.
  • 비동기(Asynchronous): A 작업을 시작한 후 바로 B 작업도 실행할 수 있습니다. A 작업이 끝나는 것을 기다릴 필요가 없으므로 프로그램의 흐름이 차단되지 않습니다.

 

 

- 비동기 발생-

실행되는 코드가 기다려야 하는 시간이 생긴다는 의미

ex. setTimeOut(), setInterval, query()

 

 

 

✅비동기 처리

비동기가 필요 없을 때가 있다.

이전 코드들의 시간을 다 기다려준다. 순서를 맞춰서 코드를 실행하겠다.

 

1. 콜백 함수 : 할일 다하고, 이거 실행해줘(=순서 맞춰서 이걸 뒤에 실행해달라고)

2. promise(resolve, reject)

3. then & catch

4. ES2017 promise => async & await

 

 

 

 

✔️Promise 객체

비동기 작업이 끝나면 호출될 함수를 미리 등록해 놓는다.

매개변수로 함수를 받으며 일을 다 하면 무조건 콜백함수 resolve() 또는 reject() 둘 중 하나를 호출한다.

작업 성공시 -> resolve(결과)

작업 실패시 -> reject (에러)

 

then() : promise의 기본 메서드로 promise가 일을 다하고 호출해야하는 함수이다.

작업 성공시 then()의 첫번째 콜백함수 값으로 들어가 실행된다.

//Promise "객체" : 무조건 약속을 지키는 친구

let promise = new Promise(function(resolve, reject){  //매개변수로 함수를 받는다
//executor : 이 친구가 할 작업
setTimeout(() => resolve("완료!"), 3000);
});  //친구소환

//promise의 기본 메소드 : promise가 작업을 다하고 (= 약속 다 지키고) 호출해야하는 함수
promise.then(
    function(result){
        console.log(result);
    },
    function(error){
        console.log(error);
    }
);

 

 

 

 

✔️Promise chaining

여러 개의 비동기 작업을 순차적으로 실행하기 위해 .then() 메서드를 연속적으로 연결하는 방식이다. 각 then() 블록은 이전 작업의 결과를 받아 다음 작업으로 넘겨주며, 이러한 방식으로 비동기 코드가 깔끔하게 작성된다.

let promise = new Promise(function(resolve, reject) {
    // 3초 후에 "완료!"를 resolve로 전달
    setTimeout(() => resolve("완료!"), 3000);
}).then(
    function (result) {
        console.log(result); // "완료!" 출력
        return result; // 다음 then()에 "완료!" 전달
    },
    function (error) {
        // 첫 번째 then()의 실패 처리 (호출되지 않음)
    }
).then(
    function (result) {
        console.log(result); // "완료!" 출력
        return result + "!!!!"; // 다음 then()에 "완료!!!!" 전달
    },
    function (error) {
        // 두 번째 then()의 실패 처리 (호출되지 않음)
    }
).then(
    function (result) {
        console.log(result); // "완료!!!!" 출력
        return result + "!!!!"; // 최종 결과 "완료!!!!!!!!" 반환
    },
    function (error) {
        // 세 번째 then()의 실패 처리 (호출되지 않음)
    }
);

 

 

 

 

✔️async

  • async 함수는 자동으로 Promise를 반환한다.
  • ____ function f(){} : 일반함수
    async function f(){} : async 함수  -> Promise 객체 반환
//async-await : Promise 객체를 좀 더 쉽고 편하게 사용 문법
//즉, 비동기 처리가 쉽다!

async function f(){
    return 7;     //Promise 객체를 반환 중
    //async 함수는 무조건 Promise 객체를 반환
    // -  만약 반환값이 Promise가 아니면, Promise.resolve()
}

f().then(
    function(result){
        console.log("promise resolve : ", result);
    },
    function(error){
        console.log("promise reject : ", error);
    }
);

 

 

 

✔️await

  • async 함수는 자동으로 Promise를 반환한다.
  • await 키워드는 Promise가 완료될 때까지 기다리며, 해당 비동기 작업이 완료된 후에 다음 코드가 실행된다.
  • await을 사용하면 비동기 코드가 마치 동기 코드처럼 작성된다.
//async의 두번째 기능
//Promise 객체가 일이 끝날 때까지 기다릴 수 있는
//공간을 제공한다!

async function f(){
    let promise = new Promise(function(resolve, reject){  //매개변수로 함수를 받는다
        setTimeout(() => resolve("완료!"), 3000);  //3초 후 "완료!"를 resolve로 전달   
    });

    let result = await promise;
    //promise 객체가 일 다 할때까지 기다려줌

    console.log(result);
}

f();  //내부적으로 Promise가 반환된다