[Node.js로 서버만들기] 2. 자바스크립트 기본 문법 (콜백 함수/Promise/async/await)

✅ 콜백 함수

 

콜백이란?

나중에 실행되는 코드

 

예시

1) A()라는 함수에 인자로 어떤 함수를 넣어줌.

(자바스크립트에서 함수는 '일급 객체'이므로 인자로 함수를 넣어주는 것이 가능함)

2) A 함수의 모든 명령을 실행한 후 마지막으로 넘겨 받은 인자 callback을 실행함.

➡ 이 메커니즘이 '콜백'이고, 여기서 인자로 들어가는 함수가 '콜백 함수'

💡 용어 정리 💡
일급 객체 : 다른 객체에 일반적으로 적용할 수 있는 연산을 모두 지원하는 객체
일급 객체는 다른 함수의 인자(파라미터)로 넣을 수 있고, 반환 값으로도 쓰이며, 변수 안에 넣을 수도 있음.

 

1. 비동기 처리

 

setTimeout(callback, delayTime)

: 콜백 함수와 지체할 시간을 인자로 받아, 인자로 받은 시간만큼 기다렸다가 콜백 함수를 실행하는 함수 (JS 내장함수)

 

1) 콜백 함수의 비동기 처리

/* sample 17 */
// 1번 함수
setTimeout(()=>{
    console.log('todo: First Work!');
}, 3000);

// 2번 함수
setTimeout(()=>{
    console.log('todo: Second Work!');
}, 2000);

// 출력결과
/*
todo: Second Work!
todo: First Work!
*/

- First work! 로그를 찍는 1번 함수를 먼저 호출함

- 그러나 1번 함수는 지체할 시간이 3000ms이고 2번 함수는 2000ms 이기 때문에

   1번을 기다리지 않고 2번 먼저 출력함.

자바스크립트는 이벤트 중심 언어이기 때문에
어떤 이벤트가 발생하면 그에 대한 결과가 올 때까지 기다리지 않고,
다음 이벤트를 계속해서 실행함.

 

2) 콜백 함수의 동기 처리

/* sample 18 */
// 1번 함수
setTimeout(()=>{
    setTimeout(()=>{ // 2번 함수
        console.log('todo: Second Work!');
    }, 2000);
    console.log('todo: First work!');
}, 3000);

// 출력결과
/*
todo: First work!
todo: Second Work!
*/

- 콜백함수로 2번 setTimeout()을 보냄

- 3000ms 있다가 2번 함수를 보내고, 'First work' 출력

- 2000ms 있다가 2번 함수의 'Second work' 출력

➡ 순차적으로 실행하고 싶다면, '콜백 함수'를 이용하여 비동기 작업을 동기적으로 처리해줘야함.

 

2. API vs 사용자 정의 함수

1) 사용자 정의 함수의 동기 처리

/* sample 19 */
function fakeSetTimeout(callback){
    callback();
}

// 1번
console.log(0);

// 2번
fakeSetTimeout(function(){
    console.log('Hello');
});

// 3번
console.log(1);

// 출력 결과
/*
0
Hello
1
*/

- 1번 콜스택에서 실행

- 2번 콜스택에서 실행

-3번 콜스택에서 실행

➡ 콜백 큐를 거치지 않고 동기적으로 처리됨.

 

2) API의 비동기적 처리

/* sample 20 */

// 1번
console.log(0);

// 2번
setTimeout(function(){
    console.log('Hello');
}, 0);

// 3번
console.log(1);

// 출력 결과
/*
0
1
Hello
*/

- 1번 콜스택에서 실행

- 2번은 콜백 함수이므로 콜백 큐로 들어감.

- 3번 콜스택에서 실행

- 콜스택이 비었으므로 콜백 큐에 들어간 2번 실행

 

3) 동기와 비동기

- 동기적 작업은 모두 '콜 스택'으로 들어가 처리됨.
- 비동기적 작업은 모두 '콜백 큐'에 넣고, '콜 스택'이 비어야 실행할 수 있음.

내부에서 처리되는 연산 - 동기적 처리
외부에서 처리되는 연산(서버에서 데이터 가져오기, 타이머 등의 외부 API) - 비동기적 처리

➡ 자바스크립트는 바쁜 웹 환경에서 여러 작업을 빠르게 처리하기 위해 비동기 메커니즘을 사용함!

➡ '콜백 지옥'에 빠지지 않도록 주의해야 함.

---

✅ Promise

 

Promise란?

보낸 요청에 대해 응답이 준비되었을 때 알림을 주는 역할!

 

1. 일반적인 비동기의 동기적 처리

1) 일반 비동기 함수

/* sample 21-1 */
function work(sec, callback){
    setTimeout(()=>{
        callback(new Date().toISOString());
    }, sec * 1000);
};

work(1, (result)=>{
    console.log('첫 번째 작업', result);
});

work(1, (result) =>{
    console.log('두 번째 작업', result);
});

work(1, (result) =>{
    console.log('세 번째 작업', result);
});

// 출력 결과
/*
첫 번째 작업 2022-08-18T06:06:25.739Z
두 번째 작업 2022-08-18T06:06:25.748Z
세 번째 작업 2022-08-18T06:06:25.748Z
*/

 

차례로 출력이 되긴 하지만, 모두 같은 시간에 작업이 끝남.

 

2) 동기적 처리 - 1

/* sample 21-2 */
function work(sec, callback){
    setTimeout(()=>{
        callback(new Date().toISOString());
    }, sec * 1000);
};

