제너레이터 함수로 이터러블 객체 만들기 🌟

안녕하세요, 여러분! 오늘은 JavaScript의 흥미진진한 세계로 여러분을 초대합니다. 특히 제너레이터 함수와 이터러블 객체에 대해 깊이 있게 탐험해볼 거예요. 이 주제는 처음 들으면 조금 어렵게 느껴질 수 있지만, 걱정 마세요! 우리는 함께 이 개념을 재미있고 쉽게 이해해 볼 거예요. 😊

우리의 여정을 시작하기 전에, 잠깐 재능넷에 대해 언급하고 싶어요. 재능넷은 다양한 재능을 공유하고 거래하는 플랫폼인데요, 여러분도 JavaScript 실력을 키워 이곳에서 자신의 재능을 나눌 수 있을 거예요. 자, 이제 본격적으로 시작해볼까요?

🎯 학습 목표:

제너레이터 함수의 개념 이해하기
이터러블 객체의 특성 파악하기
제너레이터를 활용한 이터러블 객체 생성 방법 습득하기
실제 코드 예제를 통한 실습

1. 제너레이터 함수란? 🤔

자, 여러분! 제너레이터 함수가 뭔지 아시나요? 아직 모르셔도 괜찮아요. 우리 함께 알아가 봐요!

제너레이터 함수는 JavaScript에서 아주 특별한 종류의 함수예요. 일반 함수와는 조금 다르게 동작하는데, 가장 큰 특징은 실행을 일시 중지했다가 나중에 다시 시작할 수 있다는 점이에요. 마치 책을 읽다가 책갈피를 꽂아두고, 나중에 그 부분부터 다시 읽을 수 있는 것처럼요! 🚀

💡 제너레이터 함수의 특징:

함수 실행을 중간에 멈출 수 있어요.
필요할 때마다 값을 하나씩 반환할 수 있어요.
함수 내부 상태를 유지할 수 있어요.
메모리를 효율적으로 사용할 수 있어요.

제너레이터 함수는 function* 키워드로 선언해요. 별표(*)가 붙는다고 해서 놀라지 마세요. 이건 그냥 "나 제너레이터 함수야!"라고 JavaScript에게 알려주는 특별한 표시랍니다. 😉


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

위 코드에서 yield 키워드를 보셨나요? 이게 바로 제너레이터 함수의 마법 같은 부분이에요. yield는 함수의 실행을 일시 중지하고 지정된 값을 반환해요. 그리고 다음에 함수가 호출되면, 바로 그 다음 yield부터 실행을 재개하죠.

이 그림을 보면 제너레이터 함수의 실행 흐름을 쉽게 이해할 수 있어요. 시작점에서 출발해 각 yield 지점에서 잠시 멈추고, 마지막에 종료되는 거죠.

자, 이제 제너레이터 함수가 뭔지 조금은 감이 오시나요? 😊 이 특별한 함수가 어떻게 이터러블 객체를 만드는 데 사용되는지 곧 알아볼 거예요. 하지만 그전에, 이터러블 객체에 대해 먼저 알아볼 필요가 있어요. 다음 섹션에서 자세히 살펴보도록 해요!

2. 이터러블 객체의 세계 🌍

여러분, 이터러블(iterable) 객체라는 말을 들어보셨나요? 조금 어려운 용어처럼 들리지만, 사실 우리가 자주 사용하는 아주 친숙한 개념이랍니다. 😃

🎈 이터러블 객체란?

간단히 말해, 반복 가능한 객체를 의미해요. 즉, 객체의 요소를 하나씩 차례대로 접근할 수 있는 객체를 말하죠.

우리가 일상적으로 사용하는 배열, 문자열, Map, Set 등이 모두 이터러블 객체예요. 이들은 모두 for...of 루프를 사용해 순회할 수 있죠.


const fruits = ['🍎', '🍌', '🍇', '🍊'];
for (const fruit of fruits) {
  console.log(fruit);
}
// 출력:
// 🍎
// 🍌
// 🍇
// 🍊

위 예제에서 fruits 배열은 이터러블 객체예요. 우리는 for...of 루프를 사용해 각 과일 이모지를 하나씩 순회할 수 있죠.

그런데 여기서 궁금한 점! 어떻게 이 객체들이 이터러블한 특성을 가지게 되는 걸까요? 🤔

