[팀 포트폴리오] [Momentum 클론 웹사이트] 2. 코드 분석 <quotes.js>

const quotes = [
// 각 명언과 저자 선언 (값 넣기)
    { quote: "첫 번째 명언", author: " -저자" },
    { quote: "두 번째 명언", author: " -저자" },
    { quote: "세 번째 명언", author: " -저자" },
    { quote: "네 번째 명언", author: " -저자" },
    { quote: "다섯 번째 명언", author: " -저자" },
  ];
  
  export function initializeQuotes() {
    const quoteElement = document.querySelector("#quote span:first-child");
    const authorElement = document.querySelector("#quote span:last-child");
    // HTML에 각 JS 객체 연결
    // document.querySelector() : JavaScript의 DOM에서 제공하는 함수로,
    // () 안의 아이디, 클래스, 태그 이름을 입력하면 해당하는 객체를 찾아준다
    // 이때, HTML 문서 안에서 지정한 조건(선택자)과 딱 맞는 태그들 중 가장 첫 번째 태그 하나만 가져온다
    if (!quoteElement || !authorElement) return;
    // quoteElement와 authorElement가 DOM에 제대로 렌더링되었는지 확인하는 안전 장치
  	// 제대로 로드되지 않으면 값을 반환하지 않음
  
    // 기존 텍스트 초기화 (중복 방지) (초기화 즉 빈 배열을 넣는 과정)
    quoteElement.innerText = "";
    authorElement.innerText = "";
  
    // 랜덤 명언 선택
    const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];
    // Math.random() 함수 : 0이상 1미만의 숫자를 생성
    // Math.random()*quotes.length라고 하면 quotes 배열의 길이(갯수)만큼 랜덤한 수를 생성
    // Math.floor() : 소수점을 제거해 가장 가까운 정수로 내림 처리
    // quotes 배열에서 배열 길이만큼의 랜덤한 수(정수로 내림처리 된) 중 하나를 출력하는 todaysQuote 함수가 생성된다
    
    // innerText : 선택한 요소를 HTML에 적용시킴
    quoteElement.innerText = todaysQuote.quote;
    authorElement.innerText = todaysQuote.author;
  }