work(1, (result)=>{
    console.log('첫 번째 작업', result);

    work(1, (result) =>{
        console.log('두 번째 작업', result);

        work(1, (result) =>{
            console.log('세 번째 작업', result);
        });
    });
});

// 출력 결과
/*
첫 번째 작업 2022-08-18T06:14:47.375Z
두 번째 작업 2022-08-18T06:14:48.396Z
세 번째 작업 2022-08-18T06:14:49.400Z
*/

- 첫 번째 작업이 끝남.

- 1초 뒤에 두 번째 작업이 끝남.

- 1초 뒤에 세 번째 작업이 끝남.

 

3) 동기적 처리 - 2

/* sample 21-3 */
function work(sec, callback){
    setTimeout(()=>{
        callback(new Date().toISOString());
    }, sec * 1000);
};

work(1, (result)=>{
    console.log('첫 번째 작업', result);

    work(1, (result) =>{

        work(1, (result) =>{
            console.log('세 번째 작업', result);
        });

        console.log('두 번째 작업', result);
    });
});

// 출력 결과
/*
첫 번째 작업 2022-08-18T06:16:53.301Z
두 번째 작업 2022-08-18T06:16:54.322Z
세 번째 작업 2022-08-18T06:16:55.326Z
*/

 

- 비동기적으로 동작하기 때문에 결과는 위의 예제와 똑같음.

단점 : 동기적 처리로 바꾸면서 한 눈에 파악하기가 힘들어짐.

➡ 이것을 극복하기 위해 Promise 사용!

 

 

2. Promise를 사용한 동기적 처리

- '콜백 지옥'을 탈출하게 해주는 자바스크립트 API

1) Promise의 인스턴스를 반환
2) then에서 반환한 것을 받음

 

/* sample 22 */
function workP(sec){
    return new Promise((resolve, reject) => {
        // Promise 생성시 넘기는 callback = resolve, reject
        // resolve 동작 완료시 호출, 오류 났을 경우 reject
        setTimeout(() => {
            resolve(new Date().toISOString());
        }, sec * 1000);
    });
}

workP(1).then((result)=>{
    console.log('첫번째 작업', result);
    return workP(1);
}).then((result)=>{
    console.log('두번째 작업', result);
});

// 출력결과
/*
첫번째 작업 2022-08-18T06:21:16.005Z
두번째 작업 2022-08-18T06:21:17.021Z
*/

 

1) workP() 라는 함수는 new 키워드를 통해 Promise의 인스턴스를 생성하여 반환

2) Promise를 생성할 때 resolve와 reject를 넘김

3) workP()를 호출하고 반환되는 Promise의 인스턴스를 받아 resolve를 통해 받은 결과 값을 사용함.

4) then()은 Chainingd을 하여 사용함

- 첫 번째 then()에서, 두 번째 then()이 받고 싶은 결과 값을 반환

- 두 번째 then()에서, 세 번째 then()이 받고 싶은 결과 값을 반환

...

➡ 반드시 then()이 끝나고 무언가를 반환해주어야 다음 then()에서 이를 받아 무언가를 실행할 수 있음.

1. 인스턴스 - 코드에 구현된 객체가 실제 메모리에 할당된 것
2. resolve - 성공할 경우 호출 (callback 함수와 비슷함)
3. reject - 실패할 경우 호출

---

✅ async / await

 

1. async  / await이란?

Promise의 단점을 보완해주는 패턴

(비동기 코드의 겉모습과 동작을 좀 더 동기코드와 유사하게 만들어줌)

 

1) Promise를 사용한 코드

const makeRequest = () =>{
    getJSON()
    .then(data => {
        console.log(data);
        return 'done';
    });
}
makeRequest();

 

2) async / await을 사용한 코드

// ex - awync/await
const makeRequest = async() => {
    console.log(await getJSON());
    return 'done';
}
makeRequest();

 

2. async / await의 장점

1) new Promise로 Promise 객체를 선언하고 resolve, reject를 넘겨주는 부분을 숨김

2) try / catch를 통한 오류를 다룰 수 있음

3) 중첩 현상 해결 가능

/* sample 23 */
function workP(sec){
    return new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve(new Date().toISOString());
        }, sec * 1000);
    });
}

function justFunc(){
    return 'just Function';
}

async function asyncFunc(){
    return 'async Function';
}

console.log(
    justFunc(),
    asyncFunc(),
    workP()
    );

// 출력결과
// just Function Promise { 'async Function' } Promise { <pending> }

 

 

3. async / await의 사용법

 

1) async는 Promise 객체를 반환함.

➡ Promise를 사용하기 때문에 Promise 패턴에서처럼 함수를 호출할 때 then()을 사용할 수 있음.

 

2) await의 사용법

: async 키워드를 붙인 함수 안에 lock을 걸어 놓고 싶은 부분에 await를 붙이면 됨.

 

/* sample 24 */
function workP(sec){
    return new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve('workP function');
        }, sec * 1000);
    });
}

async function asyncFunc(){
    const result_workP = await workP(3);
    console.log(result_workP);
    return 'async function';
}

asyncFunc().then((result)=>{
    console.log(result);
});

// 출력 결과
/*
workP function
async function
*/

workP() 함수를 호출하는 부분에 await을 붙임

➡ 원래 workP 함수는 setTimeout() 함수를 이용했기 때문에 비동기적으로 처리됨.

➡ 그러나 await를 붙였기 때문에 workP(3) 함수가 완료되기 전까지 그 밑의 구문은 실행하지 않음.