🔑 이터러블 객체의 비밀: Symbol.iterator

모든 이터러블 객체는 Symbol.iterator라는 특별한 메서드를 가지고 있어요. 이 메서드는 이터레이터(iterator) 객체를 반환하는데, 이 객체가 바로 순회 로직을 담당하죠.

이터레이터 객체는 next() 메서드를 가지고 있어요. 이 메서드를 호출할 때마다 객체의 다음 요소를 반환하죠. 반환되는 객체는 {value: 값, done: boolean} 형태를 가집니다.

이 그림을 보면 이터러블 객체와 이터레이터 객체의 관계를 한눈에 이해할 수 있어요. 이터러블 객체는 Symbol.iterator 메서드를 통해 이터레이터 객체를 생성하고, 이 이터레이터 객체의 next() 메서드를 통해 실제 순회가 이루어지는 거죠.

자, 이제 이터러블 객체에 대해 조금 더 이해가 되셨나요? 🌟 이런 이터러블 객체를 우리가 직접 만들 수 있다면 정말 멋지겠죠? 바로 여기서 제너레이터 함수의 힘이 발휘됩니다!

제너레이터 함수를 사용하면 복잡한 Symbol.iterator 메서드를 직접 구현하지 않고도 손쉽게 이터러블 객체를 만들 수 있어요. 어떻게 그게 가능한지, 다음 섹션에서 자세히 알아보도록 해요!

💡 잠깐! 재능넷 팁:

이터러블 객체와 제너레이터에 대한 이해는 현대 JavaScript 프로그래밍에서 매우 중요해요. 재능넷에서 JavaScript 튜터링을 찾아보면, 이런 고급 주제에 대해 더 깊이 있게 배울 수 있는 기회를 찾을 수 있을 거예요!

3. 제너레이터로 이터러블 객체 만들기 🛠️

자, 이제 우리가 기다리던 순간이 왔어요! 제너레이터 함수를 사용해 이터러블 객체를 만드는 방법을 알아볼 거예요. 이 과정은 마치 마법 같아요. 아주 간단한 코드로 강력한 이터러블 객체를 만들 수 있거든요. 😎

🌟 제너레이터 함수의 마법:

제너레이터 함수는 호출될 때 이터레이터 객체를 반환해요. 이 이터레이터 객체는 자동으로 이터러블 프로토콜을 구현하고 있어서, 우리가 별도로 Symbol.iterator를 구현할 필요가 없답니다!

간단한 예제로 시작해볼까요? 숫자를 하나씩 생성하는 제너레이터 함수를 만들어 봐요.


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

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

와! 정말 간단하죠? 이 numberGenerator 함수는 이터러블 객체를 생성해요. next() 메서드를 호출할 때마다 다음 yield 문의 값을 반환하고, 함수의 실행을 일시 중지해요.

이제 이 제너레이터로 만든 객체를 for...of 루프에서 사용해볼까요?


for (const num of numberGenerator()) {
  console.log(num);
}
// 출력:
// 1
// 2
// 3

짜잔! 🎉 우리가 만든 제너레이터 함수로 생성된 객체가 완벽하게 이터러블하게 동작하는 걸 볼 수 있어요.

이 그림은 제너레이터 함수의 동작 원리를 보여줘요. 각 yield 문에서 실행이 일시 중지되고, next() 호출 시 다음 yield로 이동하는 것을 볼 수 있죠.

이제 조금 더 실용적인 예제를 살펴볼까요? 피보나치 수열을 생성하는 제너레이터 함수를 만들어 봐요.


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);
}
// 출력: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34

와우! 🤩 이 예제는 정말 놀랍지 않나요? 무한한 피보나치 수열을 생성하는 이터러블 객체를 아주 간단하게 만들었어요. 제너레이터 함수의 강력함이 여기서 빛을 발하죠.

💡 제너레이터의 장점:

복잡한 상태 관리 로직을 간단하게 표현할 수 있어요.
메모리를 효율적으로 사용할 수 있어요. (무한 시퀀스도 표현 가능!)
비동기 프로그래밍을 동기 코드처럼 작성할 수 있어요. (이건 나중에 더 자세히 다룰게요!)

