Leeyanggoo
[JS] JSON 데이터 가져오기!! URL 새로고침으로 배경을 다양하게! 본문
* {
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 = 100000;
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.background = "url(https://source.unsplash.com/random/?person) no-repeat center / cover";
//랜덤 폰트
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(() => {
location.reload("url(https://source.unsplash.com/random/?person)");
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 파일을 이용하여 함께 표시되도록 했습니다.
이전의 원리를 이해한다면 바로 적용할 수 있겠죠? :)
URL 새로고침 하기!
"https://source.unsplash.com/random/?person"은 "unsplah"에서 제공하는 이미지를 불러오는 URL입니다.
해당 링크는 "https://source.unsplash.com/random/?" 뒤에 입력하는 키워드에 해당하는 이미지를 무작위(random)로 불러옵니다.
따라서 명언을 불러올 때마다 해당 링크를 새로고침(refresh)한다면 명언뿐만 아니라 배경 이미지 또한 다양한 이미지를 불러올 수 있습니다.
자바스크립트에서 현재 페이지를 다시 로드하는 메서드는 loaction.reload()입니다.
location 객체는 현재 URL 정보를 제공하는 자바스크립트 객체입니다.
reload() 메서드는 location 객체의 메서드 중 하나로 이 메서드를 호출하면 현재 페이지가 새로고침됩니다.
location 객체의 속성은 여러 가지가 있으며, 다음과 같습니다.
| location.href | 현재 페이지의 URL을 문자열 형태로 반환합니다. 이 속성을 변경하면 페이지를 새로고침하면서 새로운 URL로 이동할 수 있습니다. |
| loaction.protocol | 현재 페이지의 프로토콜을 반환합니다. 예를 들어 'http:' 또는 'https:'가 될 수 있습니다. |
| loaction.hostname | 현재 페이지의 호스트 이름을 반환합니다. 예를 들어 'www. example.com'과 같은 형식일 수 있습니다. |
| loaction.pathname | 현제 페이지의 경로 이름을 반환합니다. 예를 들어 '/about'과 같은 형식일 수 있습니다. |
| loaction.search | 현재 페이지의 쿼리 문자열을 반환합니다. 예를 들어 '?id=123'과 같은 형식일 수 있습니다. |
| loaction.reload | 현제 페이지를 다시 로드하여 새로고침하며 반환값을 없습니다. reload(true)를 사용하면 true 매개변수를 전달하여 선택적으로 새로고침 시 캐시를 무시하도록 지정할 수 있습니다. |
