[Vue3] 네이버 책 검색 API 활용하기

Yeonsu Summer·2022년 9월 26일

기능구현

Vue.js

목록 보기

4/6

Step1. 내 애플리케이션 등록하기

https://developers.naver.com/apps/#/register
위 링크에 들어가서 API 이용 신청을 합니다.

애플리케이션 이름: 프로젝트 이름
사용 API: 검색
서비스 환경: WEB 설정
웹 서비스 URL: npm run serve 할 때 뜨는 localhost 주소

Step2. 내 애플리케이션 정보 확인하기

등록이 완료되면 Client ID와 Client Secret 키를 받을 수 있습니다.

Step3. axios 설치하기

터미널에 npm install --save axios 를 입력하여 axios를 설치합니다.

설치가 완료되면 package.json 파일에 이렇게 axios가 추가 된 것을 볼 수 있습니다.

Step4. API 연결하기

App.vue

<script>
import axios from "axios";

export default {
  // ①
  data() {
    return {
      bookListNaver: [],
    };
  },

  // ②
  mounted() {
    this.getBookList();
  },

  // ③
  methods: {
    getBookList() {
      const URL =
        "/v1/search/book_adv.json?sort=date&d_titl=%EC%A3%BC%EC%8B%9D&display=10&start=1";
      const clientId = "0OmrQTgapyIDSKlpDV6F";
      const clientSecret = "g9lRbTKRcG";
      // ③-1
      axios
        .get(URL, {
          headers: {
            Accept: "application/json",
            "X-Naver-Client-Id": clientId,
            "X-Naver-Client-Secret": clientSecret,
          },
        })
      // ③-2
        .then((response) => {
          console.log(response.data);
          this.bookListNaver = this.bookListNaver.concat(response.data.items);
          console.log(this.bookListNaver);
        });
    },
  },
};
</script>

vue.config.js

// ③
module.exports = {
  devServer: {
    proxy: {
      "/v1": {
        target: "https://openapi.naver.com/",
        changeOrigin: true,
      },
    },
  },
};

① 네이버 API에서 받아오는 책 정보들은 bookListNaver 라는 배열에 저장될 예정입니다.

② App.vue가 화면에 렌더링 되었을 때 getBookList() 라는 함수를 호출합니다.

③ getBookList()에 URL, clientId, clientSecret를 선언합니다. 이때 URL을 /v1/~로 선언합니다. /v1의 target은 vue.config.js 파일에 선언합니다.

③-1 필요한 정보를 받아옵니다.

③-2 API를 요청합니다. API가 올바르게 받아졌는지 확인하기 위해 console을 찍어보았습니다.

콘솔창에서 이렇게 뜬다면 성공!

Step5. 리스트 만들기

App.vue

<template>
  <div>
    <ul>
      <li v-for="book in bookListNaver" :key="book">
        <h3 class="book-title">{{ book.title }}</h3>

        <div class="book-info">
          <span>
            {{ book.author }}
          </span>
          <span>
            {{ book.publisher }}
          </span>
          <span>
            {{ book.pubdate }}
          </span>
        </div>

        <strong class="book-price">{{ book.discount }}원</strong>

        <p class="book-desc">{{ book.description }}</p>
        
        <div class="book-image">
          <img :src="book.image" alt="" />
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
// 위와 동일
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
  padding: 8px;
  margin-bottom: 8px;
}

.book-title {
  margin-bottom: 4px;
  color: #3a60df;
}

.book-info {
  font-size: 14px;
  color: #777;
}

.book-info span {
  padding-right: 8px;
}

.book-price {
  color: #f84450;
}

.book-desc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.book-image {
  width: 100px;
  height: 100px;
  overflow: hidden;
}

.book-image img {
  widows: 100%;
  height: 100%;
  object-fit: contain;
}
</style>

~~(스타일 구린거 이해해주세요...)~~

결과값 모음

요소	설명
title	책 제목
link	네이버 도서 정보 URL
image	섬네일 이미지의 URL
author	저자이름
discount	판매 가격. 절판 등의 이유로 가격이 없으면 값을 반환하지 않습니다.
publisher	출판사
isbn	ISBN
description	네이버 도서의 책 소개
pubdate	출간일

상세한 검색을 위한 매개변수 커스텀

매개변수	설명
display	한 번에 표시할 검색 결과 개수(기본값: 10, 최댓값: 100)
start	검색 시작 위치(기본값: 1, 최댓값: 1000)
sort	검색 결과 정렬 방법 - sim: 정확도순으로 내림차순 정렬(기본값) - date: 출간일순으로 내림차순 정렬
d_titl 또는 d_isbn	검색할 ISBN. d_titl과 d_isbn 중 1개 이상의 파라미터를 사용해야 합니다.

⬇ 내가 겪은 오류 모음.. ⬇