자, 이제 우리는 제너레이터 함수를 사용해 이터러블 객체를 만드는 방법을 배웠어요. 이 지식을 활용하면 정말 다양한 상황에서 유용하게 사용할 수 있을 거예요.

예를 들어, 재능넷에서 사용자의 스킬 목록을 표현하는 이터러블 객체를 만들 수 있겠죠?


function* skillGenerator(skills) {
  for (const skill of skills) {
    yield `${skill} 전문가`;
  }
}

const mySkills = skillGenerator(['JavaScript', 'Python', 'React']);
for (const skill of mySkills) {
  console.log(skill);
}
// 출력:
// JavaScript 전문가
// Python 전문가
// React 전문가

이렇게 만든 이터러블 객체는 재능넷의 프로필 페이지에서 사용자의 스킬을 동적으로 표시하는 데 사용할 수 있겠죠? 😊

다음 섹션에서는 제너레이터 함수를 사용한 더 복잡한 예제와 실제 활용 사례들을 살펴보도록 해요. 여러분의 창의력을 자극할 준비되셨나요? let's go! 🚀

4. 제너레이터의 고급 기능과 활용 사례 🚀

자, 이제 우리는 제너레이터 함수의 기본을 마스터했어요! 🎓 하지만 제너레이터의 진정한 힘은 더 복잡한 상황에서 빛을 발합니다. 이번 섹션에서는 제너레이터의 고급 기능들과 실제 활용 사례들을 살펴볼 거예요. 준비되셨나요? Let's dive in! 🏊‍♂️

4.1 제너레이터에 값 전달하기

제너레이터 함수의 또 다른 멋진 특징은 외부에서 값을 전달받을 수 있다는 점이에요. next() 메서드를 통해 값을 전달하면, 제너레이터 내부에서 이 값을 사용할 수 있죠.


function* conversationGenerator() {
  const name = yield "What's your name?";
  const hobby = yield `Nice to meet you, ${name}! What's your hobby?`;
  yield `Wow, ${name}! ${hobby} sounds fun!`;
}

const conversation = conversationGenerator();
console.log(conversation.next().value);
// 출력: What's your name?
console.log(conversation.next('Alice').value);
// 출력: Nice to meet you, Alice! What's your hobby?
console.log(conversation.next('painting').value);
// 출력: Wow, Alice! painting sounds fun!

이 예제에서 우리는 마치 대화를 나누는 것처럼 제너레이터와 상호작용하고 있어요. 제너레이터가 질문을 하고, 우리가 답변을 제공하는 식이죠. 이런 방식으로 제너레이터의 흐름을 동적으로 제어할 수 있답니다.

💡 재능넷 활용 팁:

이런 대화형 제너레이터를 활용하면 재능넷에서 사용자 온보딩 프로세스를 구현할 수 있어요. 사용자의 관심사나 스킬을 단계별로 수집하면서 개인화된 경험을 제공할 수 있겠죠?

4.2 에러 처리와 제너레이터

제너레이터 함수 내에서 에러 처리를 하는 방법도 알아볼까요? 제너레이터의 throw() 메서드를 사용하면 제너레이터 내부로 에러를 던질 수 있어요.


function* errorHandlingGenerator() {
  try {
    yield "Start";
    yield "Middle";
    yield "End";
  } catch (error) {
    console.log("Error caught:", error.message);
    yield "Error handled";
  }
}

const gen = errorHandlingGenerator();
console.log(gen.next().value); // 출력: Start
console.log(gen.throw(new Error("Oops!")).value); // 출력: Error caught: Oops! \n Error handled
console.log(gen.next().value); // 출력: undefined

이 예제에서 우리는 제너레이터 내부에 try-catch 블록을 사용했어요. throw() 메서드 를 호출하면 제너레이터 내부의 catch 블록에서 에러를 잡아 처리할 수 있죠. 이런 방식으로 비동기 작업의 에러 처리를 우아하게 할 수 있답니다.

4.3 비동기 제너레이터

제너레이터 함수는 비동기 작업을 다룰 때도 아주 유용해요. async/await와 결합하면 더욱 강력해지죠. 비동기 제너레이터 함수를 만들어볼까요?


async function* asyncNumberGenerator() {
  for (let i = 0; i < 5; i++) {
    await new Promise(resolve => setTimeout(resolve, 1000)); // 1초 대기
    yield i;
  }
}

