웹 시스템 개발 #Asynchronous Programming 중급편(1)

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다.

 

부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다.

 

 

---

Asynchronous(비동기) Programming란?

JavaScript에서 비동기(asynchronous) 프로그래밍은 중요한 개념 중 하나입니다.

 

왜냐하면 JavaScript는 기본적으로 단일 스레드(single-threaded)로 동작하기 때문에, 어떤 작업이 시간이 오래 걸린다면 그 작업이 완료될 때까지 다른 작업은 대기해야 때문입니다. 이를 해결하기 위해 자바스크립트에서 비동기 프로그래밍을 사용하게 된 것입니다.

 

비동기와 이벤트

사용자의 마우스 클릭, 키보드 입력 등과 같은 이벤트는 비동기적으로 발생합니다. 즉, 이러한 이벤트가 언제 일어날지 예측할 수 없다는 뜻입니다.

 

이러한 비동기적으로 발생하는 이벤트를 처리하기 위해 이벤트 리스너를 사용하며, 이벤트가 발생하면 콜백 함수가 호출됩니다.

 

비동기 실행 메커니즘

JavaScript는 비동기 처리를 위한 여러 가지 메커니즘을 제공합니다:

1. Callbacks: 가장 기본적인 비동기 메커니즘입니다. 특정 작업이 끝난 후에 실행될 함수를 인자로 전달합니다.
2. Promises: 콜백의 단점을 보완하기 위한 객체입니다. 비동기 작업의 성공, 실패를 더 깔끔하게 처리할 수 있습니다.
3. Async/Await: 비동기 코드를 마치 동기 코드처럼 작성할 수 있게 해주는 ES2017의 문법입니다.(다음 포스팅에서 중점적으로 다룰 기능입니다)

 

블로킹과 논블로킹

비동기 실행은 블로킹(blocking)을 피할 수 있습니다. 즉, 하나의 작업이 끝나기를 기다리지 않고 다음 작업을 수행할 수 있는 것을 뜻합니다. 작업이 끝나면, 콜백 함수나 프로미스를 통해 결과를 처리합니다.

 

대략적인 개요에 대해 먼저 알아보는 시간을 가져봤습니다. 그 이유는 비동기부터는 개념을 이해하기에 난이도가 갑자기 '팍' 오르기 때문에 흐름을 파악하고 이해하면 좋을까 싶어 적어봤습니다.

 

아래에서는 개요에서 설명한 개념들에 대해 차근차근 알아보겠습니다.

 

---

Event (Model) 예시: 버튼 클릭 이벤트

<button id="myButton">Click Me!</button>

document.getElementById('myButton').addEventListener('click', function() {
  alert('Button Clicked!');
});

위 예시에서 addEventListener 메서드를 사용해 버튼의 'click' 이벤트에 함수를 연결합니다. 이 함수는 버튼이 클릭될 때 호출됩니다.

 

element.addEventListener(event, function, useCapture);

여기서 각 매개변수의 역할은 다음과 같습니다:

1. event: 이벤트의 종류를 나타내는 문자열입니다. 이벤트는 HTML 요소에서 발생하며, 예를 들어 'click'은 클릭 이벤트를 나타냅니다.
2. function: 이벤트가 발생했을 때 실행될 함수 또는 콜백 함수입니다. 이 함수는 이벤트가 발생할 때마다 호출됩니다.
3. useCapture (선택적): 불리언 값으로, 이벤트 캡처링을 사용할지 여부를 나타냅니다. 대부분의 경우 이 값을 사용하지 않고 기본값 false를 사용합니다.

다양한 이벤트 종류를 나타내는 문자열과 간단한 설명을 표로 정리해보았습니다.

