[JS] 자바스크립트 제너레이터 Generator 총 정리

제너레이터는 ES6에 도입된 특수한 함수다. 함수 호출자가 함수 실행을 제어할 수 있고, 함수 호출자와 함수 상태를 주고받을 수도 있다. 이런 특징 때문에 제너레이터 함수에선 코드 블록의 실행을 잠시 멈췄다가 필요한 시점에 재개할 수 있다. 일반 함수는 0~1개 값만 반환할 수 있지만, 제너레이터 함수는 여러개의 값을 필요에 따라 하나씩 반환할 수 있다.

 

제너레이터 함수의 특징

---

1. 함수 호출자에게 함수 실행의 제어권을 양도(yield)할 수 있다
   • 일반 함수 : 함수 호출자(caller)는 함수를 호출한 이후 함수 실행을 제어할 수 없다.
   • 제너레이터 함수 : 함수 호출자가 함수 실행을 제어할 수 있다(함수 실행 일시 정지 / 재개)
2. 함수 호출자와 함수 상태를 주고받을 수 있다
   • 일반 함수 : 매개변수를 통해 값을 전달받고 함수 코드를 일괄 실행한 결과값을 외부로 반환한다.
   • 제너레이터 함수 : 함수 호출자에게 상태를 전달하거나, 함수 호출자로부터 상태를 전달받을 수 있다.
3. 제너레이터 함수를 호출하면 제너레이터 객체를 반환한다
   • 일반 함수 : 함수를 호출하면 함수 코드를 일괄 실행하고 값을 반환한다.
   • 제너레이터 함수 : 이터러블인 동시에 이터레이터인 제너레이터 객체를 반환한다

 

제너레이터 함수 정의 방법

---

💡 제너레이터 함수는 이터러블이다. 따라서 함수 자체에 전개 문법을 사용할 수도 있다.

 

제너레이터 함수는 function* 키워드로 선언하고 함수 본문엔 1개 이상의 yield 표현식을 포함한다. 나머진 일반 함수를 정의하는 것과 동일하다. * 기호는 애스터리스크(Asterisk)라고 부르며 function 키워드와 함수 이름 사이라면 어디에 붙여도 상관없다. 대부분은 function 키워드 바로 뒤에 붙인다. ex) function*

// 선언식
function* genDecFunc() {
  yield 1;
}

// 표현식
const genExpFunc = function* () {
  /* ... */
};

// 객체 메서드
const obj = {
  *genObjMethod() {
    /* ... */
  },
};

// 클래스 메서드
class MyClass {
  *genClsMethod() {
    /* ... */
  }
}

 

❗️ 제너레이터 함수는 화살표 함수로 정의할 수 없고, new 연산자를 사용하는 생성자 함수로 호출할 수 없다.

const genArrowFunc = * () => { /* ... */ } // Error! Unexpected token '*'

function* genFunc() { /* ... */ }
new genFunc(); // Error! genFunc is not a constructor

 

제너레이터 함수 자체는 이터러블이므로 아래처럼 전개문법을 사용할 수도 있다.

function* generateSequence() {
  yield 1;
  yield 2;
  yield 3;
}
const res = [0, ...generateSequence()]; // [0, 1, 2, 3]

console.log(Symbol.iterator in generateSequence.prototype); // true
// 제너레이터 함수는 Symbol.iterator 메서드를 상속받으므로 이터러블이다

 

제너레이터 함수는 Symbol.iterator 메서드를 상속받으므로 이터러블이다.

 

제너레이터 객체

---

💡 제너레이터 객체는 이터러블(iterable)이면서 이터레이터(iterator)다.

 

일반 함수를 호출하면 함수의 코드 블록을 실행한다. 반면 제너레이터 함수를 호출하면 제너레이터 객체를 생성한 후 반환한다. 제너레이터 객체는 Symbol.iterator 메서드를 상속 받는 이터러블이면서 value, done 프로퍼티를 갖는 이터레이터 리절트 객체를 반환하는 next 메서드를 소유하는 이터레이터다.

// 제너레이터 함수 정의
function* genFunc() {
  yield 1;
  yield 2;
  yield 3;
}

// 제너레이터 함수를 호출해서 제너레이터 객체 반환
// 제너레이터 객체는 이터러블이면서 이터레이터다
const generator = genFunc();
console.log(Symbol.iterator in generator); // true (이터러블)
console.log('next' in generator); // true (이터레이터)

 