(async () => {
  for await (const num of asyncNumberGenerator()) {
    console.log(num);
  }
})();
// 1초 간격으로 0, 1, 2, 3, 4 출력

이 예제에서는 비동기 제너레이터 함수를 만들고, for await...of 루프를 사용해 비동기적으로 생성되는 값들을 순회하고 있어요. 각 숫자가 1초 간격으로 출력되는 걸 볼 수 있죠.

🌟 실제 활용 사례:

재능넷에서 이런 비동기 제너레이터를 사용해 대용량 데이터를 페이지네이션 형태로 로드할 수 있어요. 사용자가 스크롤을 내릴 때마다 새로운 데이터를 비동기적으로 불러오는 식이죠.

4.4 제너레이터 위임

제너레이터 함수 안에서 다른 제너레이터 함수의 실행을 위임할 수 있다는 사실, 알고 계셨나요? 이를 '제너레이터 위임'이라고 해요. yield* 표현식을 사용하면 됩니다.


function* gen1() {
  yield 'a';
  yield 'b';
}

function* gen2() {
  yield 'x';
  yield* gen1();
  yield 'y';
}

for (const item of gen2()) {
  console.log(item);
}
// 출력: x, a, b, y

이 예제에서 gen2는 자신의 실행 중 일부를 gen1에 위임하고 있어요. 이렇게 하면 제너레이터 함수를 모듈화하고 재사용성을 높일 수 있답니다.

4.5 실제 활용 사례: 데이터 스트리밍

제너레이터는 대용량 데이터를 다룰 때 특히 유용해요. 예를 들어, 큰 파일을 조금씩 읽어들이는 스트리밍 방식의 파일 리더를 구현할 수 있죠.


const fs = require('fs');

function* fileReader(filename) {
  const chunk = 1024; // 1KB씩 읽기
  let position = 0;
  let fd;

  try {
    fd = fs.openSync(filename, 'r');
    while (true) {
      const buffer = Buffer.alloc(chunk);
      const bytesRead = fs.readSync(fd, buffer, 0, chunk, position);
      if (bytesRead === 0) {
        break;
      }
      position += bytesRead;
      yield buffer.slice(0, bytesRead).toString();
    }
  } finally {
    if (fd !== undefined) {
      fs.closeSync(fd);
    }
  }
}

// 사용 예:
for (const chunk of fileReader('bigfile.txt')) {
  console.log(chunk);
}

이 예제에서는 대용량 파일을 1KB씩 읽어들이는 제너레이터를 구현했어요. 이렇게 하면 메모리 사용을 최소화하면서 대용량 파일을 효율적으로 처리할 수 있답니다.

🚀 재능넷 활용 아이디어:

재능넷에서 사용자가 대용량 포트폴리오 파일을 업로드할 때, 이런 스트리밍 방식의 제너레이터를 사용해 처리할 수 있어요. 사용자에게 실시간 업로드 진행 상황을 보여주면서, 서버의 메모리 부하도 줄일 수 있겠죠?

자, 이제 우리는 제너레이터 함수의 고급 기능들과 실제 활용 사례들을 살펴봤어요. 제너레이터는 단순히 이터러블 객체를 만드는 것 이상의 강력한 도구라는 걸 알 수 있죠. 비동기 프로그래밍, 에러 처리, 대용량 데이터 처리 등 다양한 상황에서 유용하게 사용할 수 있답니다.

여러분도 이제 제너레이터의 힘을 활용해 더 효율적이고 우아한 코드를 작성할 수 있을 거예요. 재능넷에서 여러분의 JavaScript 실력을 뽐내보는 건 어떨까요? 😉

다음 섹션에서는 제너레이터와 관련된 몇 가지 주의사항과 베스트 프랙티스에 대해 알아보도록 하겠습니다. 계속해서 함께 배워나가요! 🌟

5. 제너레이터 사용 시 주의사항 및 베스트 프랙티스 🛠️

제너레이터 함수는 정말 강력한 도구지만, 모든 도구가 그렇듯 올바르게 사용해야 해요. 이번 섹션에서는 제너레이터를 사용할 때 주의해야 할 점들과 몇 가지 베스트 프랙티스에 대해 알아볼게요.

5.1 무한 루프 주의하기