이벤트 종류	설명
'click'	요소를 클릭했을 때 발생하는 이벤트.
'mouseover'	요소에 마우스를 올렸을 때 발생하는 이벤트.
'mouseout'	요소에서 마우스를 벗어났을 때 발생하는 이벤트.
'keydown'	키보드의 키를 누를 때 발생하는 이벤트.
'keyup'	키보드의 키를 눌렀다 놓을 때 발생하는 이벤트.
'change'	입력 요소(예: input, select)의 값이 변경되었을 때 발생하는 이벤트.
'submit'	폼(form)을 제출할 때 발생하는 이벤트.
'focus'	요소가 포커스를 받았을 때 발생하는 이벤트.
'blur'	요소가 포커스를 잃었을 때 발생하는 이벤트.
'load'	웹 페이지 또는 이미지가 로드되었을 때 발생하는 이벤트.
'unload'	웹 페이지가 언로드(닫힘)될 때 발생하는 이벤트.

이것은 일부 주요한 이벤트의 목록이며, 더 많은 DOM 이벤트가 있습니다. 

DOM에 대해서는 조만간 다뤄볼 예정입니다.

 

 

---

Callback and Scope

콜백 함수는 JavaScript에서 매우 중요한 개념 중 하나입니다. 콜백 함수는 함수의 형태로 전달되고, 다른 함수에 의해 나중에 실행되는 함수입니다. 콜백 함수는 주로 비동기 작업을 처리하거나, 이벤트 처리, 데이터 요청과 같은 작업을 다룰 때 사용됩니다.

 

예를 들어, 다음은 비동기적으로 데이터를 불러오는 작업에서 콜백 함수를 사용하는 예시입니다:

function fetchData(callback) {
  setTimeout(function () {
    const data = 'This is some data from the server.';
    callback(data); // 콜백 함수 호출
  }, 1000);
}

function processData(data) {
  console.log('Data received:', data);
}

fetchData(processData); // fetchData 함수에 processData 함수를 콜백으로 전달

여기서 fetchData 함수는 비동기 작업을 수행하고, 작업이 완료되면 콜백 함수 processData를 호출하여 데이터를 처리합니다.

---

콜백 함수와 스코프는 종종 함께 사용됩니다. 콜백 함수는 자신이 정의된 스코프 밖에서도 호출될 수 있으며, 그 때에도 스코프 규칙이 적용됩니다. 이것은 클로저(Closure)라는 개념과 관련이 있으며, 스코프 체인을 통해 외부 스코프의 변수에 접근할 수 있게 합니다.

function outerFunction() {
  const outerVar = 'I am from outer function!';

  function innerFunction() {
    console.log(outerVar); // 접근 가능
  }

  return innerFunction;
}

const myInner = outerFunction();
myInner(); // "I am from outer function!" 출력

 

---

프로미스(Promise)

Promise(프로미스)는 JavaScript에서 비동기 코드를 다루는 패턴 중 하나로, ES6부터 표준으로 도입되었습니다. Promise는 비동기 작업의 결과를 다루는 객체로, 코드를 더 예측 가능하고 유지보수하기 쉽게 만들어줍니다.

 

Promise의 주요 특징과 개념은 다음과 같습니다

1. 상태(State): Promise는 세 가지 상태를 가질 수 있습니다.
   • 대기(Pending): 초기 상태로, 비동기 작업이 아직 완료되지 않은 상태입니다.
   • 이행(Fulfilled): 비동기 작업이 성공적으로 완료된 상태입니다. 작업의 결과가 포함되어 있습니다.
   • 거부(Rejected): 비동기 작업이 실패한 상태입니다. 실패 원인이 포함되어 있습니다.
2. then() 메서드: Promise 객체는 then() 메서드를 가지고 있으며, 이 메서드를 사용하여 비동기 작업이 완료되면 수행할 콜백 함수를 등록할 수 있습니다. then() 메서드는 두 개의 콜백 함수를 인자로 받습니다.
   • 첫 번째 콜백 함수는 작업이 성공한 경우 실행됩니다.
   • 두 번째 콜백 함수는 작업이 실패한 경우 실행됩니다.
