동기 비동기

자바스크립트에서 코드는 동기나 비동기로 처리가 된다

파일을 4개를 순서대로 읽어 콘솔 로그로 출력하고 싶다.

그럼 어떻게 처리를 해야 할까?

 

1) 우선 비동기 함수로 작성한 코드이다 해당 코드를 실행하면, (readFile 함수는 비동기 함수이다)

const fs = require('fs');

fs.readFile('./readme.txt', (err, data)=> {
    if (err){
        throw err;
    }
    console.log("1번",data.toString());
})

fs.readFile('./readme.txt', (err, data)=> {
    if (err){
        throw err;
    }
    console.log("2번",data.toString());
})

fs.readFile('./readme.txt', (err, data)=> {
    if (err){
        throw err;
    }
    console.log("3번",data.toString());
})

fs.readFile('./readme.txt', (err, data)=> {
    if (err){
        throw err;
    }
    console.log("4번",data.toString());
})

 

코드 실행 순서가 일치하지 않은 걸 확인할 수 있다.

 

원인은 비동기 함수는 코드를 백그라운드로 보낸다

백그라운드에서는 코드가 동시에 실행이 되어서 어떤 게 먼저 실행되어 테스크 큐로 보낼지는 알 수가 없다.

사진을 보면 운이 좋아 1, 2, 3, 4 번순으로 실행된 것도 있지만 아닌 것들이 대부분이다.

즉 현재 코드는 순서 보장이 되지 않는다

 

그럼 순서를 맞게 실행하려면 어떻게 해야 할까?

두 가지의 방법이 떠오른다

1) 함수를 동기로 실행시키기

2) 함수를 비동기로 실행시키되 순서를 지키기

 

출처 : node.js 교과서

위의 사진을 봐보면, 동기의 경우 순서대로 코드가 실행이 되긴 하지만 그동안 다른 작업을 수행할 수가 없다.

즉 첫 번째로 실행한 코드가 완료되어야만 두 번째 세 번째로 넘어갈 수 있는 것이다. 

 

비동기의 경우에는 첫번째로 실행한 코드는 백그라운드로 넘어가며 바로 두 번째 작업으로 수행한다

그럼 또 두 번째를 백그라운드로 보낸 후 세 번째를 수행하여 코드는 백그라운드에서 실행되어 테스크 큐로 넘어온다

 

딱 보기에도 비동기로 수행하는 게 더 효율적으로 보인다.

주의해야 할 점은 수행하는 순서를 "어떻게 컨트롤할 것이냐"이다.

 

 

서버를 동기 형식으로 코드를 작성하면 어떻게 될까

1000명의 사람이 서버에 요청을 하면 서버는 순서대로 첫 번째 요청한 사람부터 차례대로 처리를 하기에,

1000번째에 요청한 사람은 엄청나게 기다려야 할 것이다.

 

동기 형식을 사용할 때에는 주로 딱 한번만 실행하거나 초기화 작업을 할 때에는 동기 코드를 사용한다.

 

그럼 동기 함수 형식으로 파일 4개를 순서대로 읽어보자.

먼저 아래의 코드는 동기로 작성한 코드이다.

const fs = require('fs');

let data = fs.readFileSync('./readme.txt');
    console.log('1번', data.toString());

    data = fs.readFileSync('./readme.txt');
    console.log('2번', data.toString());

    data = fs.readFileSync('./readme.txt');
    console.log('3번', data.toString());

    data = fs.readFileSync('./readme.txt');
    console.log('4번', data.toString());

동기로 작성한 코드를 실행해보면 파일을 순서대로 읽는 것을 확인할 수 있다.

 

 

그럼 비동기를 유지한 채 순서대로 코드를 실행해보자.

 

 비동기 콜백 안에서 그다음 코드를 실행시켜주면 된다.

 const fs = require('fs');


fs.readFile('./readme.txt', (err, data)=> {
    if (err){
        throw err;
    }
    console.log("1번",data.toString());
    fs.readFile('./readme.txt', (err, data)=> {
        if (err){
            throw err;
        }
        console.log("2번",data.toString());
        fs.readFile('./readme.txt', (err, data)=> {
            if (err){
                throw err;
            }
            console.log("3번",data.toString());
            fs.readFile('./readme.txt', (err, data)=> {
                if (err){
                    throw err;
                }
                console.log("4번",data.toString());
            });
        });
    });
});

비동기를 유지한 채 파일을 순서대로 읽는 데에 성공을 하였다.

 

다만 해당 코드는 소위 "콜백 지옥"이라는 것에 빠지게 된다.

코드가 계속 안쪽으로 파고드는 현상이다.

 

그럼 코드가 조금 더 보기 좋게 Promise 사용하여 then을 사용해보자.

const fs = require('fs').promises;

fs.readFile('./readme.txt')
    .then((data) => {
        console.log('1번', data.toString());
        return fs.readFile('./readme.txt');
    })
    .then((data) => {
        console.log('2번', data.toString());
        return fs.readFile('./readme.txt');
    })
    .then((data) => {
        console.log('3번', data.toString());
        return fs.readFile('./readme.txt');
    })
    .then((data) => {
        console.log('4번', data.toString());
        return fs.readFile('./readme.txt');
    })
    .catch((err) => {
        throw err;
    });

Promise를 사용하여 비동기를 유지한 채 파일을 순서대로, 콜백 지옥에 안 걸리고 파일을 순서대로 읽었다.

 

위의 코드를 조금 더 깔끔하게 사용하고 싶으면 async await을 사용하면 된다

const fs = require('fs').promises;

async function main(){
    let data = await fs.readFile('./readme.txt');
    console.log('1번', data.toString());
    data = await fs.readFile('./readme.txt');
    console.log('2번', data.toString());
    data = await fs.readFile('./readme.txt');
    console.log('3번', data.toString());
    data = await fs.readFile('./readme.txt');
    console.log('4번', data.toString());
    data = await fs.readFile('./readme.txt');
}

main();

이렇게 하여 비동기를 유지한 채 코드는 순서대로 조금 더 깔끔한 코드로 파일 4개를 차례대로 읽었다.