제너레이터는 무한 시퀀스를 표현할 수 있어 편리하지만, 무한 루프에 빠지지 않도록 주의해야 해요.


function* infiniteGenerator() {
  let i = 0;
  while (true) {
    yield i++;
  }
}

const gen = infiniteGenerator();
for (const num of gen) {
  console.log(num);
  if (num > 1000) break; // 안전장치!
}

위 예제에서처럼 무한 제너레이터를 사용할 때는 반드시 종료 조건을 설정해야 해요.

5.2 메모리 관리에 유의하기

제너레이터는 지연 평가(lazy evaluation)를 통해 메모리를 효율적으로 사용할 수 있지만, 잘못 사용하면 오히려 메모리 누수가 발생할 수 있어요.

⚠️ 주의: 제너레이터 객체를 변수에 할당하고 더 이상 사용하지 않을 때는 null을 할당해 가비지 컬렉션이 동작할 수 있게 해주세요.

5.3 에러 처리 철저히 하기

제너레이터 함수 내부에서 발생할 수 있는 에러를 적절히 처리해야 해요. try-catch 블록을 사용하거나, 호출하는 쪽에서 에러를 처리할 수 있도록 해주세요.


function* errorProneGenerator() {
  try {
    yield 'Start';
    throw new Error('Something went wrong');
  } catch (error) {
    yield `Error occurred: ${error.message}`;
  } finally {
    yield 'Cleanup';
  }
}

const gen = errorProneGenerator();
console.log(gen.next().value); // Start
console.log(gen.next().value); // Error occurred: Something went wrong
console.log(gen.next().value); // Cleanup

5.4 제너레이터 함수의 재사용성 높이기

제너레이터 함수를 설계할 때는 재사용성을 고려해야 해요. 파라미터를 받아 동작을 커스터마이즈할 수 있게 만드는 것이 좋아요.


function* rangeGenerator(start, end, step = 1) {
  for (let i = start; i <= end; i += step) {
    yield i;
  }
}

console.log([...rangeGenerator(0, 10, 2)]); // [0, 2, 4, 6, 8, 10]
console.log([...rangeGenerator(5, 10)]); // [5, 6, 7, 8, 9, 10]

5.5 비동기 작업에서의 올바른 사용

비동기 작업을 다룰 때는 async/await와 함께 사용하는 것이 좋아요. 이렇게 하면 비동기 로직을 더 직관적으로 표현할 수 있죠.


async function* asyncDataFetcher(urls) {
  for (const url of urls) {
    try {
      const response = await fetch(url);
      const data = await response.json();
      yield data;
    } catch (error) {
      console.error(`Error fetching ${url}:`, error);
    }
  }
}

// 사용 예:
(async () => {
  const urls = ['https://api.example.com/data1', 'https://api.example.com/data2'];
  for await (const data of asyncDataFetcher(urls)) {
    console.log(data);
  }
})();

💡 재능넷 활용 팁:

재능넷에서 사용자의 포트폴리오 데이터를 비동기적으로 불러올 때 이런 방식을 사용할 수 있어요. 사용자 경험을 해치지 않으면서도 효율적으로 데이터를 로드할 수 있겠죠?

5.6 성능 고려하기

제너레이터는 일반 함수에 비해 약간의 오버헤드가 있을 수 있어요. 아주 작은 작업을 반복할 때는 일반 함수나 루프를 사용하는 것이 더 효율적일 수 있답니다.

하지만 대용량 데이터를 다루거나 복잡한 상태 관리가 필요한 경우, 제너레이터의 이점이 이러한 오버헤드를 상쇄하고도 남는다는 점을 기억하세요!

이 플로우차트는 제너레이터 사용을 결정할 때 고려해야 할 핵심 요소를 보여줍니다. 대용량 데이터를 다룰 때는 제너레이터가 좋은 선택이 될 수 있어요.

자, 이제 우리는 제너레이터를 사용할 때 주의해야 할 점들과 몇 가지 베스트 프랙티스에 대해 알아봤어요. 이런 점들을 염두에 두고 제너레이터를 사용한다면, 더욱 효율적이고 안정적인 코드를 작성할 수 있을 거예요.

