728x90
반응형
자바스크립트 JSON 마무리 문제
책 : 모던 자바스크립트 프로그래밍의 정석 519, 520페이지 참고
마무리 문제 1
- dummyjson.com/quotes 사이트의 json 데이터를 가져온 후 콘솔 창에 결과를 표시해 봅니다.
- 가져온 데이터가 어떤 구조로 이루어져 있는지 살표보는 것이 목표입니다.
길라잡이
- feth와 then, catch를 사용해서 URL에서 자료를 가져옵니다.
- 가져온 데이터에 어떤 값이 어떤 구조로 저장되어 있는지 확인하고 그중에서 명언과 말한 사람 정보를 가져오는 방법을 생각합니다.
JAVASCRIPT
function nextQutoe(){
fetch("http://dummyjson.com/quotes")
.then(res => res.json())
.then(items => {
console.log(items); // 문제의 데이터 불러오기
})
.catch((err) => console.log(err));
};
nextQutoe();자바스크립트 구성
- feth와 then, catch를 사용해서 URL에서 자료를 가져옵니다.
- cosole.log를 사용해서 콘솔 창에 데이터를 가져오는 지 확인합니다.
마무리 문제 2
- 명언 데이터를 가져오는 데 성공했으면 그중에서 1개의 명언만 가져와서 문서의 #result 영역에 명언 내용과 말한 사람을 표시해 보세요. 이때 명언 내용은 #result 영역에 있는 .quote영역에, 말한 사람은 .author 영역에 표시하세요.
길라잡이
- 마무리 문제1에서 한번에 몇 개의 명언을 가져오는지 확인했으면 1과 그 숫자 사이의 값을 무작위로 추출합니다.
- 무작위 수를 사용해서 명언을 가져온 후 명언 부분과 말한 사람 이름을 나눠서 화면 영역에 표시합니다.
코드 구성
<!DOCTYPE html>
<html lang="ko">
<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>명언 모음</title>
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
font-style: "NexonLv1Gothic";
}
img {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.6;
}
#result {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.quote {
font-size: 50px;
margin-bottom: 25px;
}
.author {
font-size: 35px;
color: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<img src="img/finalQuestion03_01.jpg" alt="배경">
<div id="result">
<div class="quote"></div>
<div class="author"></div>
</div>
</body>
</html>구성
- body 구역에 각각 태그를 사용해서 구역을 만들어줍니다.
- style 구역으로 가서 각각의 태그에 스타일, 속성을 입력해줍니다.
JAVASCRIPT
<script>
function nextQuote(){
fetch("json/dummy01.json")
.then(res => res.json())
.then(items => {
// console.log(items); // 문제의 데이터 불러오기
const result = document.querySelector("#result");
const random = Math.floor(Math.random()*30); // 0~29까지의 수 구하기
const quote = result.querySelector(".quote");
const author = result.querySelector(".author");
quote.innerHTML = items.quotes[random].quote;
author.innerHTML = `-${items.quotes[random].author}`;
})
.catch((err) => console.log(err));
};
nextQuote();
setInterval(nextQuote, 10000);
</script>자바스크립트 구성
- 함수를 사용해서 실행시켜줍니다.
- fetch, then, catch를 사용해서 json 파일의 데이터를 가져와줍니다.
- #result 구역에 데이터를 입력하기 위해 선택자를 만들어줍니다.
- 랜덤으로 0~29까지의 수를 구합니다.(30개의 데이터가 있으므로 배열의 인덱스 값은 0부터 29입니다.)
- .quote, .author 구역에 데이터를 입력하기 위해 선택자를 만들어줍니다.
- .quote 선택자에는 json 파일의 quote의 데이터를 가져올 수 있게 입력해주고, .author 선택자에는 json 파일의 author의 데이터를 가져올 수 있게 입력해줍니다.
- 함수 변수를 입력해 실행해줍니다.
- 다음 이 함수를 10초마다 실행시켜 주기 위해 setInterval를 사용해서 실행시켜줍니다.
728x90
반응형
