← 블로그로 돌아가기

첫 g.* 스크립트 작성하기

· 2분 읽기 ·
tutorial

Guida를 설치하고 몇 개의 페이지를 열어 보고 설정도 조금 살펴봤다고 가정해 보겠습니다. 다음에는 무엇을 해야 할까요?

이 글에서는 첫 실용 스크립트를 작성합니다. 페이지로 이동하고, 데이터를 가져오고, 쓸모 있는 위치에 저장하는 스크립트입니다.

JavaScript를 조금이라도 써 본 적이 있다면 자연스럽게 읽을 수 있습니다. 경험이 없어도 API는 작은 조각부터 익힐 수 있습니다.

스크립트 편집기 열기

Ctrl+N 을 누르거나 File > New Script 를 엽니다. 빈 편집기 탭이 표시되고 IntelliSense를 사용할 수 있습니다. g.를 입력하면 g.store, g.queue, g.search 등으로 나뉜 API가 표시됩니다.

많은 JavaScript 스크립트는 다음 형태로 만들 수 있습니다.

async function main() {
  // 여기에 코드 작성
}


await main();

async가 필요한 이유는 많은 g.* 메서드가 live browser와 상호작용하기 때문입니다. 편집기에서 F5 를 누르면 실행됩니다.

이동하고 기다리기

먼저 Hacker News를 열고 DOM이 안정될 때까지 기다립니다.

async function main() {
  await g.nav.navigateToUrl("https://news.ycombinator.com");
  await g.dom.waitForDomStable();
}


await main();

g.nav.navigateToUrl()은 활성 브라우저 탭에 URL을 로드합니다. g.dom.waitForDomStable()은 DOM 변화가 멈출 때까지 기다립니다. 늦게 표시되는 요소나 spinner가 있는 페이지에서는 이 대기가 중요합니다.

g.* 메서드의 사고방식

JavaScript에서는 g.* 메서드가 결과를 직접 반환하고 실패하면 예외를 던집니다. 필요하면 try/catch를 사용합니다.

try {
  const elements = await g.dom.getElements(".item", ["innerText"]);
  g.log("찾은 항목 수: " + elements.length);
} catch (e) {
  g.log("항목을 찾지 못했습니다: " + e.message);
  return;
}

g.log()는 Console 패널에 메시지를 씁니다.

페이지에서 데이터 가져오기

Hacker News의 제목과 링크를 가져와 보겠습니다.

async function main() {
  await g.nav.navigateToUrl("https://news.ycombinator.com");
  await g.dom.waitForDomStable();


  const items = await g.dom.getElements(
    ".titleline > a",
    ["innerText", "href"]
  );


  g.log("글 수: " + items.length);


  for (const item of items) {
    g.log(item.innerText);
  }
}


await main();

g.dom.getElements(selector, attributes)는 DOM을 조회하고 지정한 속성을 포함하는 객체 배열을 반환합니다. document.querySelectorAll()과 비슷하지만 DOM node가 아니라 구조화 데이터로 돌아온다는 점이 다릅니다.

워크스페이스에 저장하기

결과를 나중에 사용하려면 워크스페이스 저장소에 저장합니다.

async function main() {
  await g.nav.navigateToUrl("https://news.ycombinator.com");
  await g.dom.waitForDomStable();


  const items = await g.dom.getElements(".titleline > a", ["innerText", "href"]);


  for (const item of items) {
    const key = item.href;
    g.store.put("hn-stories", key, {
      title: item.innerText,
      href: item.href,
      capturedAt: new Date().toISOString(),
    });
  }


  g.log("저장했습니다: " + items.length + "개");
}


await main();

이 시점에서 스크립트는 단순한 브라우저 조작이 아니라 재사용 가능한 작은 데이터 파이프라인이 됩니다.

다음에 시도할 것