JavaScript 이터레이터와 제네레이터: 데이터 스트림 다루기 🚀

안녕, 친구들! 오늘은 JavaScript의 꿀잼 기능인 이터레이터와 제네레이터에 대해 함께 알아볼 거야. 😎 이 두 녀석은 데이터 스트림을 다루는 데 있어서 정말 유용한 도구들이지. 마치 재능넷에서 다양한 재능을 거래하듯이, 이터레이터와 제네레이터도 데이터를 효율적으로 주고받는 데 큰 역할을 한다고 볼 수 있어.

자, 이제부터 우리의 코딩 여행을 시작해볼까? 🧳✈️

💡 알쏭달쏭 팁: 이터레이터와 제네레이터는 처음 들으면 좀 어려울 수 있어. 하지만 걱정 마! 우리가 함께 차근차근 알아가다 보면 어느새 이 개념들을 마스터하고 있을 거야.

이터레이터(Iterator)란 뭘까? 🤔

이터레이터는 쉽게 말해서 '순회 가능한 객체'를 만들어주는 녀석이야. 마치 책의 책갈피처럼, 데이터 컬렉션의 현재 위치를 기억하고 다음 항목으로 이동할 수 있게 해주지.

이터레이터의 핵심은 next() 메서드야. 이 메서드를 호출하면 다음 두 가지 속성을 가진 객체를 반환해:

value: 현재 위치의 값
done: 모든 값을 순회했는지 여부 (boolean)

자, 이제 간단한 이터레이터를 만들어볼까?


function simpleIterator(array) {
  let index = 0;
  
  return {
    next: function() {
      if (index < array.length) {
        return { value: array[index++], done: false };
      } else {
        return { done: true };
      }
    }
  };
}

// 사용 예시
const it = simpleIterator([1, 2, 3]);
console.log(it.next()); // { value: 1, done: false }
console.log(it.next()); // { value: 2, done: false }
console.log(it.next()); // { value: 3, done: false }
console.log(it.next()); // { done: true }

위 코드에서 simpleIterator 함수는 배열을 받아서 이터레이터 객체를 반환해. 이 객체의 next() 메서드를 호출할 때마다 배열의 다음 요소를 반환하고, 모든 요소를 순회하면 done: true를 반환하지.

🎭 재미있는 비유: 이터레이터는 마치 재능넷에서 다양한 재능을 하나씩 살펴보는 것과 비슷해. 한 번에 하나의 재능을 자세히 보고, 다음으로 넘어가는 거지. 모든 재능을 다 봤다면 "끝났어요!"라고 알려주는 거야.

이터레이터의 장점은 뭘까? 바로 메모리 효율성이야. 모든 데이터를 한 번에 메모리에 올리지 않고, 필요할 때마다 하나씩 가져오기 때문에 대용량 데이터를 다룰 때 특히 유용해.

위 그림에서 볼 수 있듯이, 이터레이터는 데이터 컬렉션을 순회하면서 현재 위치를 기억하고, next() 메서드를 통해 다음 값을 반환해. 이 과정이 반복되면서 모든 데이터를 순회하게 되는 거지.

이터레이터는 다음과 같은 상황에서 특히 유용해:

대용량 데이터셋을 처리할 때
네트워크 요청과 같은 비동기 작업을 순차적으로 처리할 때
무한 시퀀스를 다룰 때 (예: 피보나치 수열)

재능넷에서 다양한 재능을 검색하고 살펴보는 과정을 이터레이터로 구현한다면 어떨까? 사용자가 원하는 만큼, 필요한 만큼만 재능 정보를 가져올 수 있을 거야. 이렇게 하면 서버의 부하도 줄이고, 사용자 경험도 개선할 수 있지!

🌟 실전 팁: 이터레이터를 사용할 때는 항상 done 속성을 체크하는 것이 좋아. 그래야 모든 데이터를 순회했을 때 적절히 처리할 수 있거든.

자, 이제 이터레이터에 대해 어느 정도 감이 왔지? 다음으로 제네레이터에 대해 알아보자!

제네레이터(Generator)의 마법 ✨

제네레이터는 이터레이터를 생성하는 특별한 함수야. 일반 함수와는 다르게, 제네레이터 함수는 실행을 일시 중지하고 나중에 다시 시작할 수 있어. 이게 바로 제네레이터의 마법 같은 힘이지!

제네레이터 함수는 다음과 같은 특징을 가지고 있어:

