네이버 OPEN API 사용

✅네이버 OPEN API 사용

안녕하세요 TriplexLab 입니다.

이번시간에는 네이버 OPEN API를 사용하는 예시를 살펴보도록 하겠습니다. 
그리고 CORS에 관한것도 해결해보도록 하겠습니다.

👉🏻쇼핑인사이트 분야별 트렌드 조회

저는 쇼핑인사이트 분야별 트렌드 조회를 해보도록 하겠습니다.

👉🏻환경

Front: vite, react, typescript, axios
back: express, body-parser

👉🏻그림으로 이해하기

그림으로 설명하면 다음과 같습니다. 브라우저 서버, Node 서버, naver 서버 3개가 있다면

처음에 브라우저 서버에서 → Node 서버에게 요청을 보내고 → naver 서버에 요청을 또 보내어서 DB에서 데이터를 가지고 naver 서버에 응답하고 → Node 서버에게 또 응답을 해주고 → 브라우저 서버에 응답을 해주는 것입니다.

서버들 간에 데이터 흐름

👉🏻CORS 해결 방법 설명

naver API를 사용할때는 보안이슈때문에 그런지 클라이언트(Front 서버)에서 직접 naver 서버에 요청을 하면 안된다고합니다. 
서버 프로그램(java, php, Node.js 등등)으로 요청을 해야한다고 합니다. 
이걸 몰라서 거의 하루정로 시간을 소비했다ㅠㅠ

나는 TEST를 위해서 naver API들중 쇼핑인사이트 분야별 트렌드 조회을 해보게습니다.

결과) 결국에 검사요소에 Network탭에서 보시면 요청할때 Origin과, 응답할때 Origin 출처를 비교하기때문에 
다음과 같이 작성해줘야 합니다.

검사요소에 Network탭 출처를 비교

router.post('/', (req, res) => {
    res.setHeader("Access-Control-Allow-Origin", "http://localhost:5173"); //CORS의 Heade에 Origin 출처를 맞추기 위함.
    //... 코드 생략
})

👉🏻CORS 왜 나왔을까?

프론트엔드 개발자 듣이 싫어하는 cors가 왜 세상에 나왔을까라고 생각을 해보면

악의를 가진 사용자가 소스 코드를 쓱 구경한 후 CSRF(Cross-Site Request Forgery)나 XSS(Cross-Site Scripting)와 같은 방법을 사용하여 애플리케이션에서 코드가 실행된 것처럼 꾸며서 사용자의 정보를 탈취하는 것을 방지하기 위해서입니다. 결론은 보안을 위해 적용한 것입니다.

👉🏻코드 공유

다운받아서 실행할경우 README 파일 참고하세요.

네이버 OPEN API.zip

0.07MB

사용방법: 👇🏻👇🏻

yarn
or
npm install

//둘다 동시에 실행해야 합니다.
yarn start:client 
yarn start:server 
or
npm run start:client
npm run start:server

👉🏻참고링크

CORS에 관해서 더 자세히 살펴보고 싶으시다면 링크를 참고하세요.👏🏻👏🏻✨🔥

참고로 Node쓰시는 분들은

중간에 Node.js 세팅과, Express.js 세팅이 있습니다. 해당 부분 참고하면 될것 같습니다.

[WEB] 📚 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