제너레이터는 JavaScript의 강력한 기능 중 하나지만, 모든 상황에 적합한 해결책은 아니에요. 상황에 따라 적절한 도구를 선택하는 것이 중요합니다. 재능넷에서 여러분의 프로젝트를 구현할 때, 이런 점들을 고려해 최적의 솔루션을 찾아보세요!

다음 섹션에서는 제너레이터와 관련된 몇 가지 고급 패턴과 실제 프로젝트에서의 응용 방법에 대해 더 자세히 알아보도록 하겠습니다. 계속해서 JavaScript의 멋진 세계를 탐험해봐요! 🚀

6. 제너레이터의 고급 패턴과 실제 프로젝트 응용 🏗️

자, 이제 우리는 제너레이터의 기본 개념부터 주의사항까지 폭넓게 살펴봤어요. 이번 섹션에서는 더 깊이 들어가 고급 패턴들과 실제 프로젝트에서 어떻게 제너레이터를 활용할 수 있는지 알아볼 거예요. 준비되셨나요? Let's go! 🚀

6.1 코루틴(Coroutine) 패턴

제너레이터를 사용하면 코루틴 패턴을 구현할 수 있어요. 코루틴은 실행을 일시 중단하고 재개할 수 있는 함수인데, 이는 복잡한 비동기 로직을 동기적으로 표현하는 데 매우 유용해요.


function* fetchData() {
  const result1 = yield fetch('https://api.example.com/data1');
  console.log(result1);
  const result2 = yield fetch('https://api.example.com/data2');
  console.log(result2);
}

function runCoroutine(generatorFunction) {
  const generator = generatorFunction();

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

  return handle(generator.next());
}

runCoroutine(fetchData);

이 패턴을 사용하면 비동기 작업을 마치 동기 코드처럼 작성할 수 있어요. 코드의 가독성이 높아지고 에러 처리도 더 쉬워집니다.

6.2 상태 관리 패턴

제너레이터를 사용해 간단한 상태 관리 시스템을 구현할 수 있어요. 이는 특히 작은 규모의 애플리케이션에서 유용할 수 있죠.


function* createStore(initialState) {
  let state = initialState;
  while (true) {
    const action = yield state;
    switch (action.type) {
      case 'INCREMENT':
        state = { ...state, count: state.count + 1 };
        break;
      case 'DECREMENT':
        state = { ...state, count: state.count - 1 };
        break;
    }
  }
}

const store = createStore({ count: 0 });
console.log(store.next().value); // { count: 0 }
console.log(store.next({ type: 'INCREMENT' }).value); // { count: 1 }
console.log(store.next({ type: 'INCREMENT' }).value); // { count: 2 }
console.log(store.next({ type: 'DECREMENT' }).value); // { count: 1 }

이 패턴은 Redux와 같은 상태 관리 라이브러리의 기본 개념을 간단하게 구현한 것이에요. 작은 규모의 프로젝트에서 이런 방식으로 상태를 관리할 수 있답니다.

6.3 데이터 스트리밍 최적화

대용량 데이터를 처리할 때 제너레이터를 사용하면 메모리 사용을 최적화할 수 있어요. 예를 들어, 대용량 로그 파일을 분석하는 경우를 생각해볼까요?


const fs = require('fs');
const readline = require('readline');

function* processLogFile(filename) {
  const fileStream = fs.createReadStream(filename);
  const rl = readline.createInterface({
    input: fileStream,
    crlfDelay: Infinity
  });

  for await (const line of rl) {
    // 각 줄을 처리하는 로직
    const processedData = processLine(line);
    yield processedData;
  }
}

async function analyzeLog(filename) {
  let totalErrors = 0;
  for await (const data of processLogFile(filename)) {
    if (data.type === 'error') {
      totalErrors++;
    }
  }
  console.log(`Total errors found: ${totalErrors}`);
}

analyzeLog('huge_log_file.log');

function processLine(line) {
  // 실제 로그 처리 로직
  return { type: line.includes('ERROR') ? 'error' : 'info' };
}

이 예제에서는 대용량 로그 파일을 한 줄씩 읽어 처리하고 있어요. 제너레이터를 사용함으로써 전체 파일을 메모리에 올리지 않고도 효율적으로 처리할 수 있답니다.

💡 재능넷 활용 아이디어:

