사이트 맵은 웹 사이트의 구조와 컨텐츠를 시각화한 것입니다. 이를 통해 사용자는 웹 사이트를 빠르게 탐색하고 검색 엔진은 웹 사이트를 쉽게 분석할 수 있습니다. 자바스크립트 fetch API는 웹 사이트의 페이지 정보를 가져오는 데 사용되며, 이를 활용하여 사이트 맵을 생성할 수 있습니다.

사이트 맵 생성 기본 개념

사이트 맵을 생성하기 위해서는 웹 사이트의 모든 페이지 URL을 수집해야 합니다. 이를 위해 fetch API를 사용하여 각 페이지에 대한 요청을 보낼 수 있습니다. fetch API는 비동기적으로 HTTP 요청을 보내고 응답을 받을 수 있는 강력한 도구입니다.

자바스크립트에서 fetch API를 사용하여 페이지 정보를 가져올 경우, 일반적으로 XML이나 JSON 형식으로 데이터를 받게 됩니다. 이 데이터를 분석하여 사이트 맵을 생성할 수 있습니다.

fetch API를 사용한 사이트 맵 생성 예제

아래는 자바스크립트를 사용하여 fetch API를 이용해 사이트 맵을 생성하는 예제입니다.

const siteMap = [];

// 사이트의 기본 URL
const baseUrl = 'https://example.com';

// 페이지 정보를 가져와서 사이트맵에 추가하는 함수
async function getPageInfo(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();

    // 페이지 URL을 사이트맵에 추가
    siteMap.push(url);

    // 페이지 내부에 있는 링크를 찾아 추가
    const links = data.links;
    links.forEach(async (link) => {
      const absoluteUrl = new URL(link, url).href;
      await getPageInfo(absoluteUrl);
    });
  } catch (error) {
    console.error('Error:', error);
  }
}

// 사이트맵을 생성하는 함수
async function generateSiteMap() {
  await getPageInfo(baseUrl);
  console.log('Site Map:', siteMap);
}

// 실행
generateSiteMap();

이 예제에서는 baseUrl 변수에 웹 사이트의 기본 URL을 설정하고, getPageInfo 함수를 사용하여 해당 URL의 페이지 정보를 가져옵니다. 페이지 정보에서는 페이지에 포함된 링크들을 추출하여 재귀적으로 getPageInfo 함수를 호출하고, 사이트 맵 배열에 페이지 URL을 추가합니다. 실행하면 사이트 맵 배열이 출력됩니다.

결론

자바스크립트 fetch API를 사용하여 사이트 맵을 생성하는 방법을 알아보았습니다. fetch API를 이용하면 비동기적으로 페이지 정보를 가져올 수 있으며, 이를 활용하여 사이트 맵을 동적으로 생성할 수 있습니다. 사이트 맵은 사용자 경험을 향상시키고 검색 엔진 최적화에도 도움이 되는 중요한 요소입니다.