블로그 순위 확인하는 자바스크립트 만들기

안녕하세요. 저번 시간에는 웹 스크래핑으로 네이버 블로그의 게시글 가져오는 법을 배웠는데요. 그 데이터들을 사용해서 내 글이 몇 번째에 검색되는지 순위를 확인하는 코드를 만들어 볼 거예요. 이번 시간에도 브라우저의 개발자도구 콘솔을 사용합니다. 시작하기 전에 준비할게 하나 있는데요. 바로 네이버 검색 API입니다. 아래 네이버 개발자 센터를 통해 1분이면 발급이 가능합니다!

 

네이버 검색 API 발급받기

검색 - SERVICE-API

 

1. 오픈 API 이용 신청 클릭 후 Application 등록을 클릭합니다.

Client ID와 Secret Key는 혼자만 알기

 

2. 애플리케이션 이름을 입력하고 사용 API -'검색', 환경 추가 - 'WEB 설정' 선택 후 웹서비스 URL은 'http://localhost'로 입력하면 됩니다.

세가지만 입력하면 끝

 

자! 이렇게 발급 과정이 끝났어요. 너무 간단하죠! 네이버의 검색 API는 하루 25,000번 사용할 수 있어요. 개인이 사용하기에는 충분할 거 같네요.

 

사실은 저번 웹스크래핑 포스팅 때 API 없이 검색 순위까지 확인하는 코드를 만들려고 했지만, 네이버 이용 약관상 웹 스크래핑을 사용해서 검색 결과를 추출하는 건 금지하도록 되어있어요.

 

그래서 네이버 API를 사용해서 합법적으로? 만들게요! 오늘도 개발자 사용하고 계시는 브라우저의 개발자 모드 콘솔에 들어갑니다. 먼저 API가 잘 적용되는지 간단하게 테스트해 볼게요. 콘솔에서 수행하기 때문에 저번과 같이 프록시 서버로 CORS 우회는 필수입니다.

 

혹시 모르시는 분들은 아래 글을 참고해 주세요.(10초면 설정 완료!)

 

자바스크립트로 웹스크래핑 하는 방법

자바스크립트로 웹스크래핑 하는 방법

 

프록시 서버 활성화를 안 하면 아래와 같은 에러가 발생하니 꼭 활성화를 해야 해요.

지긋지긋 CORS

 

 네이버 검색 API로 검색 결과를 가져오는 자바스크립트 코드입니다. 콘솔창에서 바로 실행가능 합니다.

// 네이버 개발자 센터에서 발급받은 클라이언트 ID와 시크릿 키를 입력
const CLIENT_ID = "CLIENT_ID";
const CLIENT_SECRET = "CLIENT_SECRET";

// CORS 회피를 위한 프록시 서버 URL을 설정
const CORS_PROXY = "https://cors-anywhere.herokuapp.com/";

// 네이버 검색 API의 엔드포인트 URL
const NAVER_API_URL = "https://openapi.naver.com/v1/search/webkr";

// 네이버 검색 API를 호출하는 비동기 함수 정의
const search = async (query) => {

  // 프록시 서버 URL에 검색 API URL 추가
  const url = new URL(CORS_PROXY + NAVER_API_URL);
  
  // 요청 URL에 검색어를 추가
  url.searchParams.append("query", query);

  // 검색결과 건수
  url.searchParams.append("display", 10);

  // fetch API를 사용하여 네이버 검색 API를 호출
  const response = await fetch(url, {

    // API 호출에 필요한 헤더를 설정
    headers: {
      "X-Naver-Client-Id": CLIENT_ID,
      "X-Naver-Client-Secret": CLIENT_SECRET,
      "X-Requested-With": "XMLHttpRequest",
    },
  });
  // 응답이 성공적으로 완료되면 결과를 JSON 형식으로 변환하고 출력
  if (response.ok) {
    const data = await response.json();
    console.log(data);
  } else {
    // 실패한 경우 에러 메시지를 출력합니다
    console.error("API 호출 실패");
  }
};

 

search('웹스크래핑') 실행 결과 ▼

함수를 생성하고

 

search('웹스크래핑') 함수 실행

 

테스트용 단어 "웹스크래핑"으로 검색을 해보니 요청한 데이터를 잘 받아왔네요. 테스트이기 때문에 검색 결과 건수를 10건으로 설정했는데, ("display", 10) 부분을 100으로 수정해 주세요.

 

이제 저번 시간에 배운 자바스크립트 코드를 사용해서 글 제목으로 검색하도록 할게요. 최신 게시글 1건만 검색해 볼게요. 검색 결과는 100개까지만 가져오기 때문에 그 안에 없으면 순위에서 제외됩니다.

