2021. 6. 9. 23:46ㆍJava Script
이번에는 어제 알아본 java script의 비동기에 대해서 조금 더 알아 봅시다.
비동기
어제 알아본 비동기 방식은 fetch 를 이용해서, text() 를 사용해서 문자열로 바꿔주는 걸 봤었죠?
fetch는 text 뿐 아니라, json 을 사용할 수 있습니다.
.json 파일을 json 형식으로 만드는 것이기도 하고, json(객체) 으로 된 것을 가져오는 것 이기도 합니다.
먼저, "hi.json" 이라는 파일을 만들어서 아래와 같이 데이터를 작성해 줍시다. ( {"키":"값"} ) 의 형태
※ 실제로, 비밀번호를 파일에 명시되도록 저장하지는 않음.
그리고 fetch 를 사용하는 곳에서, 아래와 같은 공간을 만들어 줍니다.
어제 .text() 가 들어가는 자리에, .json() 으로 바뀌었을 뿐 입니다.
그리고, json 으로 된 데이터에는 '.' 으로 접근할 수 있죠
위 같이 계단식으로 . 을 계속 찍어서 안쪽으로 계단식으로 코드를 짜는 것 보다는, 아래처럼 return 을 이용해서 함수적표현 방식으로 코드를 짜는 것을 선호 한다고 합니다.
※ 위의 2개 코드는 서로 같은 작동을 함
다른 서버의 자료 가져오기
비동기를 이용해서, 내가 만든 파일의 자료가 아닌 다른 사람이 작성한 데이터를 가져와서 사용해 봅시다.
https://yts.mx/api#list_movies
API Documentation - YTS YIFY
Official YTS YIFY API documentation. YTS offers free API - an easy way to access the YIFY movies details.
yts.mx
위의 링크에 들어가서, 스크롤을 아래로 내리다 보면, 아래와 같은 화면을 발견할 수 있습니다.
이는 해당 웹사이트 에서, 데이터들을 긁어서 가져갈 수 있도록 해놓은 것 입니다.
그래서, 저희는 이번에 .json 이라고 되어 있는 주소의 데이터를 비동기 방식으로 가져와 볼건데요
https://yts.mx/api/v2/list_movies.json
실제로, 위의 주소에 데이터가 나열되어 있습니다. json 형식으로
그리고, 해당 웹사이트에서 데이터에 접근 할 때, 원하는 데이터만 뽑는 방법이라던가... 정렬하는 방법 이라던가... 그런게 나와 있습니다. 아래처럼
비동기 방식의 주소를 적는 부분에, get 방식으로 해당 데이터를 넘겨주면 됩니다.
예를들어서, year 를 기준으로 sort_by 를 한다고 생각해보면, 이렇게 말이죠
이제, response를 받아줄 콜백함수 를 만들어 줍니다.
이 때, console.log(response) 로 1단계씩 안에 어떠한 값이 들어 있는 확인 해보면 도움이 됩니다.
response.status 는 해당 페이지가 정상인지 아닌지 확인할 수 있도록 나옵니다. status == 200 이 아니라면 오류.
오류가 아니라면, response.json() . 가져온 데이터를 json() 형식으로 변환 하고, 리턴 합니다.
그리고, 가져온 데이터들을 화면에 뿌려줄 건데요.
console.log(jsonData);
console.log(jsonData.data);
console.log(jsonData.data.movies);
를 해서, 하나씩 어떤 걸 가지고 있는 확인해보세요
저희가 원하는 데이터는 위처럼 접근할 수 있습니다.
이제 화면에 뿌려줄 공간을 만들어 줍시다.
가져온 데이터는 이러한 형태로 들어가게 될 겁니다.
이 중에서, <div class="list"> 태그 안에 주석처리 되는 부분을 만들어 줄건데요
document.createElement 를 사용해서 값을 넣어주고 appendChild 를 사용해 조립할 수도 있지만, 아래처럼 만들어 줄 수도 있습니다.
이렇게 자료를 가져오면, 스타일이 적용되지 않은 그저 데이터만 가져온 것이기 때문에, 가독성이 좋지 않아서, css 를 이용해서 보기 좋도록 만들어 주는게 좋습니다.
아래는 전체 코드 입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul, li {padding: 0; margin: 0;}
.list {width: 80%; margin: 0 auto; overflow: hidden;}
.list .movie {height: 300px; width: 33.3333%; float: left; box-sizing: border-box; position: relative; min-height: 350px;}
.list .movie img {position: absolute; top:0; left:0; width: 100px;}
.list .movie .inner {padding-left: 100px;}
.list .movie .summary {overflow: scroll; height: 100px;}
.list .movie .genres {list-style: none; display: inline-block;}
</style>
</head>
<body>
<h3>영화 상영 리스트</h3>
<div class="list">
<!-- <div class="movie">
<img src="xx">
<div class="inner">
<h3 class="title"></h3>
<h3 class="year"></h3>
<ul class="genres">
<li>장르</li>
</ul>
<p class="summary"></p>
</div>
</div> -->
</div>
<script>
// 연습용
// http://jsonplaceholder.typicode.com/todos/1
function ajax() {
fetch("https://yts.mx/api/v2/list_movies.json?sort_by=year")
.then( (response) => {
if(response.status != 200){
alert("네트워크상 오류가 발생했습니다. 다시 시도하세요");
return;
}
return response.json();
})
.then( (jsonData) => {
var list = document.querySelector(".list");
// var data = jsonData["data"]["movies"];
var data = jsonData.data.movies;
// 회전할때마다 처리할 작업
var tag = ""; // 누적할 문자열 변수
for(var i = 0; i < data.length; i++){
var title = data[i].title;
var year = data[i].year;
var genres = data[i].genres;
var summary = data[i].summary;
var img = data[i].medium_cover_image;
tag += '<div class="movie">';
tag += '<img src="' + img + '">';
tag += '<div class="inner">';
tag += '<h3 class="title">' + title + '</h3>';
tag += '<h3 class="year">' + year + '</h3>';
tag += '<ul class="genres">';
for(var j in genres){
tag += '<li>-' + genres[j] + '</li>';
}
tag += '</ul>';
tag += '<p class="summary">' + summary + '</p>';
tag += '</div>';
tag += '</div>';
} // end for
list.innerHTML = tag;
});
}
(function() {
ajax();
})();
</script>
</body>
</html>'Java Script' 카테고리의 다른 글
| Day80 - [js]카카오 로그인 기능 (0) | 2021.06.10 |
|---|---|
| Day80 - [js]오픈 API (0) | 2021.06.10 |
| Day79 - [js]비동기 01 (0) | 2021.06.09 |
| Day79 - [js]쿠키 (0) | 2021.06.09 |
| Day79 - [js]location, history, navigator (0) | 2021.06.09 |