자바스크립트의 비동기 처리

자바스크립트에서 비동기 처리는 매우 중요한 개념입니다. 이 글에서는 동기와 비동기의 차이, 그리고 자바스크립트에서 비동기 처리가 왜 중요한지 알아보겠습니다.

1. 동기 vs 비동기

동기 (Synchronous)

동기 처리는 코드가 순차적으로 실행되는 방식입니다. 한 작업이 완료될 때까지 다음 작업은 기다려야 합니다.

console.log("첫 번째");
console.log("두 번째");
console.log("세 번째");

// 출력:
// 첫 번째
// 두 번째
// 세 번째

비동기 (Asynchronous)

비동기 처리는 여러 작업을 동시에 처리할 수 있는 방식입니다. 한 작업이 완료되기를 기다리지 않고 다음 작업을 시작할 수 있습니다.

console.log("시작");

setTimeout(() => {
  console.log("2초 후 실행");
}, 2000);

console.log("끝");

// 출력:
// 시작
// 끝
// (2초 후) 2초 후 실행

2. 왜 비동기 처리가 중요한가?

1. 성능 향상: 여러 작업을 동시에 처리할 수 있어 전체 실행 시간을 단축시킵니다.
2. 사용자 경험 개선: 긴 작업을 기다리는 동안에도 다른 기능을 사용할 수 있습니다.
3. 리소스 효율성: 시스템 리소스를 더 효율적으로 사용할 수 있습니다.

3. 비동기 처리의 예시

예시) 파일 읽기

const fs = require('fs');

// 동기적 파일 읽기
console.log('시작');
const data = fs.readFileSync('file.txt', 'utf8');
console.log(data);
console.log('끝');

// 비동기적 파일 읽기
console.log('시작');
fs.readFile('file.txt', 'utf8', (err, data) => {
  if (err) throw err;
  console.log(data);
});
console.log('끝');

비동기 방식에서는 파일을 읽는 동안 다른 작업을 수행할 수 있습니다.

🔗출처 : 러닝스쿨! 자바스크립트 첫걸음 book