3. Promise 체이닝: then() 메서드를 연속적으로 호출하여 여러 비동기 작업을 순차적으로 처리할 수 있습니다. 이를 통해 코드의 가독성을 높일 수 있습니다.
4. Promise 객체 전달: Promise는 단순한 객체로, 함수에서 리턴값으로 사용하거나 다른 함수에 인자로 전달할 수 있습니다.

Promise를 사용함으로써 비동기 코드의 가독성을 높이고 예측 가능한 방식으로 처리할 수 있으며, 비동기 작업을 보다 효율적으로 관리할 수 있습니다. Promise는 대부분의 브라우저와 Node.js에서 기본적으로 지원되므로 널리 사용되고 있습니다.

 

---

Promise 상태

대기(Pending): 초기 상태로, 아직 완료되지 않은 비동기 작업을 나타냅니다.

const pendingPromise = new Promise((resolve, reject) => {
  // 아직 완료되지 않은 비동기 작업
});
// 상태: 대기 (Pending)

이행(Fulfilled): 비동기 작업이 성공적으로 완료되었으며, 결과를 포함합니다.

const fulfilledPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("작업 완료!"); // 성공 케이스
  }, 1000);
});

fulfilledPromise.then(result => {
  console.log("이행됨:", result); // "작업 완료!" 출력
});
// 상태: 이행 (Fulfilled)

거부(Rejected): 비동기 작업이 실패하였고, 실패 원인을 포함합니다.

const rejectedPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("작업 실패!"); // 실패 케이스
  }, 1000);
});

rejectedPromise.catch(error => {
  console.error("거부됨:", error); // "작업 실패!" 출력
});
// 상태: 거부 (Rejected)

 

---

then() 메서드

then() 메서드는 Promise 객체가 이행되었을 때 실행할 콜백 함수와 거부되었을 때 실행할 콜백 함수를 등록하는 역할을 합니다.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("작업 완료!");
  }, 1000);
});

promise.then(
  result => {
    console.log("이행됨:", result); // "작업 완료!" 출력
  },
  error => {
    console.error("거부됨:", error); // 실행되지 않음
  }
);

 

---

Promise 체이닝

then() 메서드를 체이닝하면 여러 개의 비동기 작업을 연결할 수 있습니다.

 

각 then() 메서드는 이전 작업의 결과를 기반으로 다음 작업을 수행합니다. 이 모습이 마치 연결되어 있기에 체이닝이라고 부릅니다.

function asyncTask1() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("작업 1 완료");
    }, 1000);
  });
}

function asyncTask2(result) {
  console.log("이전 작업 결과:", result);
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("작업 2 완료");
    }, 1000);
  });
}

asyncTask1()
  .then(asyncTask2)
  .then(result => {
    console.log("최종 결과:", result); // "최종 결과: 작업 2 완료" 출력
  });

 

---

Promise 객체 전달

하나의 Promise 객체에서 다른 Promise 객체로 전달할 수 있습니다.

 

이를 통해 여러 개의 비동기 작업을 병렬로 실행하고 결과를 기다릴 수 있습니다.

function asyncTask1() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("작업 1 완료");
    }, 1000);
  });
}

function asyncTask2() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("작업 2 완료");
    }, 1500);
  });
}

const promise1 = asyncTask1();
const promise2 = asyncTask2();

Promise.all([promise1, promise2])
  .then(results => {
    console.log("모든 작업 완료:", results); // ["작업 1 완료", "작업 2 완료"] 출력
  });

위의 예시에서는 Promise.all()을 사용하여 두 개의 Promise 객체를 병렬로 실행하고, 모든 작업이 완료되면 결과를 배열로 받을 수 있습니다.

 

Promise의 메서드 중에서 자주 사용되는 메서드 몇 가지를 뽑아서 설명드리고자 표로 만들어 보았습니다.

