[Javascript] 사이트에서 API GET을 이용하여 정보 추출하고 DB에 추가하기

 

 

1. 개요

사이드 프로젝트를 진행하면서 기술 스택 목록이 필요했습니다. 

예를 들어, AWS, Javascript, spring, java 등등등 ...을 DB 테이블에 저장하여 그걸 사용해야 하죠.

 

여기저기서 찾아봤지만 많은 기술스택이 정리되어 있는 곳도 없었으며, 저희는 DB에 저장해야 했기 때문에

고생이 많을 것이라 생각했습니다.

 

하지만 우연찮게 codenary라는 곳을 발견했고, 기술 스택별로 기업이 잘 정리되어 있는 것을 활용할 수 있겠구나 생각했습니다.

 

그리고 뽑아왔습니다.

 

 

 

2. 정보 추출하기

2.1. codenary 관찰

codenary.com > 기술 스택 > 기술별로 보기

codenary의 한 페이지입니다.

기술 스택 목록을 뽑아야 하는 입장에서 무척이나 눈길이 가는 구성입니다.

 

Agit 이라는 기술스택이 크게 있고, 그 아래에 Agit을 사용하는 회사들의 목록이 나열되어 있습니다.

또한 페이지가 나뉘어 있고,

a → z 순으로 정렬되어 있습니다.

 

 

2.2. 개발자 도구 이용

위의 페이지를 새로고침했을 때 요청 상태

좌측의 Name을 보면 list?page=1 을 통해 우측의 Response처럼 응답을 받고 있음을 확인했습니다.

그래서 먼저 해당 부분을 json beauty로 살펴보았습니다.

 

Code Beautify > JSON Viewer

좌측은 Response에서 복사해온 응답이고, 우측은 해당 데이터를 이쁘게 보여주고 있습니다.

 

Request URL

또한, GET 요청을 위한 API도 확인할 수 있습니다.

 

 

2.3. VS Code와 Javascript를 사용하여 GET 요청

2.3.1. Code Runner 설치

VS Code > 확장 > Code Runner 설치

 

2.3.2. NodeJS 설치

브라우저 > nodejs.org/ko/download > NodeJS 설치

 

2.3.3. get.js 파일 생성 및 실험

function request() {
  fetch('https://api.codenary.co.kr/techstack/list?page=1', {
    method: 'GET',
  })
  .then(response => {
    return response.json();
  })
  .then(data => {
    for (let i = 0; i < data.length; i++) {
      console.log(data[i].name);
    }
  });
}
request();

실행은 Windows 기준 Ctrl + Alt + N입니다. 파일 저장을 꼭 해줘야 합니다.

 

fetch( ) 를 통해 API GET 요청을 하고, data를 받아옵니다.

이후에 반복문을 돌리며 배열의 name을 읽습니다. 이건 위의 JSON 형태를 보면 알 수 있습니다.

 

get.js 실행 결과

위처럼 기술스택만 잘 뽑아왔습니다. 

 

2.3.4. 페이지별로 GET 요청을 하여 모두 가져오기

codenary의 페이지를 보면 총 248개의 기술 스택을 가지고 있는 것을 알 수 있습니다.

한 페이지에 기술스택이 12개씩 분포되어 있으니까 페이지는 1 ~ 21까지 존재하겠네요.

 

그러면 get.js와 같은 코드를 /list?page=1 의 페이지를 바꿔가며 계속 실행해야 합니다. 이를 promises로 해결했습니다.

 

let promises = [];
for (let i = 1; i <= 21; i++) {
  promises.push(fetch(`https://api.codenary.co.kr/techstack/list?page=${i}`));
}

Promise.all(promises)
.then((res) => res.map((el) => el.json()))
.then((data) =>Promise.all(data))
.then((data) => {
  let str = ``;
  for (let i = 0; i < 20; i++) {
    for (let j = 0; j < 12; j++) {
      console.log(data[i][j].name);
    }
  }
  for (let j = 0; j < 8; j++) {
    console.log(data[20][j].name);
  }
  
  console.log(str);
  
});

모든 GET 요청을 밀어넣고 실행했습니다.

 

그리고 반복문의 i는 페이지, j는 기술스택을 의미합니다. 

그러면 위와 같이 모든 기술스택을 가지고 올 수 있습니다.

 

 

 

3. DB에 넣을 수 있도록 조정하기

제가 아는 바로는 DB에 넣기 위해서는 insert를 진행해야 합니다.

insert into <table> value ( )의 형태이죠.

 

위에서 얻은 기술 스택들에 포맷을 씌워 모양을 만들어 줬습니다.

let promises = [];
for (let i = 1; i <= 21; i++) {
  promises.push(fetch(`https://api.codenary.co.kr/techstack/list?page=${i}`));
}
Promise.all(promises)
.then((res) => res.map((el) => el.json()))
.then((data) =>Promise.all(data))
.then((data) => {
  let str = ``;
  for (let i = 0; i < 20; i++) {
    for (let j = 0; j < 12; j++) {
      //console.log(data[i][j].name);
      str += `insert into technology (detail) values ('${data[i][j].name}');\n`;
    }
  }
  for (let j = 0; j < 8; j++) {
    //console.log(data[20][j].name);
    str += `insert into technology (detail) values ('${data[20][j].name}');\n`;
  }
  
  console.log(str);
});

 

결과

그리고 이걸 복사해서 따로 .sql 파일을 만들었습니다.

 

 

 

4. 후기

사실 Javascript를 잘 몰라서 

1. Java말고 Javascript를 사용하여 API GET 요청으로 데이터 받을 수 있는지 확인한다
2. 모든 페이지를 받아올 수 있는지 확인한다
3. 데이터를 포매팅한다
4. 파일로 뽑아낸다

는 과정을 구상하고 계속 구글링으로 찾아가면서 해봤는데 비교적 쉬웠습니다.

 

필요에 따라 자주 활용할 것 같아요.