함수 이름 앞에 function*을 사용해 선언해
yield 키워드를 사용해 값을 반환하고 실행을 일시 중지해
호출하면 제네레이터 객체를 반환해, 이 객체는 이터레이터 프로토콜을 따르지

간단한 제네레이터 함수를 만들어볼까?


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

const gen = simpleGenerator();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }

이 코드에서 simpleGenerator 함수는 세 개의 값을 순차적으로 yield해. 제네레이터 객체의 next() 메서드를 호출할 때마다 다음 yield 문까지 실행하고 일시 중지돼.

위 그림에서 빨간 점은 제네레이터 함수의 실행 포인트를 나타내. next() 메서드를 호출할 때마다 다음 yield 문으로 이동하는 걸 볼 수 있지.

🎡 재미있는 비유: 제네레이터는 마치 놀이공원의 롤러코스터와 같아. 각 yield 지점은 롤러코스터의 정거장이고, next()를 호출하는 건 다음 구간으로 출발하는 거야. 재능넷에서 다양한 재능을 탐험하는 것처럼, 제네레이터로 데이터의 여정을 즐겁게 만들 수 있지!

제네레이터의 강력한 기능 중 하나는 양방향 통신이 가능하다는 거야. next() 메서드에 인자를 전달하면, 그 값을 제네레이터 함수 내부로 전달할 수 있어.


function* twoWayCommunication() {
  const x = yield "첫 번째 질문";
  console.log(x);
  const y = yield "두 번째 질문";
  console.log(y);
  return "끝!";
}

const gen = twoWayCommunication();
console.log(gen.next().value);       // "첫 번째 질문"
console.log(gen.next('답변 1').value); // 답변 1 (콘솔에 출력)
                                     // "두 번째 질문"
console.log(gen.next('답변 2').value); // 답변 2 (콘솔에 출력)
                                     // "끝!"

이 예제에서 제네레이터 함수는 질문을 하고, 우리는 next()를 통해 답변을 전달해. 이런 방식으로 제네레이터와 상호작용할 수 있어.

제네레이터는 다음과 같은 상황에서 특히 유용해:

비동기 프로그래밍 (Promise와 함께 사용)
무한 시퀀스 생성
복잡한 상태 관리
데이터 스트리밍

예를 들어, 재능넷에서 사용자의 검색 결과를 페이지별로 로드하는 기능을 제네레이터로 구현할 수 있어:


function* searchTalentsGenerator(query) {
  let page = 1;
  while (true) {
    const results = yield fetchTalents(query, page);
    if (results.length === 0) {
      return "검색 완료";
    }
    page++;
  }
}

function fetchTalents(query, page) {
  // API 호출 로직
  return [/* 검색 결과 */];
}

const talentSearch = searchTalentsGenerator("웹 개발");
console.log(talentSearch.next().value); // 첫 페이지 결과
console.log(talentSearch.next().value); // 두 번째 페이지 결과
// ... 필요한 만큼 계속

이 예제에서 searchTalentsGenerator는 검색 쿼리를 받아 페이지별로 결과를 yield해. 사용자가 더 많은 결과를 요청할 때마다 next()를 호출해 다음 페이지의 결과를 가져올 수 있어.

위 그림은 재능넷의 검색 제네레이터가 어떻게 작동하는지 보여줘. 녹색 점이 이동하면서 각 페이지의 결과를 순차적으로 가져오는 걸 표현하고 있어.

💡 프로 팁: 제네레이터를 사용할 때는 for...of 루프를 활용하면 더 깔끔한 코드를 작성할 수 있어. 예를 들어, for (const result of talentSearch) { ... } 이렇게 말이야!

자, 이제 이터레이터와 제네레이터에 대해 꽤 많이 알게 됐지? 이 두 가지 개념은 JavaScript에서 데이터 스트림을 다루는 데 정말 강력한 도구야. 특히 대용량 데이터나 비동기 작업을 다룰 때 그 진가를 발휘하지.

다음 섹션에서는 이터레이터와 제네레이터를 실제 프로젝트에 어떻게 적용할 수 있는지 더 자세히 알아볼 거야. 준비됐니? 계속 가보자고! 🚀

이터레이터와 제네레이터의 실전 응용 🛠️

자, 이제 이터레이터와 제네레이터의 기본 개념을 알았으니 실제로 어떻게 활용할 수 있는지 살펴볼까? 여기서는 몇 가지 재미있고 유용한 예제를 통해 이 개념들을 더 깊이 이해해보자!

1. 피보나치 수열 생성기 🌀

피보나치 수열은 각 숫자가 앞의 두 숫자의 합인 수열이야. 이걸 제네레이터로 구현하면 무한한 피보나치 수열을 생성할 수 있어!


function* fibonacciGenerator() {
  let a = 0, b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

const fib = fibonacciGenerator();
for (let i = 0; i < 10; i++) {
  console.log(fib.next().value);
}

이 코드를 실행하면 피보나치 수열의 처음 10개 숫자를 볼 수 있어. 재미있는 건, 이 제네레이터는 무한히 계속될 수 있다는 거야. 메모리를 많이 사용하지 않으면서 필요한 만큼의 숫자만 생성할 수 있지.

이 그림은 피보나치 수열의 처음 몇 개 숫자를 보여주고 있어. 제네레이터를 사용하면 이런 무한 수열을 효율적으로 다룰 수 있지.

2. 비동기 작업 관리하기 🔄

제네레이터는 비동기 작업을 관리하는 데도 아주 유용해. 특히 Promise와 함께 사용하면 비동기 코드를 동기 코드처럼 보이게 만들 수 있지.


function* asyncTaskManager() {
  try {
    const result1 = yield fetch('https://api.example.com/data1');
    console.log(result1);
    const result2 = yield fetch('https://api.example.com/data2');
    console.log(result2);
    const result3 = yield fetch('https://api.example.com/data3');
    console.log(result3);
  } catch (error) {
    console.error('에러 발생:', error);
  }
}

function runAsyncTasks(generatorFunc) {
  const generator = generatorFunc();
  
  function handle(result) {
    if (result.done) return;
    return result.value.then(
      res => handle(generator.next(res)),
      err => generator.throw(err)
    );
  }
  
  return handle(generator.next());
}

runAsyncTasks(asyncTaskManager);

이 예제에서 asyncTaskManager 제네레이터는 여러 비동기 작업을 순차적으로 실행해. runAsyncTasks 함 수는 제네레이터를 실행하고 각 Promise를 처리해. 이렇게 하면 비동기 작업을 마치 동기 코드처럼 쉽게 관리할 수 있어.

이 그림은 제네레이터가 어떻게 여러 비동기 API 요청을 관리하는지 보여줘. 각 요청은 순차적으로 실행되고, 제네레이터는 이 과정을 우아하게 제어해.

3. 데이터 스트리밍 구현하기 🌊

이터레이터와 제네레이터는 대용량 데이터를 효율적으로 처리하는 데 아주 유용해. 예를 들어, 큰 파일을 조금씩 읽어들이는 스트리밍 기능을 구현할 수 있지.


function* fileReader(filename) {
  // 실제로는 파일 시스템 API를 사용해야 해
  const chunks = ['첫 번째 청크', '두 번째 청크', '세 번째 청크'];
  for (const chunk of chunks) {
    yield chunk;
  }
}

const reader = fileReader('big_file.txt');
for (const chunk of reader) {
  console.log('청크 읽기:', chunk);
  // 여기서 각 청크를 처리할 수 있어
}

이 예제에서 fileReader 제네레이터는 큰 파일을 청크 단위로 읽어들여. 이렇게 하면 전체 파일을 한 번에 메모리에 올리지 않고도 효율적으로 처리할 수 있어.

이 그림은 큰 파일이 어떻게 작은 청크로 나뉘어 처리되는지 보여줘. 제네레이터를 사용하면 이런 스트리밍 처리를 아주 우아하게 구현할 수 있지.

4. 커스텀 이터러블 객체 만들기 🎨

이터레이터 프로토콜을 구현하면 자신만의 이터러블 객체를 만들 수 있어. 이를 통해 복잡한 데이터 구조를 쉽게 순회할 수 있지.


class Range {
  constructor(start, end, step = 1) {
    this.start = start;
    this.end = end;
    this.step = step;
  }

  [Symbol.iterator]() {
    let current = this.start;
    const end = this.end;
    const step = this.step;

    return {
      next() {
        if (current <= end) {
          const value = current;
          current += step;
          return { value, done: false };
        }
        return { done: true };
      }
    };
  }
}

for (const num of new Range(1, 10, 2)) {
  console.log(num);  // 1, 3, 5, 7, 9
}

이 예제에서 Range 클래스는 시작값, 끝값, 그리고 스텝을 가진 범위를 나타내. [Symbol.iterator]() 메서드를 구현함으로써 이 객체를 for...of 루프에서 사용할 수 있게 됐어.