//본인의 블로그ID를 입력받아 블로그 게시글을 조회
async function fetchRSSFeed(id) {
  const proxyUrl = 'https://cors-anywhere.herokuapp.com/'
  const feedUrl = `https://rss.blog.naver.com/${id}.xml`;

  // 프록시를 통해 RSS 피드 정보 조회
  const response = await fetch(proxyUrl + feedUrl);
  const str = await response.text();
  const data = new window.DOMParser().parseFromString(str, 'text/xml');

  // 피드 내의 모든 item 태그를 선택
  const items = data.querySelectorAll('item');
  //가져온 item태그의 title을 모두 추출 
  const titles = Array.from(items).map(item => item.querySelector('title').textContent);

  // 가져온 title을 출력
  var seq = 0 ;
  for (const title of titles) {
      seq++;
      console.log("%c"+seq+'.' + " %c제목:"+title,"color:blue;","color:green;");
  }
   //위에서 만든 함수를 실행 
   search(titles[0]);
}

 

fetchRSSFeed('ID')를 실행하면 search() 함수를 호출하도록 만들었어요. 실행 결과를 볼까요?

search('웹스크래핑') 실행 결과 ▼

내 글은 어디에..

 

게시글의 제목으로 100건을 조회한 결과예요. 결과가 너무 많아서 제 글이 몇 번째에 있는지 잘 모르겠죠? 그렇다면 조회한 결과의 'link'정보와 제 블로그 글의 url을 비교해서 몇 번째에 있는지 찾으면 돼요. url을 비교하도록 코드를 다시 수정할게요.

 

search() 함수의 응답받는 부분에 블로그 url과 비교하는 코드를 추가해 주세요. url은 search() 호출 시 함께 넣겠습니다.

  if (response.ok) {
    const data = await response.json();
	   data.items.forEach((item, index) => {
      
      //블로그url 비교
      if (item.link.includes(link)) {
        console.log('일치하는 링크 발견:' + item.link);
        console.log('제목: ' + item.title + '  순위:' + (index + 1));
      }
    });
 
  } else {
    // 실패한 경우 에러 메시지를 출력합니다
    console.error("API 호출 실패");
  }

 

fetchRSSFeed() 함수에서 blogUrl을 받아오는 부분을 추가합니다. titles 가져오는 부분 아래에 추가하시면 돼요.

  //블로그 url
  const linkArr = Array.from(items).map(item => item.querySelector('link').textContent);

 

이제 fetchRSSFeed() 함수의 search() 호출 부분을 수정할게요. 게시글 목록에서 최신 글인 첫 번째(0번째) 글을 넣어줍니다.

//최신 게시글 1건만 순위 조회
  search(titles[0],linkArr[0]);

 

이렇게 모든 수정이 완료되었는데요. 이제 최신 게시글의 검색 순위를 확인해 보도록 할게요. 두근두근

1위에는 함정이..

 

게시글 제목으로 검색해 보니 1등이 나왔네요!! 하. 지. 만 블로그 글 제목 전체를 조회하는 경우기 때문에 큰 의미를 두면 안 돼요. 검색을 할 때 저런 식의 긴 제목으로 검색을 하지 않기 때문이에요. 글 제목에서 핵심 단어만 검색을 하도록 수정해야 한답니다.

 

혹시 전체 게시글의 순위를 보고 싶은 분이 계실지 모르겠지만 팁을 드리자면! 아래와 같이 코드를 수정해 주시면 됩니다.

//fetchRSSFeed 함수 부분
async function fetchRSSFeed(id) {
   //기존코드..
   const itemArr = Array.from(items);
   itemArr.forEach(element => {
     search(element);
   });
}

//search 함수 부분
const search = async (query, element) => {
   //기존코드..
  if (response.ok) {
    const data = await response.json();
	   data.items.forEach((item, index) => {
      if (item.link.includes(element.link)) {
        console.log('일치하는 링크 발견:' + item.link);
        console.log('제목: ' + item.title + '  순위:' + (index + 1));
      }
    });
  } else {
    // 실패한 경우 에러 메시지를 출력합니다
    console.error("API 호출 실패");
  }
   //기존코드..
};

 

자! 오늘은 내가 쓴 글이 몇 번째에 검색되는지 확인하는 검색 순위를 조회하는 자바스크립트를 배웠는데요. 많은 분들이 글 하나하나 직접 조회를 하시면서 순위를 확인하시고, 몇몇 분들은 유료 프로그램까지 사용하시더라고요. 물론 유료에 비해 많이 떨어지겠지만 어느 정도는 도움이 될까 싶어서 글을 쓰게 됐습니다.  - 끝 -