빠른 시작
이 빠른 시작에서는 Guida의 Scripting Console에서 페이지를 열고, DOM 안정화를 기다린 뒤, 데이터를 워크스페이스에 저장합니다.
1. Guida 열기
섹션 제목: “1. Guida 열기”Guida를 실행하고 일반 브라우저와 같은 방식으로 원하는 페이지를 엽니다. 아직 워크스페이스를 열지 않았다면 작업 폴더를 선택해 스크립트, 저장소, 큐, 설정을 프로젝트 단위로 유지할 수 있습니다.
2. Scripting Console 열기
섹션 제목: “2. Scripting Console 열기”메뉴에서 Tools > Scripting Console 을 엽니다. 편집기에서는 JavaScript, Lua, Janet을 실행할 수 있습니다. 처음에는 JavaScript가 가장 다루기 쉽습니다.
3. 첫 스크립트 붙여넣기
섹션 제목: “3. 첫 스크립트 붙여넣기”await g.nav.navigateToUrl("https://example.com");await g.dom.waitForDomStable();
const url = await g.page.getUrl();const html = await g.page.getDom();
g.store.put("pages", "example", { url, htmlLength: html.length, capturedAt: new Date().toISOString(),});
g.log("저장됨: " + url);F5 를 누르거나 실행 버튼을 사용합니다.
4. 결과 확인
섹션 제목: “4. 결과 확인”스크립트는 페이지를 열고, DOM이 안정되기를 기다린 뒤, URL과 DOM 크기를 워크스페이스 저장소에 저장합니다. 로그는 콘솔에 표시됩니다.
저장된 데이터는 워크스페이스 안에 남습니다. 계정이나 클라우드 동기화는 필요하지 않습니다.
5. 수정해서 시도하기
섹션 제목: “5. 수정해서 시도하기”다음으로 현재 페이지에서 링크를 모아 봅니다.
await g.dom.waitForDomStable();
const links = await g.dom.getElements("a", ["innerText", "href"]);
for (const link of links.slice(0, 10)) { g.log(link.innerText + " -> " + link.href);}g.dom.getElements()는 셀렉터와 일치하는 요소에서 지정한 속성을 가져옵니다. 페이지에 맞게 셀렉터나 저장 위치를 바꿔 보세요.
다음에 읽을 것
섹션 제목: “다음에 읽을 것”- 스크립팅 개요 - 엔진, 비동기, 오류 처리
- 브라우저와 DOM API - 탐색, 클릭, DOM, 스크린샷
- 데이터와 스토리지 API - 저장소, 큐, 검색, 외부 데이터베이스
- 페이지 데이터를 추출하고 저장하기 - 실용적인 추출 레시피