제너레이터 객체는 next 메서드를 갖는 이터레이터지만, 이터레이터에는 없는 return, throw 메서드를 갖는다. 제너레이터 객체의 next, return, throw 메서드를 호출하면 아래처럼 동작한다.

function* genFunc() {
  try {
    yield 1;
    yield 2;
    yield 3;
  } catch (e) {
    console.error(e);
  }
}

const generator = genFunc();
generator.next(); // {value: 1, done: false}
generator.return('End'); // {value: 'End', done: true}
generator.throw('Error'); // {value: undefined, done: true}

 

1. next 메서드 호출
   제너레이터 함수의 yield 표현식까지 코드 블록 실행하고, yield된 값을 value 프로퍼티 값으로, false를 done 프로퍼티 값으로 갖는 이터레이터 리절트 객체 반환.
2. return 메서드 호출
   인자로 전달받은 값을 value 프로퍼티 값으로, true를 done 프로퍼티 값으로 갖는 이터레이터 리절트 객체 반환.
3. throw 메서드 호출
   인자로 전달받은 에러를 발생시키고 undefined를 value 프로퍼티 값으로, true를 done 프로퍼티 값으로 갖는 이터레이터 리절트 객체 반환

 

제너레이터 일시 중지와 재개

---

제너레이터는 yield 키워드와 next 메서드를 이용해 실행을 잠시 중지했다가 필요한 시점에 다시 재개할 수 있다. 일반 함수는 호출 이후 함수가 제어권을 독점하지만, 제너레이터는 함수 호출자에게 제어권을 양도해서 필요한 시점에 함수 실행을 재개할 수 있다.

 

제너레이터 함수를 호출하면 제너레이터 객체를 반환하고, 제너레이터 객체에 있는 next 메서드를 호출하면 제너레이터 함수의 코드 블록을 yield 표현식까지만 실행한다. yield 키워드는 제너레이터 함수의 실행을 일시 중지시키거나 yield 키워드 뒤에 오는 표현식 평가 결과를 제너레이터 함수 호출자에게 반환한다.

// 제너레이터 함수 정의
function* genFunc() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = genFunc();
// next 메서드를 갖는 제너레이터 객체 반환(이터러블+이터레이터)

generator.next(); // {value: 1, done: false}
// next 메서드를 호출해서 첫번째 yield 표현식까지 실행하고 일시 중지
// next 메서드가 반환하는 객체는 이터레이터 리절트 객체
// value 프로퍼티엔 첫번째 yield 표현식에서 yield된 값 1 할당
// 함수를 끝까지 실행하지 않았으므로 done 프로퍼티엔 false 할당

generator.next(); // {value: 2, done: false}
// 두번째 yield 표현식까지 실행하고 일시 중지

generator.next(); // {value: 3, done: false}
// 세번째 yield 표현식까지 실행하고 일시 중지

generator.next(); // {value: undefined, done: true}
// 남은 yield 표현식이 없으므로 제너레이터 함수의 마지막까지 실행
// yield 표현식이 없으므로 value 프로퍼티엔 undefined 할당
// 제너레이터 함수를 끝까지 실행했으므로 done 프로퍼티엔 true 할당

 

제너레이터 객체의 next 메서드를 호출하면 yield 표현식까지 실행하고 일시 중지되며, 이때 함수 제어권이 호출자로 양도된다. 이후 next 메서드를 다시 호출하면 마지막 코드 실행 지점부터 다음 yield 표현식까지 실행하고 일시중지된다. next 메서드가 반환하는 이터레이터 리절트 객체는 아래 속성을 가진다.

 

• value : yield 표현식에서 yield된 값(yield 키워드 뒤에 있는 값)
• done : 제너레이터 함수를 끝까지 실행했는지 여부를 나타내는 Boolean 값

 

위 과정을 정리해보면 아래와 같다.

generator.next() → yield → 
generator.next() → yield → 
... →
generator.next() → return

 

next 메서드에 값 전달하기

---

💡 제너레이터 함수에서 반환값은 큰 의미가 없다. 일반적으로 제너레이터에선 return 문을 사용하여 값을 반환할 필요가 없으며, 종료의 의미로만 사용한다.

 

이미지 출처 JavaScript Info

