네이버 쇼핑 API 불러오기

API를 불러오기전 해야할 일!

1. 애플리케이션 등록: 네이버 오픈 API로 개발하시려면 먼저 'Application-애플리케이션 등록' 메뉴에서 애플리케이션을 등록하셔야 합니다.

   • 애플리케이션 등록시 사용 API를 검색으로 설정해야합니다! (필자는 데이터랩쇼핑api로 설정해서 많은 삽질을 했답니다!)

   • 내 애플리케이션 - playground 에서 데이터가 잘 받아지는지 실험해 보는 것도 좋은 방법입니다!

2. 클라이언트 ID와 secret 확인: '내 애플리케이션'에서 등록한 애플리케이션을 선택하면 Client ID와 Client Secret 값을 확인할 수 있습니다.

3. API 권한 설정: '내 애플리케이션'의 'API 권한관리' 탭에서 사용하려는 API가 체크되어 있는지 확인합니다. 체크되어 있지 않을 경우 403 에러(API 권한 없음)가 발생하니 주의하시기 바랍니다.

4. 네이버 쇼핑 검색 결과를 출력해주는 REST API
   https://developers.naver.com/docs/serviceapi/search/shopping/shopping.md
   이 링크를 참고하여 api불러오기를 진행하였습니다!

---

본격 API 불러오기

1. 우선 리액트에서 axios를 이용하기 위해 npm install axios 를 진행합니다.

import React from "react";
import axios from "axios"; 
import { useState, useEffect } from "react"; 

2. 네이버 쇼핑 검색 결과를 출력해주는 REST API 를 참고하여 api get 요청하기
   비로그인 오픈 API이므로 GET으로 호출할 때 HTTP Header에 애플리케이션 등록 시 발급받은 Client ID와 Client Secret 값을 같이 전송해야합니다.

function App() {
  const [data, setData] = useState([]);
  const shoppingData = async () => {
    const URL = "/v1/search/shop.json"; //URL이 이상하다고 생각하실겁니다! 아래에 계속 됩니다!
    const ClientID = "애플리케이션 등록시 받은 ClientID";
    const ClientSecret = "애플리케이션 등록시 받은 ClientSecret";

    await axios
      .get(URL, {
        params: {
          query: "모자",
          display: 20,
        },
        headers: {
          "X-Naver-Client-Id": ClientID,
          "X-Naver-Client-Secret": ClientSecret,
        },
      })
      .then((res) => setData(res.data.items))
      .catch((e) => {});
  };

  useEffect(() => {
    shoppingData();
  }, []);
  
  return <></>;
}

export default App;

3. package.json에서 proxy 설정해주기

axios에서 URL을 https://openapi.naver.com/v1/search/shop.json으로 했을때 CORS 에러가 발생했습니다. 이 상황은 보통 개발환경에서 프론트 개발서버에서 사용하는 포트와 백엔드서버의 포트가 달라서 발생합니다.

프록시 서버는 클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해 주는 컴퓨터 시스템이나 응용 프로그램을 의미합니다.

따라서 proxy를 설정해 CORS에러를 해결하였습니다.

4. console.log(data)로 api가 잘 받아와졌는지 확인하기

---

진행 하면서 발생한 삽질은 꽤나 있었지만 스스로 openApi를 받아오는건 처음 진행해봤기 때문에 좋은 학습이 된 것 같다. OpenAPI 요청 예제와 정보를 꼼꼼히 읽어보는 것이 매우 중요한 것 같다.