[JAVASCRIPT] 랜덤으로 나오는 명언들

 

완 성 화 면

 

분명 가운데 정렬 했는데 왜째서 오른쪽에 치우쳐져 있는 것이지...?

 

 

 

문제 1번.

불러온 json 파일이 어느 형식인지 확인하기.

 

 

 

 

문제 2번 

1번에서 불러온 json 파일을 이용하여 화면에 출력되게 하는데 10초에 한 번씩 변경되도록 하기.

 

 

코드 보기 / CSS

*{
            margin: 0;
            padding: 0;
        }
        body {
            width: 1200px;
            margin: 0 auto;
            background-color: #000;
        }
        .quote {
            font-size: 24px;
            color: #fff;
            text-align: center;
            line-height: 1.5;
            padding: 20px 0 50px 0;
            font-family: 'Oswald';
            position: relative;
        } 
        .author {
            color: #fff;
            text-align: center;
            font-size: 20px;
            font-family: 'Oswald';
        }

난 억울하다 진짜 가운데로 맞췄단 말이다...

 

 

 

 

코드 보기 /  HTML

<div class="write">
        <div class="quote"></div>
        <div class="author"></div>
    </div>

 

 

 

 

코드 보기  / JAVASCRIPT

 const dummy = (value) => {
            fetch(`dummy01.json`)
            .then(res => res.json())
            .then(items => { 
                    const write = document.querySelector(".write")
                    const random = Math.round(Math.random()*30);
                    write.querySelector(".quote").innerHTML = items.quotes[random].quote;
                    write.querySelector(".author").innerHTML = ` - ${items.quotes[random].author}`;
            })
            .catch((err) => console.log(err)); 
            }
            dummy();
            setInterval(dummy,10000);

 

 

 

 

 

const dummuy :

dummy 함수를 호출합니다.
이 함수는 인자를 하나 받아오지만 현재 이 함수에서는 인자를 사용하지 않으므로 무시된다.

 

fetch(`dummy.json)`

: fetch 함수를 사용하여 "dummy01.json" 파일을 가져온다.
fetch 함수는 HTTP 요청을 보내고, 이에 대한 응답(Response)을 Promise 객체로 반환한다.
즉, 이 함수는 서버로부터 데이터를 받아오는 비동기적인 작업을 수행하는 것이다.
가져온 파일은 JSON 형식으로 변환된 후 items 변수에 저장된다.

res.json() 함수

: Promise 객체의 결과인 Response 객체를 JSON 형식으로 변환하여 Promise 객체로 반환한다.
이 Promise 객체의 결과는 items 변수에 저장된다.

 

write

: write 변수를 사용하여 HTML 문서의 .write 클래스를 가진 요소를 찾아옵니다.
document.querySelector 함수를 사용하여 HTML 문서 내에서 .write 클래스를 가진 요소를 찾아온다.
이 요소는 write 변수에 저장된다.

 

Math.round(Math.random()*30)

: Math.random() 함수는 0부터 1사이의 임의의 실수값을 반환하고, Math.random()*30을 하면 0부터 30사이의 임의의 실수값을 구할 수 있다.
Math.round 함수를 사용하여 소수점 이하를 버리고 가장 가까운 정수값으로 반올림한다.
이 값은 random 변수에 저장된다.

구한 임의의 정수값을 사용하여 items 객체 내의 랜덤한 인덱스를 선택한다.
items 객체는 JSON 파일에서 가져온 명언들이 저장된 객체이며, items.quotes는 명언들이 저장된 배열을 나타낸다.items.quotes[random]은 랜덤한 인덱스를 가진 명언 객체를 나타낸다.
이 객체 내의 quote와 author 속성값을 같이 추출한다.
선택된 인덱스의 quote와 author 속성값을 write 변수를 사용하여 HTML 문서에 출력한다.
write.querySelector(".quote")는 HTML 문서 내에서 .quote 클래스를 가진 요소를 찾아오며, write.querySelector(".author")는 HTML 문서 내에서 .author 클래스를 가진 요소를 찾아온다.
이 두 요소 내의 innerHTML 속성값을 각각 items.quotes[random].quote와 items.quotes[random].author로 변경한다.

 

그리고 만약에 에러가 발생하면 catch  블록을 사용하여 예외처리를 수행한다.

catch 블록에서는 콘솔에 에러를 출력하거나, 사용자에게 에러 메시지를보여줄 수 있다.

 

 

마지막으로 실행문에는

dummy( );와 setInterval(dummy, 10000)이 있는데 dummy( );는 화면에 바로 명언이 출력될 수 있도록 이미 dummy를 한 번 실행시키는 역할을 하고  setInterval(dummy, 10000)은 setInterval을 통해  10초에 한 번씩 dummy 함수가 실행되도록 하는 것이다.