이터레이터의 next 메서드와 달리 제너레이터 객체의 next 메서드는 인자를 받을 수 있다. next 메서드가 전달받은 인자는 제너레이터 함수의 yield 표현식을 할당받는 변수에 할당된다. yield 표현식을 할당받는 변수에(아래 예시에서 x, y 변수) yield 표현식의 평가 결과가 할당되지 않는점에 주의한다. 첫 next() 메서드 호출은 인자를 받지 않으므로 주의한다. 

function* getFunc() {
  const x = yield 1; // 변수 x는 두번째 next 메서드를 호출할 때 결정된다
  const y = yield x + 10; // 변수 y는 세번째 next 메서드를 호출할 때 결정된다
  return x + y;
}

const generator = getFunc();
// next 메서드를 갖는 제너레이터 객체 반환(이터러블+이터레이터)

let res = generator.next(); // {value: 1, done: false}
// 처음 호출하는 next 메서드에는 인자를 전달하지 않는다(전달해도 무시된다)
// 첫번째 yield 표현식까지 실행하고 일시 중지되며, yield된 값 1은 이터레이터 리절트 객체의 value 프로퍼티에 할당된다
// 이 시점에서 x 변수에는 아무것도 할당되지 않았다. x 변수 값은 다음 next 메서드를 호출할 때 결정된다

res = generator.next(10); // {value: 20, done: false}
// next 메서드 인자로 전달한 10은 getFunc 함수의 x 변수에 할당된다
// next 메서드가 반환하는 이터레이터 리절트 객체의 value 프로퍼티에는 두 번째 yield된 값 20이 할당된다

res = generator.next(20); // {value: 30, done: true}
// next 메서드 인자로 전달한 20은 getFunc 함수의 y 변수에 할당된다
// next 메서드가 반환하는 이터레이터 리절트 객체의 value 프로퍼티에는 제너레이터 함수의 반환값 30이 할당된다
// 제너레이터 함수를 끝까지 실행했으므로 done 프로퍼티엔 true가 할당된다

 

이처럼 제너레이터에선 next 메서드를 이용해 yield 표현식까지 함수를 실행시켜 제너레이터 객체가 관리하는 상태(yield된 값)를 가져오거나, next 메서드에 인자를 전달해서 제너레이터 객체에 상태(yield 표현식을 할당받는 변수) 값을 주입할 수도 있다.

 

제너레이터의 활용

---

이터러블 구현

아래 range 변수는 숫자 간격을 from(1)과 to(5) 속성으로 나타내고 있는 일반적인 객체다. 일반 객체는 이터러블이 아니므로 반복문을 돌릴 수 없기 때문에 Symbol.iterator 메서드를 추가해서 반복 가능한 객체로 만들었다. — 이터러블과 관련한 더 자세한 내용은 링크 참고

// 코드 참고 JavaScript Info
const range = {
  from: 1,
  to: 5,

  // for..of 최초 호출 시, Symbol.iterator가 호출된다.
  [Symbol.iterator]() {
    // Symbol.iterator는 이터레이터 객체를 반환한다.
    // for..of는 반환된 이터레이터 객체만을 대상으로 동작하고, 이때 다음 값도 정해진다.
    return {
      current: this.from,
      last: this.to,

      // for..of 반복문에 의해 각 이터레이션마다 next()가 호출된다.
      next() {
        // next()는 객체 형태의 값, {done:.., value :...}을 반환해야 된다.
        if (this.current <= this.last) {
          return { done: false, value: this.current++ };
        }
        return { done: true };
      },
    };
  },
};

console.log([...range]); // [1, 2, 3, 4, 5]

 

Symbol.iterator 대신 제너레이터 함수를 사용하면, 제너레이터 함수로 반복할 수 있다. 같은 range 객체지만 제너레이터를 사용해서 더 깔끔하게 작성할 수 있다.

const range = {
  from: 1,
  to: 5,
  *[Symbol.iterator]() {
    for (let value = this.from; value <= this.to; value++) {
      yield value;
    }
  },
};

console.log([...range]); // [1, 2, 3, 4, 5]

 

피보나치 수를 반환하는 이터러블 구현