재능넷에서 사용자 활동 로그를 분석할 때 이런 방식을 사용할 수 있어요. 대용량의 로그 데이터를 효율적으로 처리하여 사용자 행동 패턴을 분석하거나 시스템 오류를 탐지할 수 있겠죠?

6.4 페이지네이션 구현

API에서 대량의 데이터를 가져올 때 페이지네이션을 구현하는 데 제너레이터를 활용할 수 있어요.


async function* fetchPaginatedData(url, pageSize = 10) {
  let page = 1;
  while (true) {
    const response = await fetch(`${url}?page=${page}&pageSize=${pageSize}`);
    const data = await response.json();
    if (data.length === 0) break;
    yield* data;
    page++;
  }
}

async function displayUserData() {
  const userDataGenerator = fetchPaginatedData('https://api.example.com/users');
  for await (const user of userDataGenerator) {
    console.log(`User: ${user.name}, Email: ${user.email}`);
  }
}

displayUserData();

이 패턴을 사용하면 클라이언트 측에서 페이지네이션을 쉽게 처리할 수 있어요. 사용자에게 "더 보기" 버튼을 제공하거나, 무한 스크롤을 구현할 때 유용하게 사용할 수 있답니다.

6.5 테스트 데이터 생성

제너레이터를 사용해 테스트용 더미 데이터를 생성할 수 있어요. 이는 대규모 테스트나 성능 테스트에 특히 유용해요.


function* generateUser(id) {
  yield {
    id,
    name: `User ${id}`,
    email: `user${id}@example.com`,
    age: Math.floor(Math.random() * 50) + 18
  };
}

function* generateUsers(count) {
  for (let i = 1; i <= count; i++) {
    yield* generateUser(i);
  }
}

// 사용 예:
const userGenerator = generateUsers(1000000);
for (const user of userGenerator) {
  // 각 사용자 데이터로 무언가를 수행
  console.log(user);
  if (user.id === 100) break; // 예시를 위해 100명만 출력
}

이 방식을 사용하면 메모리 사용을 최소화하면서도 대량의 테스트 데이터를 생성할 수 있어요. 필요할 때마다 데이터를 생성하므로 시스템 리소스를 효율적으로 사용할 수 있답니다.

이 다이어그램은 우리가 지금까지 살펴본 제너레이터의 다양한 활용 방법을 보여줍니다. 각각의 원은 제너레이터가 특히 유용하게 사용될 수 있는 영역을 나타내고 있어요.

6.6 실제 프로젝트 응용: 재능넷 포트폴리오 갤러리

자, 이제 우리가 배운 내용을 재능넷의 실제 기능에 적용해볼까요? 사용자의 포트폴리오 갤러리를 효율적으로 로드하는 기능을 구현해봐요.


async function* fetchPortfolioItems(userId, pageSize = 5) {
  let page = 1;
  while (true) {
    const response = await fetch(`/api/portfolio/${userId}?page=${page}&pageSize=${pageSize}`);
    const items = await response.json();
    if (items.length === 0) break;
    yield* items;
    page++;
  }
}

async function loadPortfolioGallery(userId) {
  const gallery = document.getElementById('portfolio-gallery');
  const loadMoreBtn = document.getElementById('load-more-btn');
  const itemGenerator = fetchPortfolioItems(userId);

  async function loadNextBatch() {
    for (let i = 0; i < 5; i++) {
      const {value: item, done} = await itemGenerator.next();
      if (done) {
        loadMoreBtn.style.display = 'none';
        break;
      }
      const itemElement = createPortfolioItemElement(item);
      gallery.appendChild(itemElement);
    }
  }

  loadMoreBtn.addEventListener('click', loadNextBatch);
  await loadNextBatch(); // 초기 로드
}

function createPortfolioItemElement(item) {
  const div = document.createElement('div');
  div.className = 'portfolio-item';
  div.innerHTML = `
    <img src="%24%7Bitem.imageUrl%7D" alt="${item.title}">
    <h3>${item.title}</h3>
    <p>${item.description}</p>
  `;
  return div;
}

// 사용 예:
loadPortfolioGallery('user123');

이 예제에서는 제너레이터를 사용해 포트폴리오 아이템을 페이지 단위로 가져오고 있어요. "더 보기" 버튼을 클릭할 때마다 다음 배치의 아이템을 로드하죠. 이 방식의 장점은 다음과 같아요: