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() 메서드를 통해 다음 값을 반환해. 이 과정이 반복되면서 모든 데이터를 순회하게 되는 거지.

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

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

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

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

제네레이터(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 문으로 이동하는 걸 볼 수 있지.

제네레이터의 강력한 기능 중 하나는 양방향 통신이 가능하다는 거야. 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()를 호출해 다음 페이지의 결과를 가져올 수 있어.

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

자, 이제 이터레이터와 제네레이터에 대해 꽤 많이 알게 됐지? 이 두 가지 개념은 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 루프에서 사용할 수 있게 됐어.

이 그림은 Range(1, 10, 2)가 어떻게 동작하는지 보여줘. 이터레이터를 사용해 1부터 10까지 2씩 증가하는 값을 순회할 수 있어.

자, 이제 이터레이터와 제네레이터의 실전 응용에 대해 알아봤어. 이 개념들을 잘 활용하면 코드를 더 효율적이고 우아하게 만들 수 있지. 특히 대용량 데이터 처리, 비동기 작업 관리, 커스텀 데이터 구조 구현 등에서 큰 힘을 발휘해.

이터레이터와 제네레이터는 JavaScript의 강력한 기능이야. 처음에는 조금 어렵게 느껴질 수 있지만, 연습하다 보면 점점 익숙해질 거야. 그리고 언젠가는 "아, 여기에 제네레이터를 쓰면 딱이겠는데!"라고 생각하는 순간이 올 거야. 그때 이 개념들이 빛을 발하겠지!

코딩의 세계는 정말 넓고 깊어. 이터레이터와 제네레이터는 그 세계를 탐험하는 데 도움을 주는 강력한 도구야. 계속해서 학습하고 실험해보면서 너만의 코딩 스킬을 발전시켜 나가길 바라!

자, 이제 우리의 이터레이터와 제네레이터 여행이 끝나가고 있어. 마지막으로 궁금한 점이나 더 알고 싶은 내용이 있니? 아니면 다른 주제로 넘어갈까?