제너레이터 함수를 사용하면 이터레이션 프로토콜을 준수해 이터러블을 생성하는 방식보다 더 간단하게 이터러블을 구현할 수 있다. 아래는 이터레이션 프로토콜을 준수하여 피보나치 수열을 생성하는 함수다. 아래 코드 이해가 잘 안된다면 이터러블 포스팅을 참고하면 좋다. 

// 이터레이션 프로토콜을 준수해서 무한 이터러블을 생성하는 함수
// infiniteFibonacci엔 이터러블 객체가 담긴다 {next: ƒ, Symbol(Symbol.iterator): ƒ}
const infiniteFibonacci = (function () {
  let [pre, cur] = [0, 1];

  return {
    // 이터러블 객체 반환
    [Symbol.iterator]() {
      return this;
    },
    next() {
      [pre, cur] = [cur, pre + cur];
      return { value: cur }; // 무한 이터러블이므로 done 프로퍼티를 생략한다
    },
  };
})();

// for of 문을 시작하면 Symbol.iterator 메서드가 호출되고 이터레이터 객체를 반환한다
// 순회를 시작하면 이터레이터 객체에 있는 next 메서드를 호출해서 이터레이터 리절트 객체가 반환된다
// 이터레이터 리절트 객체의 value 프로퍼티 값은 for of 문의 변수에 할당된다.
// 순회는 이터레이터 리절트 객체의 done 프로퍼티가 true 일때까지 계속된다.
// 하지만 위에서 구현한 이터러블 객체는 done 속성이 없으므로 무한 반복한다
for (const fiboNum of infiniteFibonacci) {
  if (fiboNum > 30) break;
  console.log(fiboNum); // 1, 2, 3, 5, 8, 13, 21
}

 

제너레이터를 사용하면 위보다 더 깔끔하게 이터러블을 구현할 수 있다. 제너레이터 함수가 반환하는 제너레이터 객체 자체가 이터러블이자 이터레이터이므로, Symbol.iterator, next 메서드가 포함된 이터러블 객체를 따로 구현하지 않아도 된다.

const infiniteFibonacci = (function* () {
  let [pre, cur] = [0, 1];

  while (true) {
    [pre, cur] = [cur, pre + cur];
    yield cur;
  }
})();

for (const fiboNum of infiniteFibonacci) {
  if (fiboNum > 30) break;
  console.log(fiboNum); // 1, 2, 3, 5, 8, 13, 21
}

 

비동기 처리 ⭐️

💡 제너레이터 함수를 이용해서 비동기 처리를 동기 처리처럼 동작하도록 구현하면 코드가 너무 장황해지고 가독성도 떨어진다. ES8(ES 2017)에 도입된 async/await 키워드를 사용하는게 가장 깔끔하다.

 

제너레이터 함수는 next 메서드와 yield 표현식을 이용해 함수 호출자(caller)와 함수의 상태를 주고받을 수 있다. 이런 특성을 활용해 프로미스를 사용한 비동기 처리를 then, catch, finally 같은 프로미스 후속 처리 메서드 없이 동기 처리처럼 구현할 수 있다.

// 괄호 번호는 작동 순서를 의미한다
const async = (generatorFunc) => {
  const generator = generatorFunc(); // ⑵

  const onResolved = (arg) => {
    const result = generator.next(arg); // ⑸
    return result.done
      ? result.value // ⑼
      : result.value.then((res) => onResolved(res)); // ⑺
  };

  return onResolved; // ⑶
};

async(function* fetchTodo() {
  // ⑴
  const url = 'https://jsonplaceholder.typicode.com/todos/1';
  const response = yield fetch(url); // ⑹
  const todo = yield response.json(); // ⑻
  console.log(todo); // {userId: 1, id: 1, title: 'delectus aut autem', completed: false}
})(); // ⑷

 

위 코드는 아래 순서대로 동작한다.

 

