프로그래밍/Node.js

[Node.js 강의 시리즈] 14강 - 비동기 프로그래밍 심화

월횽 2024. 7. 11. 06:30
728x90
반응형
SMALL

비동기 프로그래밍에서 콜백 함수의 심화 개념을 이해하고, 콜백 지옥 문제와 이를 해결하는 방법을 학습한다.

 

 

 

 

 

1. 콜백 함수 심화

 

콜백 함수란?

· 콜백 함수는 다른 함수에 인수로 전달되는 함수로, 특정 작업이 완료된 후 호출된다.
· 비동기 작업을 처리할 때 주로 사용된다.

728x90

콜백 함수의 구조

· 콜백 함수는 주로 비동기 작업의 결과를 처리하는 데 사용된다.
· 비동기 함수는 첫 번째 인수로 에러 객체를, 두 번째 인수로 결과 데이터를 전달하는 콜백 함수를 호출한다.

function asyncOperation(callback) {
  // 비동기 작업 수행
  setTimeout(() => {
    const result = 'Operation complete';
    callback(null, result); // 에러 객체는 null, 결과 데이터는 result
  }, 1000);
}

asyncOperation((err, data) => {
  if (err) {
    console.error('Error:', err);
  } else {
    console.log('Result:', data);
  }
});

 

사용 예제: 파일 읽기

· Node.js의 fs 모듈을 사용하여 파일을 비동기로 읽고 콜백 함수로 처리하는 예제.

const fs = require('fs');

fs.readFile('example.txt', 'utf8', (err, data) => {
  if (err) {
    console.error('Error reading file:', err);
  } else {
    console.log('File content:', data);
  }
});

 

 

 

 

 

 

2. 콜백 지옥과 이를 해결하는 방법

반응형

콜백 지옥이란?

· 콜백 지옥(callback hell)은 중첩된 콜백 함수가 많아져 코드의 가독성이 떨어지고 유지보수가 어려워지는 상황을 말한다.
· 코드가 우측으로 계속 밀려나 "피라미드" 형태를 띠는 것이 특징이다.

 

콜백 지옥 예제

const fs = require('fs');

fs.readFile('file1.txt', 'utf8', (err, data1) => {
  if (err) {
    console.error('Error reading file1:', err);
  } else {
    fs.readFile('file2.txt', 'utf8', (err, data2) => {
      if (err) {
        console.error('Error reading file2:', err);
      } else {
        fs.readFile('file3.txt', 'utf8', (err, data3) => {
          if (err) {
            console.error('Error reading file3:', err);
          } else {
            console.log('File1 content:', data1);
            console.log('File2 content:', data2);
            console.log('File3 content:', data3);
          }
        });
      }
    });
  }
});

 

 

콜백 지옥 해결 방법

SMALL

1. Named Functions (명명된 함수)

· 익명 함수 대신 명명된 함수를 사용하여 중첩을 줄이고 코드의 가독성을 높일 수 있다.

const fs = require('fs');

function readFile2(err, data1) {
  if (err) {
    console.error('Error reading file1:', err);
  } else {
    fs.readFile('file2.txt', 'utf8', readFile3);
  }
}

function readFile3(err, data2) {
  if (err) {
    console.error('Error reading file2:', err);
  } else {
    fs.readFile('file3.txt', 'utf8', readFile4);
  }
}

function readFile4(err, data3) {
  if (err) {
    console.error('Error reading file3:', err);
  } else {
    console.log('File1 content:', data1);
    console.log('File2 content:', data2);
    console.log('File3 content:', data3);
  }
}

fs.readFile('file1.txt', 'utf8', readFile2);

 

 

2. Promises (프로미스)

· 프로미스는 비동기 작업의 완료 또는 실패를 나타내는 객체로, 콜백 지옥 문제를 해결한다.

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

fs.readFile('file1.txt', 'utf8')
  .then(data1 => {
    console.log('File1 content:', data1);
    return fs.readFile('file2.txt', 'utf8');
  })
  .then(data2 => {
    console.log('File2 content:', data2);
    return fs.readFile('file3.txt', 'utf8');
  })
  .then(data3 => {
    console.log('File3 content:', data3);
  })
  .catch(err => {
    console.error('Error:', err);
  });

 

3. async/await

· async/await는 프로미스를 더 직관적이고 가독성 높게 사용할 수 있게 도와준다.

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

async function readFiles() {
  try {
    const data1 = await fs.readFile('file1.txt', 'utf8');
    console.log('File1 content:', data1);

    const data2 = await fs.readFile('file2.txt', 'utf8');
    console.log('File2 content:', data2);

    const data3 = await fs.readFile('file3.txt', 'utf8');
    console.log('File3 content:', data3);
  } catch (err) {
    console.error('Error:', err);
  }
}

readFiles();

 

 

 

 

 

 

실습: 비동기 프로그래밍 심화

 

1. 콜백 함수 사용

· 콜백 함수를 사용하여 여러 비동기 작업을 순차적으로 실행하세요.

예제

const fs = require('fs');

fs.readFile('file1.txt', 'utf8', (err, data1) => {
  if (err) {
    console.error('Error reading file1:', err);
  } else {
    console.log('File1 content:', data1);
    // 다른 비동기 작업
  }
});

 

2. 콜백 지옥 해결

· Promises 또는 async/await를 사용하여 콜백 지옥 문제를 해결하세요.

예제

// Promises 사용 예제
const fs = require('fs').promises;

fs.readFile('file1.txt', 'utf8')
  .then(data1 => {
    console.log('File1 content:', data1);
    return fs.readFile('file2.txt', 'utf8');
  })
  .then(data2 => {
    console.log('File2 content:', data2);
    return fs.readFile('file3.txt', 'utf8');
  })
  .then(data3 => {
    console.log('File3 content:', data3);
  })
  .catch(err => {
    console.error('Error:', err);
  });

// async/await 사용 예제
async function readFiles() {
  try {
    const data1 = await fs.readFile('file1.txt', 'utf8');
    console.log('File1 content:', data1);

    const data2 = await fs.readFile('file2.txt', 'utf8');
    console.log('File2 content:', data2);

    const data3 = await fs.readFile('file3.txt', 'utf8');
    console.log('File3 content:', data3);
  } catch (err) {
    console.error('Error:', err);
  }
}

readFiles();

 

 

- 이전 수업 목록

 

 

 

 

 

 

 

 

 

 

 

 

728x90
반응형
LIST