naver datalap api를 활용한 data visualization 구현하기(Node.js + Vue + chart.js)

2021년 2월 25일 네이버 검색어 서비스가 종료되었다.

그에따라 나름 재미있게 실시간 검색어를 본 입장으로써 뭔가 아쉬운느낌이 들었다.

실시간 검색에 대한 대체제로 네이버에서 데이터랩 API를 사용하려고 한다. 

해당 데이터랩 API를 활용하게 되면 특정 주제에 따라 얼마나 검색이 많이 되었는지에 대한 비율을 알 수 있다. 

developers.naver.com/products/service-api/datalab/datalab.md

데이터랩 - SERVICE-API

 

만들 프로젝트의 결과물은 아래와 같다. 

 

 

github.com/loy124/data-visualization

loy124/data-visualization

 

 

사용 스택

Node.js(express) 

API 요청및 수신 역할(네이버 datalab api는 프론트단에서 axios를 활용한 호출이 되지 않는다.)

• express
  • 대표적인 Node.js의 백엔드 프레임워크, API를 구성한다
• axios
  • 대표적인 Ajax 라이브러리, 네이버 데이터랩 API를 호출 할 때 사용 
• dotenv
  • 환경 변수 관리 라이브러리 
  • navaer api의 클라이언트 아이디와 비밀번호를 따로 관리하기 위함
• cors
  
  • CORS 이슈를 해결하기 위한 라이브러리 
  • developer.mozilla.org/ko/docs/Web/HTTP/CORS

 

• Vue.js
  
  프론트 파트 
  • chartjs
    • 대표적인 프론트엔드 차트 라이브러리 
  • vue-chartjs
    • vue에서 chartjs를 쉽게 사용하기위한 wrapping 라이브러리
  • element-ui 
    • Vue에서 자주 사용하는 프론트엔드 UI 라이브러리

폴더 구성

API 가입하기 

developers.naver.com/main/ 에 접속후 로그인 -> 애플리케이션 등록을 해준다,  

 

 

 

위와같이 셋팅을 진행해준다 (127.0.0.1 을 추가해주는 이유는 로컬 환경에서 사용하기 때문이다.)

성공적으로 ID와 Secret이 발급되었다.

 

백엔드 구축하기 

먼저 backend에 npm --init을 통해 package.json 을 생성해준다. 

 

그후 

npm i axios express cors dotenv

 

 

먼저 환경변수를 위한 .env 파일을 만든다

 

 

클라이언트 아이디에 네이버에서 발급한 아이디, SECRET에는 비밀번호를 넣어준다.

 

 

 

index.js를 생성해준다. 

const express = require("express");
const app = express();
const cors = require("cors");
app.use(cors());
const dotenv = require("dotenv");
const axios = require("axios");
const PORT =8080;

dotenv.config();

app.get("/data", async(req, res) => {
  try {
    const request_body = {
      startDate: "2017-10-01",
      endDate: "2020-10-30",
      timeUnit: "month",
      keywordGroups: [
        { groupName: "치킨", keywords: ["BBQ", "BHC", "교촌치킨"] },
        { groupName: "떡볶이", keywords: ["엽기떡볶이","신전떡볶이", "배떡"] },
      ],
    };
    const url = 'https://openapi.naver.com/v1/datalab/search';
    const headers =  {
      'Content-Type': 'application/json',
      'X-Naver-Client-Id': process.env.CLIENT_ID,
      'X-Naver-Client-Secret': process.env.CLIENT_SECRET,
    };
    const result = await axios.post(url,request_body,{
      headers:headers
    })
    console.log(result.data);
    return res.json(result.data);
  } catch (error) {
    console.log(error);
    return res.json(error);
  }
});


app.listen(PORT, () => console.log(`this server ${PORT}`))

 

해당까지 진행하였으면 서버를 켠 뒤  POSTMAN을 활용해서 데이터 요청을 보낸다.

 

정상적으로 요청에 대한 response가 도착했다

이제 해당 request_body 부분을 하드코딩이 아닌 요청값을 받아 올 수 있게 수정해주면 된다.

 

index.js

const express = require("express");
const app = express();
const cors = require("cors");
app.use(cors());
const dotenv = require("dotenv");
const axios = require("axios");

const PORT = 8080;

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

dotenv.config();

app.post("/data", async (req, res) => {
  try {
    const {
      startDate,
      endDate,
      timeUnit,
      device,
      gender,
      keywordGroups,
    } = req.body;
    const request_body = {
      startDate: startDate,
      endDate: endDate,
      timeUnit: timeUnit,
      device: device === "all" ? "" : device,
      gender: gender === "all" ? "" : gender,
      keywordGroups: keywordGroups,
    };
    console.log(req.body);

    const url = "https://openapi.naver.com/v1/datalab/search";
    const headers = {
      "Content-Type": "application/json",
      "X-Naver-Client-Id": process.env.CLIENT_ID,
      "X-Naver-Client-Secret": process.env.CLIENT_SECRET,
    };
    const result = await axios.post(url, request_body, {
      headers: headers,
    });
    console.log(result.data);

    return res.json(result.data);
  } catch (error) {
    console.log(error);
    return res.json(error);
  }
});

app.listen(PORT, () => console.log(`this server ${PORT}`));

 

수정했으면 다시 POSTMAN을 통해 요청을 보내본다.

 

 

이로써 백엔드 파트 구현은 마무리되었다. 

 

프론트엔드 파트 

프론트의 스택은 Vue.js(2.X ) + chart.js를 사용하였다.

 

먼저 2버전의 Vue-CLI를 통해 프로젝트를 생성해준다. 

 

vue 2버전대에 babel, router, vuex까지 있는 cli를 생성해주었다.

 

 

 

그후 필요한 모듈들을 다운받아 준다.

npm i element-ui moment chart.js vue-chartjs

 

 

components/ReactiveBarChart.js

import {Line, mixins } from "vue-chartjs";
const { reactiveProp } = mixins;
export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ["options"],
  mounted() {
      console.log(this.options);

    this.renderChart(this.chartData, this.options);
  }
};