1. 제너레이터 함수를 인자로 받아 async 함수 호출(1). async 함수 내에선 인자로 받은 제너레이터 함수를 실행해서 제너레이터 객체를 생성(2)하고 onResolved 함수를 반환(3)한다. async 함수가 반환한 onResolved 함수는 즉시 호출(4)돼서 방금 생성했던 제너레이터 객체의 next 메서드를 호출(5)한다.
2. next 메서드를 호출(5)하면 제너레이터 함수의 첫번째 yield 문(6)까지 실행된다. next 메서드가 반환한 이터레이터 리절트 객체의 done 프로퍼티 값이 false이므로, 첫번째 yield된 fetch 함수가 반환한 프로미스가(value 속성값), resolve한 Response 객체(비동기 처리 결과)를 onResolved 함수의 인자로 넘겨서 재귀호출(7)한다.
3. onResolved 함수가 인자로 받은 Response 객체를 next 메서드 인자로 전달해서 호출(5)한다. 전달한 인자는 제너레이터 함수의 response 변수(6)에 할당되고 두번째 yield문(8)까지 실행된다.
4. next 메서드가 반환한 이터레이터 리절트 객체의 done 프로퍼티 값이 false이므로, 두번째 yield된 response.json 메서드가 반환한 프로미스가(value 속성값), resolve한 todo 객체를 onResolved 함수의 인자로 넘겨서 재귀호출(7)한다.
5. onResolved 함수가 인자로 받은 todo 객체를 next 메서드 인자로 전달해서 호출(5)한다. 전달한 인자는 제너레이터 함수의 todo 변수(8)에 할당되고, 제너레이터 함수가 끝까지 실행돼서 콘솔을 찍는다.
6. next 메서드가 반환한 이터레이터 리절트 객체의 done 프로퍼티 값이 true 이므로(제너레이터 함수가 끝까지 실행됨) 제너레이터 함수의 반환값인 undefined(value 속성값)를 반환(9)하고 종료한다.

 

제너레이터 컴포지션

---

제너레이터의 특수 문법인 컴포지션 yield* 을 사용하면 제너레이터를 다른 제너레이터에 삽입(임베드)할 수 있다. 아래는 start end 값을 받아 연속된 숫자를 생성하는 제너레이터 함수다.

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

const generator = generateSequence(0, 10);
generator.next(); // {value: 0, done: false}
generator.next(); // {value: 1, done: false}
// ...

 

위 함수를 이용해 숫자 0~9(유니코드 48~57), 알파벳 대문자 A~Z(유니코드 65~90), 알파벳 소문자 a~z(유니코드 97~122)까지 연속적으로 생성하는 함수를 만든다고 가정해본다. 일반 함수를 이용한다면 함수를 여러개 만들고, 각각의 함수 호출 결과를 저장한 후 다시 조합해야 원하는 기능을 구현할 수 있다.

 

yield* 지시자는 실행을 다른 제너레이터에게 위임한다. 아래 코드에선 generateSequence 제너레이터 함수에게 실행을 위임해서, 위임받은 제너레이터가 반복을 수행한 산출 값들을 밖으로 전달하고 있다.

// 컴포지션을 적용한 제너레이터 예시
function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) yield i;
}

function* generatePasswordCodes() {
  yield* generateSequence(48, 57); // 0..9
  yield* generateSequence(65, 90); // A..Z
  yield* generateSequence(97, 122); // a..z
}

let str = '';
for (const code of generatePasswordCodes()) {
  str += String.fromCharCode(code);
  // fromCharCode 메서드는 유니코드(아스키코드) 값을 받아 해당하는 문자열 반환한다
  // 첫번째 컴포지션 : 0 -> 01 -> 012 -> ...
  // 두번째 컴포지션 : ...789A -> ...789AB -> ...789ABC -> ...
  // 세번째 컴포지션 : ...XYZa -> ...XYZab -> ...XYZabc -> ...
}

console.log(str); // 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

function* generateAlphaNum() {
  for (let i = 48; i <= 57; i++) yield i; // yield* generateSequence(48, 57);
  for (let i = 65; i <= 90; i++) yield i; // yield* generateSequence(65, 90);
  for (let i = 97; i <= 122; i++) yield i; // yield* generateSequence(97, 122);
}

let str = '';
for (const code of generateAlphaNum()) {
  str += String.fromCharCode(code);
}

console.log(str); // 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

 

이처럼 제너레이터 컴포지션을 사용하면 한 제너레이터의 흐름을 자연스럽게 다른 제너레이터에게 넘길 수 있다. 중간 결과를 저장하는 추가적인 메모리도 필요하지 않는 장점도 있다.

 

비동기 제너레이터

---

기본 사용법

일반 제너레이터 함수의 모든 값은 동기적으로 생산된다. 즉, 일반 제너레이터는 동기적 문법이다. 제너레이터 함수에 비동기 작업을 하고 싶다면 함수명 앞에 async 키워드를 붙이면 된다. 그럼 generator.next 메서드는 이터레이터 리절트 객체를 프로미스로 감싸서 반환한다. next 메서드가 반환하는 이터레이터 리절트 객체가 프로미스이므로 반복 작업을 할 때도 await 키워드를 붙여야 한다. ex) for await ...of

	동기 제너레이터	비동기 제너레이터(async generator)
선언 방법	function*	async function*
next() 메서드 반환값	{ value: any, done: Boolean }	Promise { value: any, done: Boolean }

 

async function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise((resolve) => setTimeout(resolve, 1000));
    yield i;
  }
}

(async () => {
  const generator = generateSequence(1, 5);
  for await (const value of generator) console.log(value);
  // 1초 간격으로 1~5까지 출력
})();

 

💡 async 제너레이터에서 generator.next() 메서드를 직접 호출할 때도 앞에 await 키워드를 붙여야 한다(next() 메서드가 프로미스를 반환하므로). await 키워드는 async 함수에서만 작동하는 점도 잊지 말것.

(async () => {
    const generator = generateSequence(1, 5);
    const result = await generator.next(); 
    console.log(result) // {value: 1, done: false}
})();

 

비동기 이터러블

위 제너레이터 활용 파트에서 제너레이터를 이용해 동기적으로 작동하는 이터러블을 구현했었다.

const range = {
  from: 1,
  to: 5,
  *[Symbol.iterator]() {
    for (let value = this.from; value <= this.to; value++) {
      yield value;
    }
  },
};

console.log([...range]); // [1, 2, 3, 4, 5]

 

Symbol.iterator는 동기 이터레이터다. 위에서 구현한 동기 이터러블을 비동기로 작동하게 하려면 비동기 이터레이터인 Symbol.asyncIterator로 바꿔주면 된다.

const range = {
  from: 1,
  to: 5,
  async *[Symbol.asyncIterator]() {
    for (let value = this.from; value <= this.to; value++) {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      yield value;
    }
  },
};

(async () => {
  for await (const value of range) console.log(value);
})(); // 1초 간격으로 1~5까지 출력

 

💡 전개 문법은 일반 이터레이터(Symbol.iterator)가 필요하므로 비동기 이터레이터에선 작동하지 않는다.

console.log(...range); // Found non-callable @@iterator

 

활용 예제 — 페이지네이션

게시판 같은 사이트는 글이 많기 때문에 보통 페이지네이션을 이용한다. 이때 서버에선 일정 숫자 단위(한 페이지)로 끊어서 정보를 전송하는게 일반적이다. GitHub의 커밋 이력을 확인할 때도 이 페이지네이션이 활용된다.

 

1. 클라이언트가 https://api.github.com/repos/<repo>/commits URL로 요청 전송
2. 서버(GitHub)에선 30개의 커밋 정보가 담긴 JSON과, 다음 페이지에 대한 Link를 Header에 담아 응답
3. 더 많은 커밋 정보(다음 페이지)가 필요하면 헤더에 담긴 링크를 이용해 다음 요청 전송
4. 반복...

 

구현 방법

async 제너레이터를 이용하면 페이지네이션과 관련한 작업을 손쉽게 구현할 수 있다. 아래 예시에선 첫번째 커밋 리스트를 받아온 후(30개 커밋) 반복문을 통해 모든 커밋을 하나씩 반환(yield)하면, 다시 while 문의 처음으로 돌아가 그 다음 커밋 리스트(두번째)를 받아와서 반환하는 작업을 반복한다.

// 코드 참고 JavaScript Info
async function* fetchCommits(repo) {
  let url = `https://api.github.com/repos/${repo}/commits`;

  while (url) {
    const response = await fetch(url, {
      // (1) GitHub는 모든 요청에 user-agent 헤더를 강제함
      headers: { 'User-Agent': 'Our script' },
    });

    // (2) 커밋 정보가 담긴 배열 [{...}, {...}]
    // { author, comments_url, commit, committer, html_url, node_id, parents, sha, url }
    const body = await response.json();

    // (3) 헤더에서 다음 페이지를 나타내는 URL 추출
    let nextPage = response.headers.get('Link').match(/<(.*?)>; rel="next"/);
    nextPage = nextPage?.[1];
    url = nextPage;

    // (4) 현재 페이지가 끝날 때까지 커밋을 하나씩 반환(yield).
    for (const commit of body) yield commit;
  }
}

(async () => {
  let count = 0;

  for await (const { commit } of fetchCommits('romantech/search-times')) {
    const {
      author: { name, date },
      message,
    } = commit;
    // [Johan/2021-11-14] Merge pull request...
    console.log(`[${name}/${date.match(/(.*?)T/)[1]}] ${message}`);
    if (++count === 100) break; // 100번째 커밋에서 멈춥
  }
})();

 

네트워크 탭 화면. 1페이지(commits) 부터 순차적으로 호출하고 있다

 

정규식으로 URL만 추출하기 ⭐️

response.headers 응답 헤더는 Map과 유사한 형태로 저장되고, 사용하는 메서드도 비슷하다. get 메서드를 이용해서 Link Header를 조회하면 아래처럼 되어 있다. rel=”next” 왼쪽에 있는 주소가 다음 커밋 리스트를 요청할 수 있는 주소다.

# response.headers.get('Link') 조회 결과 예시
<https://api.github.com/repositories/93253246/commits?page=3>; rel="next",
<https://api.github.com/repositories/93253246/commits?page=196>; rel="last",
<https://api.github.com/repositories/93253246/commits?page=1>; rel="first",
<https://api.github.com/repositories/93253246/commits?page=1>; rel="prev"|

 

<, > 화살괄호 안에 있는 URL만 필요하므로 아래처럼 정규식을 사용해서 추출할 수 있다.

 

초록색 하이라이트는 Group 영역, 파란색 하이라이트까지 포함한 부분이 Match된 영역

• . 메타문자 : 임의 문자
• * 수량자 : 0번 이상 일치
• ? 수량자 : 0번 또는 1번 일치 (기본 Greedy)
• ? 수량자는 기본적으로 최대한 많은 값을 매칭시키지만(Greedy로 작동), * 수량자 뒤에 사용하면(*?) 가장 적은 문자열을 매칭시킨다(Lazy로 작동).
• <(...)> 소괄호를 이용해 그룹화하면 <> 화살괄호 안쪽의 ()소괄호로 묶은 그룹이 매칭되고, 매칭된 그룹은 match 메서드가 반환하는 배열의 1번째 인덱스로 접근할 수 있다.

'eeeAiiZuuuuAoooZeeee'.match(/A.*Z/g); // ['AiiZuuuuAoooZ']
// A와 Z사이 임의 문자(.)가 0번 이상 일치하는 것 중 최대한 많은 값으로 반환(Greedy)

'eeeAiiZuuuuAoooZeeee'.match(/A.*?Z/g); // ['AiiZ', 'AoooZ']
// A와 Z사이 임의 문자(.)가 0번 이상 일치하는 것 중 최대한 적은 값으로 반환(Lazy)

'eee<AiiZ>uuuu<AoooZ>eeee'.match(/<(.*?)>/); // ['<AiiZ>', 'AiiZ']
// 반환한 배열의 0번 인덱스는 full match된 영역, 1번 인덱스는 캡처링 그룹 영역
// g 플래그를 붙이면 "그룹"을 포함하지 않은 배열을 반환하므로 g 플래그는 붙이지 않는다
// 일치하는 모든 값을 찾아야할 땐(g 플래그를 붙여야하는 상황) matchAll 메서드를 사용한다

// *? 수량자는 가장 적은 값을 찾으므로 첫번째 <> 화살괄호 안쪽 영역이 매칭되면 찾기를 종료함
// 만약 * 수량자만 붙였다면 첫번째 화살괄호 안쪽 영역이 매칭돼도 멈추지 않고 찾기를 계속해서,
// 마지막 > 부분인 ...AoooZ> 까지 찾기를 계속함. 따라서 AIIZ>uuu<AoooZ 가 매칭됨

 

• .*? 혹은 .+? 수량자와 replace 메서드를 사용해서 태그의 콘텐츠 부분만 추출할 수도 있다

const element = '<pre>Hello World</pre>';
const contents = element.replace(/<.+?>/g, ''); // + 수량자는 1번 이상 일치

console.log(contents); // Hello World
console.log(element.match(/<.+?>/g)); // ['<pre>', '</pre>']

 

레퍼런스

---

• <모던 자바스크립트 Deep Dive> 878p~883p
• JavaScript Info  

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요