[javascript] 자바스크립트의 비동기 제어와 모듈 로딩

08 Dec 2023

javascript

자바스크립트는 비동기 이벤트를 처리하는 데 강점을 가지고 있습니다. 이러한 특성은 웹 애플리케이션에서 사용자 경험을 향상시키는 데 도움이 됩니다. 또한, 모듈화를 통해 코드를 조직화하고 유지보수성을 향상시킬 수 있습니다.

비동기 제어

자바스크립트에서 비동기 작업을 처리하는 방법으로는 콜백(callbacks), 프로미스(promises), async/await가 있습니다.

콜백(callbacks)

콜백은 가장 기본적인 비동기 제어 방식입니다. 함수의 실행이 완료되면 콜백 함수가 호출되어 추가적인 작업을 수행합니다.

function fetchData(callback) {
  setTimeout(() => {
    const data = 'some data';
    callback(data);
  }, 1000);
}

fetchData((data) => {
  console.log(data);
});

프로미스(promises)

프로미스는 ES6에서 추가된 개념으로, 비동기 작업의 성공 또는 실패를 다루기 쉽게 해줍니다.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const error = false;
      if (!error) {
        resolve('some data');
      } else {
        reject('error occurred');
      }
    }, 1000);
  });
}

fetchData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.log(error);
  });

async/await

async/await는 ES7에서 추가된 문법으로, 프로미스를 더욱 간결하고 명확하게 다룰 수 있게 해줍니다.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

모듈 로딩

모듈을 사용하면 코드를 여러 파일로 나누고, 재사용 가능한 코드 단위로 만들 수 있습니다.

// math.js
export function add(a, b) {
  return a + b;
}

// main.js
import { add } from './math';
console.log(add(3, 5)); // 8

모듈 로딩은 브라우저에서는 스크립트 태그를 이용하여, Node.js 환경에서는 require 함수나 import 구문을 사용하여 처리할 수 있습니다.

자바스크립트의 비동기 제어와 모듈 로딩을 잘 활용하면 효율적이고 유연한 코드를 작성할 수 있습니다.

MDN Web Docs - 비동기 프로그래밍