외부 API 사용 - 241125
직접 API를 만들어서 사용 할 수 있는데 다른사람이 만든 API를 가져다가 사용해도 된다.
간단하게 2개의 API를 사용할 예정이다.
랜덤으로 고양이 사진을 주는 API
url 창에 api라고 덧 붙이면 api창으로 갈 수 있도록 해줄 것이다.
url에 정보가 보이므로 GET 요청을 해주면 된다.
- 기본 세팅으로 id = img를 가지는 img태그를 하나 생성해주고, changeCatImg의 함수를 가지는 onclick button을 하나 만들어준다.
- fetch의 method default값은 get 요청이므로 따로 method는 적지 않았다.
- 외부 url의 값을 불러오기위해 처음 response값을 res.json으로 변환해주고,
- img 태그 안에 있는 url에 접근해 주기위해 배열 형태로 접근을 해주었다.
- 결과 화면
영화 정보를 주는 API
대부분의 api는 사용하려면 key가 필요하다.
사용할 사이트의 api는 http://www.omdbapi.com/?apikey=[yourkey]& 이렇다.
뒤에 yourkey부분에 자신에게 할당된 key를 적어 넣고, 그 뒤에 &를 이용해서 query를 이어서 적어준다. query부분에는 영화정보에 관련된 검색어를 넣어주면 된다.
여기에서는 movie title에 맞는 검색어인 s가 필수로 붙고 그 뒤에 movie title를 적어주면 된다.
- 배열 형태로 나타나는
res.data.Search를for ~ of문을 통해 여러정보를 나타나게 하고, - 그 정보들을
createElement ( )를 이용해div와img,p태그를 만들고, 만든 태그에 정보를 담은 뒤, .append를 이용해서 정보가 담겨있는 태그들을 추가해 주었다.
- 결과화면
