프로젝트 진행 중 뉴스 검색 파트를 맡게 되어 네이버 API를 사용해 보았다.
국내 최고의 IT 기업답게 API 설명서가 매우 잘 작성되어 있었고, APP 등록이나 키 발급도 별도의 복잡한 과정 없이 마칠 수 있었다.
1. API 이용 신청
어플리케이션 등록을 마쳤다면, 어플리케이션 정보에서 ID와 비밀키를 발급받은 것을 확인 할 수 있다.
AW와 다르게 네이버는 키를 상시로 확인 가능하니 다른 곳에 무조건 적어둘 필요는 없다.
어플리케이션 등록을 마쳤다면, 어플리케이션 정보에서 ID와 비밀키를 발급받은 것을 확인 할 수 있다.
AW와 다르게 네이버는 키를 상시로 확인 가능하니 다른 곳에 무조건 적어둘 필요는 없다.
다만, React에서 사용할 때는 보안 이슈 방지를 위해 .env 파일에 저장해 두자.
키까지 발급 받았다면, 본인이 사용할 도메인을 등록해줘야 한다.
우선 개발 환경인 localhost:3000을 등록해 주고, 이미 서비스를 배포했다면 배포 링크를 적어주면 된다.
5000이 있는 이유는 이후에 설명.,.,
API는 정상 작동 하는 것 같다. 이제 개발 환경으로 넘어와 직접 요청을 보내보자.
2. 클라이언트에서 요청 보내기
요청은 다음과 같이 보낼 수 있다
axios.get('https://openapi.naver.com/v1/search/blog.json?query=(검색어)&display=(한번에 보여줄 결과 수)&sort=(정렬기준)',
{
headers: {
X-Naver-Client-Id: '발급받은 Id',
X-Naver-Client-Secret: '발급받은 시크릿키'
}
}
)
//url에 query 작성이 익숙하지 않다면
axios.get('https://openapi.naver.com/v1/search/blog.json',
{
params: {
query:(검색어),
display:(한번에 보여줄 결과 수),
sort:(정렬기준)
}
},
{
headers: {
X-Naver-Client-Id: '발급받은 Id',
X-Naver-Client-Secret: '발급받은 시크릿키'
}
}
)
헤더에는 아까 발급받은 키들을 넣어주면 되고, params에 검색 조건을 넣거나, url에 직접 쿼리를 넣어 전송할 수 있다.
쿼리를 살펴보자면
- query(필수) : 검색어
- display : 검색 결과의 개수 (기본 10)
- start : 검색 시작 페이지 (기본 1)
- sort : 정렬기준. sim(정확도), date(최신순). (기본 sim)
이렇게 4개로 구성되어 있다.
원하는 검색어와 쿼리를 잘 붙여서 요청을 보내면 조건에 맞는 검색 결과를 받아 볼 수 있다.
(axios 코드)
React에 axios를 설치하고, 요청을 보내본다.
(CORS 에러 이미지)
,.,.,.?
분명 애플리케이션 설정에서 애플리케이션을 등록했는데 CORS 에러가 발생한다.
중간 과정 전부 생략하고, 결과만 말하자면
네이버는 보안상의 이유로 API를 사용할 때 클라이언트에서 바로 서버로 요청하는 것을 제한한다고 한다!
즉, 나처럼 React app에서 바로 서버로의 요청이 애초에 불가능한 것!
머리를 싸매고 해결 방법을 찾아 보았더니, 크게 두가지로 나뉘었다.
1. proxy 사용
2. 사이드 서버를 구축하여 클라이언트 -> 사이드 서버 -> 네이버 서버 -> 사이드 서버 -> 클라이언트 과정 거쳐 데이터 받아오기
모르는 사람이 봐도 2번보다 1번이 편리하다.
하지만 proxy를 사용하면 개발 환경에선 임시로 CORS 에러를 피할 수 있겠으나, 배포시에는 효과가 없다는 큰 단점이 있다.
결국, 서비스를 배포하려면 결국은 서버를 만들어야 하는 것.
눈물을 흘리며 GPT의 도움을 받아 간신히 사이드 서버를 만들어 냈다.
3. 사이드 서버 구축
//server.js
const express = require('express');
const axios = require('axios');
const app = express();
require("dotenv").config();
const cors = require('cors')
const PORT = 5000;
app.use(express.json());
app.use(cors())
app.get('/search', (req, res) => {
axios.get(`https://openapi.naver.com/v1/search/news.json?query=${req.query.query}&display=100&sort=${req.query.sort}`, {
headers: {
'X-Naver-Client-Id': process.env.REACT_APP_NAVER_CLIENT_ID,
'X-Naver-Client-Secret': process.env.REACT_APP_NAVER_SECRET_KEY,
},
})
.then(response => {
res.json(response.data);
})
.catch(error => {
console.error('Error fetching data from Naver API:', error);
res.status(500).json({ error: 'An error occurred while fetching data from Naver API' });
});
});
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
//App.tsx
useEffect(() => {
axios.get(
'http://localhost:5000/search',
{
params: {
query: `검색어`,
sort:sortType
},
}
).then(res => setNewsData(res.data.items)
}, [sortType])
//sortType은 'sim'과 'date'
위 과정을 쉽게 설명하자면
- 5000번 포트에 사이드 서버 실행
- 실행한 서버는 네이버 API에 접근하여 데이터를 받아와 저장
- 클라이언트는 사이드 서버에 쿼리를 넘겨주고, 데이터를 요청
- 사이드 서버는 쿼리에 맞는 데이터를 클라이언트에 전달
- 클라이언트에서 API로부터 받아온 데이터 사용
당연히 5000번 포트에서도 CORS 설정을 해줘야 하고, 애플리케이션 설정에서도 5000번 포트를 등록해줘야 한다.
이 과정까지 마쳤다면, 서버를 실행하고 다시 요청을 보내보자.
훌륭하게 데이터가 넘어오는 것을 확인 할 수 있다.
이제 마지막 단계. 클라이언트를 실행할 때 서버도 같이 실행해주도록 만들어 준다
4. 클라이언트 - 서버 동시 실행
동시 실행에는 concurrently 라이브러리를 사용한다.
npm install concurrently --save-dev
concurrently는 React의 여러 명령어를 병렬로 사용 할 수 있게 해주는 라이브러리이다.
원래는 2개의 터미널로 클라이언트 명령어 따로, 서버 명령어 따로 입력해 실행해야 했지만, 이를 이용하면 하나의 명령어로 동시에 클라이언트와 서버 실행이 가능하다.
package.json에서 다음 내용을 수정해준다
"scripts": {
"start": "concurrently \"npm run server\" \"npm run client\"",
"server": "node (src/ 이하 서버 파일의 경로)", // 서버 시작 스크립트
"client": "react-scripts start" // React 앱 시작 스크립트
}
해당 과정을 마친다면, npm start 명령어 하나러 클라이언트가 실행될 때 동시에 서버가 실행되게 된다.
매우 험난한 과정이었지만, 이런 과정을 거쳐서라도 양질의 API를 사용할 수 있게 되어 정말 다행인 것 같다,..,.,.,,,
'Frontend is 실전' 카테고리의 다른 글
| [React] React-Query로 데이터 통신 해보기 (0) | 2025.01.10 |
|---|---|
| [Next] Next.js의 layout 적극 활용해 보기 (1) | 2024.12.03 |
| [Git] Git rebase와 cherry-pick (0) | 2024.05.28 |
| [CSS] styled-components의 전역 스타일링 (0) | 2024.04.02 |
| [AWS] AWS S3를 이용해 데이터 통신하기 (0) | 2024.03.14 |
