🌱 준비
먼저 네이버 오픈 API 공식 문서를 보고 순서대로 설정을 하면 됩니다.
네이버 API도 다른 오픈 API와 마찬가지로 서비스 이용 신청을 해야 합니다.
그래서 애플리케이션 등록이라는 것을 해야하는데 프로젝트 생성과 같은 개념이라고 생각하면 됩니다.
일단 네이버 개발자센터에 접속하여 '서비스 API' 탭으로 들어가줍니다.
그리고 이용약관에 동의하고, 휴대폰 번호로 개인 인증을 마치면 애플리케이션 등록 단계로 넘어갑니다.
애플리케이션 이름을 내가 만들고 있는 서비스의 프로젝트명과 똑같이 하거나 원하는 이름으로 입력해줍니다. 사용 API는 복수로 선택이 가능한데 일단 검색, 데이터랩을 선택하고 등록하기를 눌러주면 비로그인 오픈 API 서비스 환경 메뉴가 나옵니다.
별도의 환경을 설정해줘야 하는 게 아니라면 PC에서 웹으로 접속할 것이기 때문에 localhost를 웹 설정의 웹 서비스 URL로 넣어줍니다. 그리고 등록하기 버튼을 마찬가지로 눌러줍니다.
생성한 내 애플리케이션의 정보를 조회하거나 수정하고 싶은 내용이 있다면 위 이미지처럼 상단 네비게이션 바에서 'Application' 탭을 선택한 후 '내 애플리케이션'으로 가줍니다.
그럼 애플리케이션 목록과 API 상태를 확인할 수 있고, 목록에서 애플리케이션 이름을 클릭하면
클라이언트 ID(네이버에서 부여한 나의 고유 앱 ID), 클라이언트 시크릿(API 키)을 확인할 수 있습니다.
또한 비로그인 오픈 API 당일 사용량, 통계, 멤버관리 등의 지표도 확인할 수 있습니다.
🌱 사용 : 뉴스 검색 결과
URL은 json으로 응답 데이터가 오는 형식을 사용하기 위해 JSON 반환 형식을 선택합니다. axios나 fetch를 사용하여 GET 형식의 요청을 보내면 됩니다.
요청에 넣어야 할 정보
axios의 인스턴스를 생성하여 params를 지정하는 방식이나 URL 경로에 변수를 탬플릿 리터럴로 채우는 방식으로 쿼리 파라미터에 정보를 담아 보내야 합니다. 그리고 헤더에는 내 애플리케이션 탭에서 확인할 수 있는 클라이언트 ID와 클라이언트 시크릿을 담아서 보냅니다. 클라이언트 ID와 클라이언트 시크릿은 중요한 보안 정보이기 때문에 환경 변수 파일로 빼둡니다.
구현 코드
import axios from 'axios';
/** 네이버 검색 API를 사용
- getArticle() : 실제 API 사용
- useMock() : 따로 저장해놓은 데이터 사용
*/
export default class Naver {
constructor() {
this.getData = axios.create({
baseURL: '/v1/search/news.json?',
params: {
display: 15,
start: 1,
sort: 'sim',
},
});
}
async getArticle(keyword) {
try {
const response = await axios.get({
params: {
query: encodeURIComponent(keyword),
},
headers: {
'X-Naver-Client-Id': process.env.REACT_APP_NAVER_CLIENT_ID,
'X-Naver-Client-Secret': process.env.REACT_APP_NAVER_CLIENT_SECRET,
Accept: '*/*',
},
});
console.log(response.data.items);
return response.data.items;
} catch (error) {
console.log('네이버 뉴스 기사 다운로드 중 에러 : ', error);
return Promise.reject(error);
}
}
async useMock() {
try {
const response = await axios.get('/data/article.json');
return response.data.items;
} catch (error) {
console.log('네이버 목데이터 다운로드 중 에러 : ', error);
return Promise.reject(error);
}
}
}
유튜브 데이터 API를 호출하는 함수를 클래스에 모아둔 것과 같은 방식으로 구현했습니다. 지금 코드가 API를 호출하는데에 필요한 정보를 담아 요청을 성공적으로 보내는 코드가 맞지만, 실제로 프로젝트에서 호출하게 되면 에러가 발생합니다. 악명 높은 CORS 에러입니다. 정확히는 CORS가 에러 이름이 아니라, SOP라는 브라우저 정책이 CORS를 허가하지 않아서 발생하는 에러죠. 해당 문제 때문에 API를 호출하여 정상적으로 호출할 수 없는 걸 해결하려면 package.json에 프록시(proxy)를 설정해줘야 합니다.
"proxy": "https://openapi.naver.com"이 해결법을 사용하면 개발 환경이 local이라 개발중에는 해결이 되나, 배포할 때는 사용할 수 없다는 문제점이 여전히 존재한다고 합니다. 실제로 네이버에서는 권장하는 방법이 백엔드 서버에서 호출하는 방법입니다.
백엔드를 개발할 수 없는 상황이라 포스트맨을 사용하여 json 데이터를 public/data 디렉토리에 목데이터로 저장하여 해당 데이터를 사용하는 메서드를 구현해뒀습니다. 이후에 NextJS를 사용하면서 이 문제는 API 라우트로 호출하는 것으로 해결하였습니다.