메서드	설명
Promise.resolve(value)	주어진 값을 가지고 이행된 Promise를 반환합니다.
Promise.reject(reason)	주어진 이유로 거부된 Promise를 반환합니다.
Promise.all(iterable)	모든 Promise가 이행될 때까지 기다리고, 모든 Promise가 이행되면 이행된 Promise 배열을 반환합니다.
Promise.race(iterable)	가장 먼저 이행되거나 거부된 Promise를 반환합니다.
Promise.any(iterable)	가장 먼저 이행된 Promise를 반환하며, 모든 Promise가 거부될 경우 에러를 발생시킵니다.
Promise.allSettled(iterable)	모든 Promise가 이행되거나 거부될 때까지 기다리고, 모든 Promise의 상태와 결과를 담은 객체 배열을 반환합니다.

 

---

제너레이터(Generator)

Generator는 자바스크립트에서 사용되는 특별한 종류의 함수입니다. 저는 제너레이터를 처음 봤을 때 유니티의 코루틴이 떠오르더라고요. 비슷한 개념이라 이해하기 쉬웠던 것 같습니다.

 

제너레이터는 실행을 제어하기 위해 이터레이터(iterator)를 사용합니다. 일반적인 함수가 인수를 받고 값을 반환하는 반면, 제너레이터는 실행을 호출자가 제어할 수 있도록 합니다.

 

제너레이터의 주요 특징은 아래와 같습니다.

1. 제어된 실행:
   • 제너레이터는 함수의 실행을 "제어"할 수 있으며, 실행을 중단하고 다시 시작할 수 있습니다.
   • 필요한 때에 제너레이터의 실행을 일시 중단하거나 다시 시작할 수 있습니다.
2. 선언:
   • 제너레이터 함수를 정의하려면 " function* " 구문을 사용하며, function 키워드 뒤에 별표(*)를 붙입니다.
   • 제너레이터 함수를 호출하면 즉시 실행되지 않고 제너레이터 객체를 반환합니다.

간단한 제너레이터 코드입니다.

function* simpleGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = simpleGenerator(); // 제너레이터 객체를 생성함

console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3
console.log(gen.next().value); // undefined (generator completed) 중요!!

이 예시에서"yield"는 제너레이터의 실행을 일시 중단하고 값을 호출자에게 반환하는 데 사용됩니다.

 

또한 yield를 사용하여 다른 제너레이터로 위임할 수도 있습니다:

function* anotherGenerator(i) {
  yield i + 1;
  yield i + 2;
  yield i + 3;
}

function* generator(i) {
  yield i;
  yield* anotherGenerator(i);
  yield i + 10;
}

const gen = generator(10);

console.log(gen.next().value); // 10
console.log(gen.next().value); // 11
console.log(gen.next().value); // 12
console.log(gen.next().value); // 13
console.log(gen.next().value); // 20

---

 

 

제너레이터 내에서 yield 문이 마지막 문장이더라도 제너레이터를 종료시키지 않습니다.

반면에, 어디서든 return을 호출하면 제너레이터가 종료되며, done 속성은 true가 되고 value 속성은 return에서 반환한 값이 됩니다.

 

아래의 abc 제너레이터 함수를 살펴보겠습니다.

function* abc() { 
  yield 'a'; 
  yield 'b'; 
  return 'c';
}

위 제너레이터를 호출하면 다음과 같은 결과를 얻을 수 있습니다.

const it = abc();
it.next(); // { value: 'a', done: false } 
it.next(); // { value: 'b', done: false } 
it.next(); // { value: 'c', done: true }

 

---

제너레이터와 호출자 간에 양방향 통신은 yield 표현식을 통해 이루어집니다. 이 말은 즉, yield 표현식은 호출자와 제너레이터 간의 데이터 교환을 가능하게 한다는 것을 의미합니다.

 

호출자는 yield를 통해 데이터를 제너레이터에게 전달하고, 제너레이터는 이를 받아들여 처리합니다.

function* interrogate() {
  const name = yield "What is your name?";
  const color = yield "What is your favorite color?"; 
  return `${name}'s favorite color is ${color}.`;
}

const it = interrogate(); 
it.next(); // { value: "What is your name?", done: false }
it.next('Ethan'); // { value: "What is your favorite color?", done: false } 
it.next('orange'); // { value: "Ethan's favorite color is orange.", done: true }