Leeyanggoo
[JS] JSON 데이터 가져오기!! 명언 소환술! 본문
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100vh;
align-items: center;
justify-content: center;
display: flex;
}
.opacity {
animation: opacity 2s ease-in-out;
}
@keyframes opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#result {
width: 50%;
}
.quote {
color: #fff;
font-size: 2rem;
margin: 1rem 0;
font-weight: bold;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}
.author {
color: #808080;
font-size: 1.5rem;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}
<div id="result">
<div class="quote"></div>
<div class="author"></div>
</div>
이번 예제는 JSON에 들어있는 명언 데이터를 가져와서 10초간 랜덤하게 출력하는 페이지를 만드는 것입니다.
JSON은 "JavaScript Object Notation"의 약자로 자바스크립트 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷을 말합니다.
우리는 불러올 문제 데이터를 자바스크립트 객체 문법으로 구조화 시켜서 가져올 수 있습니다.
{
"quotes": [
{
"id": 1,
"quote": "Life isn’t about getting and having, it’s about giving and being.",
"author": "Kevin Kruse"
},
{
"id": 2,
"quote": "Whatever the mind of man can conceive and believe, it can achieve.",
"author": "Napoleon Hill"
}
],
"total": 100,
"skip": 0,
"limit": 30
}
json 파일 내부는 이렇게 자바스크립트의 객체 문법으로 데이터가 구성되어 있습니다.
다른 점이라면 속성의 키(key)와 값(value)에 모두 따옴표(")를 사용해서 표현한다는 점입니다.
따라서 json의 데이터를 불러올 땐 우리가 사용할 형식에 맞게 가공하는 과정이 필요합니다.
JOSN 파일 불러오기!!
Javascript
const quoteResult = document.querySelector("#result");
const quote = document.querySelector(".quote");
const quoteAuthor = document.querySelector(".author");
let quoteAll = [];
let quoteInterval = 10000;
const quoteData = () => {
fetch("json/dummy01.json")
.then(res => res.json())
.then(items => {
quoteAll = items.quotes;
let quoteIndex = Math.floor(Math.random()*(quoteAll.length))
quote.innerHTML = quoteAll[quoteIndex].quote;
quoteAuthor.innerHTML = `- <i>${quoteAll[quoteIndex].author}</i>`
quote.classList.add("opacity");
quoteAuthor.classList.add("opacity");
// 랜덤 배경색
let randomColor1 = bgColor[Math.floor(Math.random()*(bgColor.length))];
let randomColor2 = bgColor[Math.floor(Math.random()*(bgColor.length))];
let gradientColor = `linear-gradient(to right, ${randomColor1}, ${randomColor2})`
document.querySelector("body").style.backgroundImage = gradientColor;
//랜덤 폰트
let randomFont = Math.floor(Math.floor(Math.random()*10)+1)
quoteResult.classList.remove("font1", "font2", "font3", "font4", "font5", "font6", "font7", "font8", "font9", "font10");
quoteResult.classList.add(`font${randomFont}`)
})
}
quoteData();
setInterval(() => {
quoteData()
quote.classList.remove("opacity");
quoteAuthor.classList.remove("opacity");
}, quoteInterval)
fetch() 함수 짚고 넘어가자!
fetch() 함수는 자바스크립트에서 주어진 리소스(URL)를 가져오는 데 사용되는 내장 함수입니다.
then() 메서드는 이전 작업의 결과를 받아 다음 작업을 처리하는 데 사용됩니다.
따라서 fetch() 함수가 리소스를 가져오는 데 성공했다면, then() 메서드를 실행하게 됩니다.
첫 번째 then() 메서드에서는 fetch() 함수가 반환한 객체(res)를 자바스크립트 객체로 변환(res.json())합니다. 이를 파싱이라고 합니다.
두 번째 then() 메서드는 파싱된 데이터를 items 인자로 받습니다. 따라서 items 변수는 json 데이터의 내용을 담고 있으며, 이를 이용해 필요한 작업을 수행하게 됩니다.
데이터를 잘 입력해보자!
예제는 변수 quoteAll에 배열을 선언하고 그 안에 json의 데이터를 담고 있는 items의 "quote" 배열만 추가합니다.
quoteIndex는 quoteAll의 개수와 Math.random()의 수를 곱해 랜덤 인덱스를 할당받고, quoteAll[quoteIndex]는 랜덤하게 뽑은 명언 배열 하나를 뜻합니다.
여기서 quoteAll[quoteIndex].quote는 키 quote의 값인 명언을 뜻하고, author는 인물 이름을 뜻합니다.
quoteData()는 실행될 때마다 랜덤한 명언을 뽑아오는 함수가 되었으므로, 이를 10초 간격으로 실행해주기 위해 setInterval() 메서드를 이용합니다.
이전에 설정한 10초(let quoteInterval = 10000;)를 설정하고 그 안에 콜백함수로 quoteData()를 실행해주게 되면 완성입니다!!
나머지는 Math.random과 사전에 만들어놓은 폰트와 배경색 js와 css 파일을 이용하여 함께 표시되도록 했습니다.
이전의 원리를 이해한다면 바로 적용할 수 있겠죠? :)
