react로 웹페이지에 db가져오기!
우선 알아야 하는 개념이 몇 가지 있다.
1. AJAX : Asynchronous Javascript And XML(JSON), 비동기적인 웹앱의 개발에 사용된다. 필요한 데이터만을 서버에서 요청하여 받은 후, 클라이언트에서 데이터를 처리한다.
https://ko.wikipedia.org/wiki/Ajax
Ajax - 위키백과, 우리 모두의 백과사전
위키백과, 우리 모두의 백과사전. 둘러보기로 가기 검색하러 가기 다른 뜻에 대해서는 에이젝스 문서를 참조하십시오. 다른 뜻에 대해서는 아이아스 문서를 참조하십시오. Ajax(Asynchronous JavaScript and XML, 에이잭스)는 비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다. 표현 정보를 위한 HTML (또는 XHTML) 과 CSS 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스
ko.wikipedia.org
2. fetch, promise : fetch로 인해 시나리오가 생기게 되고, 이를 관리하게 됨!
API Documentation - YTS YIFY
Official YTS YIFY API documentation. YTS offers free API - an easy way to access the YIFY movies details.
yts.am
여기 사이트에 들어가면 잘 정리된 db가 있다.. 여기서 내가 원하는 것을 꺼내서 사용하면 된다. 내가 사용한 것은 https://yts.am/api/v2/list_movies.json?sort_by=rating 이다.
우선 코드를 한 번에 올려보자면, callApi 함수를 통해 fetch를 해준다. 링크에서 가져온 데이터 베이스를 json으로 바꿔주고 asyncronous type으로 getMovies를 선언해준다. callApi가 실행되는 것을 기다렸다가 state를 바꿔준다. 이후 console창을 살펴보면 poster가 아니라 large_cover_image라고 선언되어 있으므로 이를 변경해주면..!
다음과 같이 영화가 나오는 것을 확인할 수 있다!!!