[React] Naver 지역 API 사용하기

 

React logo (출처: Wikipedia)

 

다양한 API를 활용하는 프로젝트를 만들기 전에 먼저 Naver API를 사용 방법을 연습해 보려고 한다.

검색한 지역의 맛집 리스트를 보여주는 기능을 만들어 보기 위해 Naver 검색 API를 활용하였다.

 

이 글에서 정리하는 내용:

• Naver API 사용 신청하기
• React 프로젝트에서 Naver API 사용하기

 

 

Naver API 사용 신청하기

1. Naver Developers 홈페이지로 들어간다.

https://developers.naver.com/main/

NAVER Developers

 

2. API 이용 신청을 한다.

상단 메뉴에서 Documents > 검색을 클릭한 다음에, 왼쪽 메뉴에서 지역을 선택하면 지역 API에 대한 설명을 볼 수 있다.

여기서 오픈 API 이용 신청 버튼을 클릭하면 된다.

 

신청 방법은 다음 문서를 참고해서 순서대로 따라 하면 된다.

https://developers.naver.com/docs/common/openapiguide/appregister.md#%EC%82%AC%EC%A0%84-%EC%A4%80%EB%B9%84-%EC%82%AC%ED%95%AD

사전 준비 사항 - Open API 가이드

 

나는 로컬 환경에서 일단 테스트 해볼 용도로 사용하기 위해 웹 서비스 URL은 http://localhost:3000을 입력하였다.

 

모두 입력 후, 완료하기 버튼을 클릭하면 내 애플리케이션에서 사용할 수 있는 client ID와 Secret을 알려준다.

 

 

React 프로젝트에서 Naver API 사용하기

나는 create-react-app 으로 생성한 리액트 프로젝트를 사용하였다.

 

1. src 폴더 안에 config.js 파일 생성 후, 다음과 같이 네이버 client ID와 Secret 정보를 저장한다.

그리고 github에 push 하기 전에 꼭 .gitignore 파일에 config.js를 적어줘야 한다!

그렇게 하면 github 저장소에 이 파일이 push 되지 않기 때문에 이 정보를 다른 사람들은 못 보게 보호할 수 있다.

 

2. axios를 설치한다.

npm install axios

 

3. package.json 파일에서 proxy를 설정한다.

이 과정이 필요한 이유는 CORS(Cross-Origin Resource Sharing) 문제를 예방하기 위함인데, 이 과정을 진행하지 않고 바로 API 서버에 데이터를 요청하면 CORS 에러가 발생하게 된다..

proxy를 설정하기 위해서는 package.json 파일에 다음 내용을 추가해주면 된다. 

"proxy": "https://openapi.naver.com",

 

지금 하고 있는 프로젝트는 연습용이라서 Node.js 서버를 생성하지 않았는데, 만약에 서버를 생성해서 API를 사용하게 되면 이 과정은 필요가 없다.

다음에는 서버를 생성해서 API를 사용하는 방법도 해봐야겠다.

 

4. src 폴더 안에 hooks 폴더를 만들고, useNaver.js 파일을 추가한다.

예전에 프로젝트할 때 사용했던 useAsync.js 파일을 참고해서 다음과 같이 useNaver 훅을 생성하였다.

import { useReducer, useEffect } from 'react';
import { Naver_ID, Naver_Secret } from '../config';
import axios from 'axios';

function reducer(state, action) {
    switch(action.type) {
        case 'LOADING':
            return {
                loading: true,
                data: null,
                error: null
            };
        case 'SUCCESS':
            return {
                loading: false,
                data: action.data,
                error: null
            };
        case 'ERROR':
            return {
                loading: false,
                data: null,
                error: action.error
            };
        default:
            return state;
    }
}

function useNaver(search) {
    const [ state, dispatch ] = useReducer(reducer, {
        loading: false,
        data: null,
        error: null
    });

    const fetchData = async () => {
        try {
            dispatch({ type: 'LOADING' });

            const { data : { items }} = await axios.get(
                '/v1/search/local.json', {
                params: {
                    query: search + ' 맛집',
                    display: 5
                },
                headers: {
                    'X-Naver-Client-Id': Naver_ID,
                    'X-Naver-Client-Secret': Naver_Secret
                },
            });

            dispatch({ type: 'SUCCESS', data: items });
        }
        catch(err) {
            dispatch({ type: 'ERROR', error: err });
        }
    }

    useEffect(() => {
        fetchData();
    }, [search]);

    return state;
}

export default useNaver;

 

여기서 중요한 점은 axios.get을 사용하여 데이터를 가져올 주소는 앞서 proxy에 설정해 놓은 주소 뒷부분부터 입력해야 한다는 것이다.

 

이 hook을 사용하면 데이터를 가져오고 있는지(loading), 데이터를 성공적으로 가져왔는지(success), 오류가 발생했는지(error)를 구분하는 reducer를 이용하여 state를 관리하게 된다.

 

따라서 컴포넌트에서는 다음과 같이 각각 상태에 따라 다른 화면이 나타날 수 있게 적용할 수 있다.

ListArea.js

import useNaver from '../hooks/useNaver';

function ListArea({ search }) {
    const state = useNaver(search);
    const { loading, data, error } = state;

    if (loading) return <ul id='storeList'><li>로딩중</li></ul>;
    if (error) return <ul id='storeList'><li>에러가 발생하였습니다.</li></ul>;
    if (!data) return <ul id='storeList'><li>데이터를 불러오지 못하였습니다.</li></ul>;

    return (
        <ul id='storeList'>
            {
                data.map(item => 
                    <li key={item.title}>
                        <strong>{item.title}</strong>
                        <p>{item.address}</p>
                        <p>
                            <a href={item.link} target='_blank' 
                               rel='noopener noreferrer'
                            >
                                {item.link}
                            </a>
                        </p>
                    </li>    
                )
            }
        </ul>
    );
}

export default ListArea;

 

 

최종적으로 완성된 화면에서는 지역명만 검색하면 맛집 리스트를 볼 수 있다.

연습용이라서 최대한 간단하게 디자인 하였다. 😅

 

문제는 Naver 지역 API를 사용하여 가져올 수 있는 데이터는 5개까지가 최대라는 것이다...

이 문제점은 어떻게 보완할 수 있을지 한번 고민해 봐야겠다. (ex. 카카오 맵 API와 같이 사용하는 방법 참고)

 

 

---

참고

https://msyu1207.tistory.com/entry/React%EB%A1%9C-%EC%98%81%ED%99%94-%EC%A0%95%EB%B3%B4%EB%A5%BC-%EA%B2%80%EC%83%89%ED%95%B4%EB%B3%B4%EC%9E%90-%EB%91%90%EB%B2%88%EC%A7%B8-%EB%84%A4%EC%9D%B4%EB%B2%84-API-%EC%82%AC%EC%9A%A9-CORS-%EC%84%A4%EC%A0%95-%ED%95%98%EA%B8%B0#toc-%F0%9F%93%A2CORS%EB%A5%BC%20%EC%B2%98%EB%A6%AC%ED%95%98%EB%8A%94%20%EB%B0%A9%EB%B2%95%20ONE