오늘은 마무리 문제1를 풀어보겠습니다!
자바스크립트 마무리 문제
명언을 무작위로 가져와 화면에 10초마다 한 번씩 바뀌게 보여주는 프로그램을 만들어보겠습니다.
길라잡이
-fetch와 then, catch를 사용해서 URL에서 지료를 가져옵니다.
-가져온 데이터에 어떤 값이 어떤 구조로 저장되어 있는지 확인하고 그 중에서 명언과 말한 사람 정보를 가져오는 방법을 생각합니다.
구조
<div id="result" class="container">
<div class="quote"></div>
<div class="author"></div>
</div>구조는 실습파일을 그대로 참고하여 가져왔습니다.
스크립트짜기
<script>
const updateQuote = () => {
fetch("http://dummyjson.com/quotes")
.then(res => res.json())
.then(data => {
const result = document.querySelector("#result");
const random = Math.floor(Math.random() * data.quotes.length);
result.querySelector(".quote").innerHTML = data.quotes[random].quote;
result.querySelector(".author").innerHTML = data.quotes[random].author;
})
.catch(error => console.log(error));
}
updateQuote();
const intervalTime = 2000;
setInterval(() => {
updateQuote();
}, intervalTime);
</script>- const updateQuote = () => { ... }: updateQuote라는 이름의 화살표 함수를 정의합니다. 이 함수는 API를 호출하여 명언과 저자를 가져온 다음 결과를 업데이트합니다.
- fetch("http://dummyjson.com/quotes"): fetch() 함수를 사용하여 "http://dummyjson.com/quotes"에서 데이터를 가져옵니다. 이는 더미 API로, 명언과 저자 데이터를 반환합니다.
- const random = Math.floor(Math.random() * data.quotes.length): quotes 배열에서 무작위로 하나의 명언과 저자를 선택하기 위해, 무작위 인덱스를 생성합니다.
- result.querySelector(".quote").innerHTML = data.quotes[random].quote: 선택한 명언을 결과 엘리먼트의 "quote" 클래스를 가진 자식 엘리먼트에 삽입합니다.
- result.querySelector(".author").innerHTML = data.quotes[random].author: 선택한 저자를 결과 엘리먼트의 "author" 클래스를 가진 자식 엘리먼트에 삽입합니다.
- .catch(error => console.log(error)): API 호출에 실패한 경우 콘솔에 에러를 기록합니다.
- updateQuote(): updateQuote 함수를 한번 호출하여 초기 데이터를 화면에 업데이트합니다.
- const intervalTime = 2000: 명언을 업데이트하는 간격을 2초로 설정합니다.
- setInterval함수를 사용하여 일정한 간격으로 updateQuote 함수를 호출하여 명언과 저자를 업데이트합니다. 간격은 intervalTime 변수에 저장된 값으로 설정됩니다.
완성된 페이지와 코드보기
