React/네이버 클론

[React]Naver Clone(1) - 오픈 API 사용하기 및 전체 구성

래모 2022. 12. 16. 20:40

지금까지 배운 거 활용도 할 겸 가볍게 네이버 시작 페이지를 클론코딩 해보려고 한다.

(오랜만에 코딩해서 리마인드 차원...ㅎㅎ)

옛날에 포스팅했던 기능들은 자세히는 안 다루고 링크만 남겨서 기록할 예정!

본격적으로 시작하기 전

이 포스팅은 네이버의 오픈 API를 사용하는 법에 대해 다룰 것이다.

 


네이버 오픈 API 사용하기

 

먼저!! 난 네이버 오픈 API를 이용하는 것이 처음이니 애플리케이션 등록을 먼저 해주어야 한다.

WEB 설정은 로컬에서 테스트하기 때문에 localhost:3000으로 주소를 넣어주었다.

 

이용신청이 완료되면 내 애플리케이션의 client ID와 client Secret가 보인다

API 호출 시 사용하게 되는 key로 노출되지 않게 조심해야 한다!!

 

postman으로 정보가 잘 불러와지는 지 확인해 보았다

잘 되지롱

 


 

네이버 API로는 뉴스의 이미지가 불러와지지 않아서 

https://sand8594.tistory.com/27

 

news-viewer (리액트사용!)

api 연동해서 뉴스를 보여주는 페이지를 만들어 보았다! 리액트를 다루는 기술 14장 참고만 하고 코드는 직접 작성했음 장하다 나자신 이 포스팅에선 각 컴포넌트가 하는 역할과 겪었던 문제점들

sand8594.tistory.com

이 포스팅에서 다루었던 API를 한 번 더 이용할 것이다.

 

 


본격적으로 만들기 전 섹션을 네 개로 나누었다.

각 부분에서 사용할 기능적인 부분은 아래와 같다.

 

1. 검색기능

2. 현재 위치를 가져와서 날씨 제공

3. 네이버 api를 이용하여 기사와 책 정보 제공

4. 로그인 기능과 화살표 애니메이션

 

전체적으로 생각한 기능은 이런 것들이고 만들면서 기능적인 부분을 추가하거나 할 거 같다.

화이팅화이팅~!