“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
function getRandomQuote() {
fetch("https://dummyjson.com/quotes")
.then(response => response.json())
.then(quotes => {
const randomIndex = Math.floor(Math.random() * quotes.quotes.length);
const quoteElement = document.createElement("p");
const authorElement = document.createElement("p");
quoteElement.textContent = quotes.quotes[randomIndex].quote;
authorElement.textContent = quotes.quotes[randomIndex].author;
document.querySelector("#quote").innerHTML = "";
document.querySelector("#author").innerHTML = "";
document.querySelector("#quote").appendChild(quoteElement);
document.querySelector("#author").appendChild(authorElement);
});
}
setInterval(getRandomQuote, 10000);설명:
화면에 적힌 내용은 명언과 그를 말한 작가의 이름입니다.
json 파일에 저장되어 있는 명언 + 작가 이름의 정보들을 랜덤으로 10초마다 화면에 출력하도록 설정했습니다.
style, body 그리고 script 를 보여드리면서 설명하겠습니다.
code
<style>
@font-face {
font-family: 'UhBeemysen';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_five@.2.0/UhBeemysen.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: #917ed2;
}
body > div {
color: rgb(170, 241, 214);
font-family: UhBeemysen;
font-size: 30px;
font-weight: bold;
text-align: center;
margin-top: 300px;
}
</style>
<body>
<div>
<p id="quote"></p>
<p id="author"></p>
</div>
</body>
<script>
function getRandomQuote() {
fetch("https://dummyjson.com/quotes")
.then(response => response.json())
.then(quotes => {
const randomIndex = Math.floor(Math.random() * quotes.quotes.length);
const quoteElement = document.createElement("p");
const authorElement = document.createElement("p");
quoteElement.textContent = quotes.quotes[randomIndex].quote;
authorElement.textContent = quotes.quotes[randomIndex].author;
document.querySelector("#quote").innerHTML = "";
document.querySelector("#author").innerHTML = "";
document.querySelector("#quote").appendChild(quoteElement);
document.querySelector("#author").appendChild(authorElement);
});
}
setInterval(getRandomQuote, 10000);
</script>style 시트는 보이는 이미지처럼 배경색과 글씨체, 글씨 크기와 위치를 설정했습니다.
body 는 명언과 작가의 이름이 출력되도록 간단하게 설정했습니다.
script 는 조금 나눠서 설명하겠습니다.
fetch("https://dummyjson.com/quotes")
.then(response => response.json())
.then(quotes => {
quotes.quotes.forEach(quote => {
const quoteElement = document.createElement("p");
const authorElement = document.createElement("p");
quoteElement.textContent = quote.quote;
authorElement.textContent = quote.author;
document.querySelector("#quote").appendChild(quoteElement);
document.querySelector("#author").appendChild(authorElement);
});
});fetch 메소드를 사용하여 명언과 저자를 가져온 후, quotes.quotes.forEach를 사용하여 quotes 배열의 각 요소를 반복 처리합니다.
fetch 는 웹 API 중 하나로, 네트워크를 통해 리소스를 가져오거나 서버에 데이터를 보내는 기능을 제공합니다.
주로 HTTP 요청을 보내고 응답을 받는 데 사용됩니다.JavaScript에서 fetch 함수를 사용하면 비동기적으로 HTTP 요청을 보낼 수 있고, HTTP 응답을 처리할 수 있습니다.
이 함수는 Promise 객체를 반환하며, 비동기적으로 처리되므로 응답이 오기 전에 코드가 계속 실행됩니다.
따라서 then 메소드를 사용하여 응답을 처리해야 합니다.간단한 예시로, 다음과 같이 fetch 함수를 사용하여 특정 URL에서 데이터를 가져올 수 있습니다.
fetch('https://example.com/data.json') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));위 코드에서는 fetch 함수를 호출하여 https://example.com/data.json URL에서 데이터를 가져옵니다.
then 메소드를 사용하여 응답(response)을 JSON 형식으로 파싱하여 데이터(data)를 출력합니다.
만약 에러가 발생하면 catch 메소드가 호출됩니다.
반복문 내에서는 명언을 보여주는 요소와 저자를 보여주는 요소를 생성하고, 각각의 textContent 프로퍼티에 quote.quote와 quote.author를 설정합니다.
그리고 appendChild 메소드를 사용하여 각각의 요소를 해당하는 요소에 추가합니다.
appendChild 는 DOM(Document Object Model) API의 메소드 중 하나로, 지정된 부모 노드에 자식 노드를 추가합니다. 이 메소드를 사용하면 HTML 요소를 동적으로 생성하거나, 기존의 요소를 다른 위치로 이동시키는 등의 작업을 할 수 있습니다.
appendChild 메소드는 두 개의 인수를 받습니다. 첫 번째 인수는 추가할 자식 노드를, 두 번째 인수는 추가할 부모 노드를 나타냅니다. 예를 들어, 다음과 같은 코드는 <div> 요소를 생성하고, <body> 요소에 추가합니다.
const newDiv = document.createElement('div'); // 새로운 <div> 요소 생성 document.body.appendChild(newDiv); // <div> 요소를 <body> 요소에 추가위 코드에서 document.createElement() 메소드를 사용하여 새로운
요소를 생성하고, appendChild() 메소드를 사용하여 생성된요소를 요소에 추가합니다. appendChild() 메소드는 자식 노드가 추가된 부모 노드를 반환하므로, 위 코드에서는 새로 생성된요소가 반환된 부모 요소인 요소를 참조할 필요가 없습니다.
이렇게 하면 명언과 저자를 각각 다른 요소에 표시할 수 있습니다.
fetch("https://dummyjson.com/quotes")
.then(response => response.json())
.then(quotes => {
const randomIndex = Math.floor(Math.random() * quotes.quotes.length);
const quoteElement = document.createElement("p");
const authorElement = document.createElement("p");
quoteElement.textContent = quotes.quotes[randomIndex].quote;
authorElement.textContent = quotes.quotes[randomIndex].author;
document.querySelector("#quote").appendChild(quoteElement);
document.querySelector("#author").appendChild(authorElement);
});Math.random 메소드를 사용하여 랜덤한 인덱스를 생성하고, 해당 인덱스의 명언과 저자를 화면에 출력할 수 있습니다.
Math.random() 은 JavaScript에서 제공하는 내장 함수 중 하나로, 0 이상 1 미만의 부동소수점 숫자를 반환합니다. 반환되는 숫자는 균등하게 분포되어 있으므로, 이를 활용하여 무작위로 값을 생성하는 데 사용할 수 있습니다.
예를 들어, 1부터 6까지의 무작위한 정수 값을 생성하고자 할 때는 Math.random() 함수를 사용하여 0 이상 1 미만의 숫자를 생성한 뒤, 이를 6과 곱하고 1을 더하여 1부터 6까지의 정수 값을 얻을 수 있습니다.
const randomInt = Math.floor(Math.random() * 6) + 1;위 코드에서 Math.random() 함수가 반환하는 0 이상 1 미만의 숫자를 6과 곱한 뒤, Math.floor() 함수를 사용하여 소수점 이하를 버린 정수 값을 얻습니다.
이렇게 얻은 값은 0부터 5까지의 정수 값이므로, 1을 더하여 1부터 6까지의 정수 값을 얻습니다.
Math.random 메소드를 사용하여 quotes.quotes 배열의 길이를 곱하고 Math.floor 메소드를 사용하여 정수로 변환한 값을 randomIndex 변수에 할당합니다.
Math.floor()는 주어진 숫자를 소수점 이하를 버리고 내림한 정수를 반환하는 JavaScript 내장 함수입니다. 예를 들어, Math.floor(3.5)는 3을 반환하고, Math.floor(-2.8)은 -3을 반환합니다.
Math.floor() 함수는 Math.ceil() 함수와 반대로 작동합니다. Math.ceil() 함수는 주어진 숫자를 소수점 이하를 버리고 올림한 정수를 반환합니다.
Math.floor() 함수는 무작위로 생성한 실수 값을 정수 값으로 변환하거나, 길이가 가변적인 배열의 인덱스를 계산하는 데 활용될 수 있습니다. 예를 들어, 아래 코드는 길이가 가변적인 배열에서 무작위로 선택한 요소를 반환합니다.const arr = ['a', 'b', 'c', 'd', 'e']; const randomIndex = Math.floor(Math.random() * arr.length); const randomElement = arr[randomIndex];위 코드에서 Math.random() 함수가 반환하는 0 이상 1 미만의 숫자를 배열의 길이와 곱한 뒤, Math.floor() 함수를 사용하여 소수점 이하를 버린 정수 값을 얻습니다. 이렇게 얻은 값은 0부터 배열의 길이 - 1까지의 정수 값이므로, 이를 배열의 인덱스로 활용하여 요소를 선택합니다.
그리고 createElement 메소드를 사용하여 p 요소를 생성하고, textContent 프로퍼티를 사용하여 해당 요소의 내용을 설정합니다.
document.createElement() 함수는 주어진 HTML 태그 이름을 갖는 새로운 HTML 요소를 생성합니다. 이 함수를 사용하면 JavaScript 코드에서 동적으로 HTML 요소를 만들어내고, 이를 웹 페이지에 추가할 수 있습니다.
예를 들어, 다음 코드는 <p> 태그를 가진 새로운 HTML 요소를 만들어내고, 이 요소의 textContent 프로퍼티에 "Hello, world!"라는 텍스트를 할당합니다.
const newParagraph = document.createElement("p"); newParagraph.textContent = "Hello, world!";위 코드에서 document.createElement("p") 함수 호출은 <p> 태그를 가진 새로운 HTML 요소를 만듭니다. 이렇게 만들어진 요소는 JavaScript 객체로서 다양한 프로퍼티와 메서드를 갖습니다. 위 코드에서는 textContent 프로퍼티를 사용하여 요소 내부에 들어갈 텍스트를 지정하였습니다.
새로운 HTML 요소를 만든 후, 이를 웹 페이지에 추가하려면 appendChild() 함수나 insertBefore() 함수 등의 DOM 메서드를 사용합니다. 예를 들어, 위에서 만든 새로운 <p> 요소를 <body> 요소에 추가하려면 다음과 같이 코드를 작성할 수 있습니다.
const bodyElement = document.querySelector("body"); bodyElement.appendChild(newParagraph);위 코드에서 document.querySelector("body") 함수 호출은 HTML 문서에서 <body> 요소를 찾아내고, 이를 bodyElement 변수에 할당합니다. 그리고 나서 appendChild() 함수를 사용하여 newParagraph 요소를 bodyElement 요소의 하위 요소로 추가합니다.
textContent 는 HTML 요소의 텍스트 콘텐츠를 나타내는 속성입니다. 즉, HTML 요소의 시작 태그와 종료 태그 사이에 있는 텍스트를 가져오거나, 텍스트를 변경할 때 사용됩니다. 이 속성은 일반적으로 문자열 값을 갖지만, HTML 태그를 포함한 문자열도 할당할 수 있습니다.
예를 들어, 다음 HTML 코드는 <p> 요소를 나타냅니다.
마지막으로 appendChild 메소드를 사용하여 생성한 요소를 해당하는 요소에 추가합니다.
<p>This is a paragraph element.</p>이 요소의 textContent 를 가져오려면 다음과 같이 코드를 작성할 수 있습니다.
const paragraph = document.querySelector("p"); const text = paragraph.textContent; console.log(text); // "This is a paragraph element."위 코드에서 document.querySelector("p")는 HTML 문서에서 첫 번째 <p> 요소를 찾아내고, 이를 paragraph 변수에 할당합니다. 그리고 나서 paragraph.textContent를 사용하여 요소의 텍스트 콘텐츠를 가져옵니다.
textContent 속성을 사용하여 HTML 요소의 텍스트 콘텐츠를 변경하려면 다음과 같이 코드를 작성할 수 있습니다.
const paragraph = document.querySelector("p"); paragraph.textContent = "This is a new paragraph element.";위 코드에서 paragraph.textContent를 "This is a new paragraph element."로 설정함으로써 요소의 텍스트를 변경합니다.
이렇게 하면 매번 랜덤한 명언과 저자가 출력됩니다.
function getRandomQuote() {
fetch("https://dummyjson.com/quotes")
.then(response => response.json())
.then(quotes => {
const randomIndex = Math.floor(Math.random() * quotes.quotes.length);
const quoteElement = document.createElement("p");
const authorElement = document.createElement("p");
quoteElement.textContent = quotes.quotes[randomIndex].quote;
authorElement.textContent = quotes.quotes[randomIndex].author;
document.querySelector("#quote").innerHTML = "";
document.querySelector("#author").innerHTML = "";
document.querySelector("#quote").appendChild(quoteElement);
document.querySelector("#author").appendChild(authorElement);
});
}
setInterval(getRandomQuote, 10000);10초마다 새로운 명언과 저자가 출력되도록 하려면, setInterval 함수를 사용하여 일정 시간마다 코드 블록을 실행할 수 있습니다.
setInterval 함수는 JavaScript에서 제공되는 내장 함수 중 하나로, 일정한 시간 간격으로 특정한 함수를 반복적으로 실행할 수 있도록 합니다.
setInterval 함수는 다음과 같은 형태로 사용됩니다:
setInterval(function, delay, arg1, arg2, ...)- function: 반복적으로 실행될 함수를 지정합니다.
- delay: 함수 실행 간격을 지정합니다. 이 값은 밀리초 단위로 지정됩니다.
- arg1, arg2, ... : 필요한 경우 함수에 전달할 인수를 지정할 수 있습니다.
예를 들어, 다음과 같이 작성된 코드는 1초마다 "Hello, world!"를 출력합니다:setInterval(function() { console.log("Hello, world!"); }, 1000);setInterval 함수는 setInterval() 함수가 반환한 값으로 해당 반복을 중지하는 clearInterval() 함수를 호출해야만 중지됩니다. 반환된 값은 일종의 식별자로 작동합니다.
예를 들어, 다음과 같이 setInterval 함수를 사용하여 1초 간격으로 숫자를 출력하는 함수를 작성할 수 있습니다.let count = 0; let intervalId = setInterval(function() { console.log(count); count++; if (count > 10) { clearInterval(intervalId); } }, 1000);이 코드는 count 변수를 0으로 초기화하고, setInterval 함수를 사용하여 1초 간격으로 count 변수를 출력합니다. count 변수가 10 이상이 되면 clearInterval 함수를 사용하여 반복을 중지합니다.
위 코드에서는 getRandomQuote 함수를 정의하고, fetch 메소드를 사용하여 명언과 저자를 가져오고, 화면에 출력합니다. 그리고 setInterval 함수를 사용하여 getRandomQuote 함수를 10초마다 실행합니다.
getRandomQuote 함수는 미리 정의된 명언들 중에서 랜덤하게 하나를 선택하여 반환하는 함수입니다.
이 함수는 다음과 같이 작성될 수 있습니다.
function getRandomQuote() { const quotes = [ "Be the change that you wish to see in the world. - Mahatma Gandhi", "The only way to do great work is to love what you do. - Steve Jobs", "In three words I can sum up everything I've learned about life: it goes on. - Robert Frost", "Believe you can and you're halfway there. - Theodore Roosevelt", "I have not failed. I've just found 10,000 ways that won't work. - Thomas Edison", "If you want to live a happy life, tie it to a goal, not to people or things. - Albert Einstein", "Success is not final, failure is not fatal: it is the courage to continue that counts. - Winston Churchill", "You miss 100% of the shots you don't take. - Wayne Gretzky", "Happiness is not something ready made. It comes from your own actions. - Dalai Lama" ]; const randomIndex = Math.floor(Math.random() * quotes.length); return quotes[randomIndex]; }위 코드는 quotes 배열에 명언들을 저장하고, Math.random() 함수를 사용하여 배열에서 랜덤한 인덱스를 선택하여 선택된 명언을 반환합니다.
getRandomQuote 함수를 호출하면 랜덤하게 선택된 명언이 반환됩니다.
이 함수를 사용하여 웹사이트나 애플리케이션에서 랜덤 명언을 보여주는 등의 기능을 구현할 수 있습니다.
매번 새로운 명언과 저자가 화면에 출력됩니다.