[JS] 노마드코더 - 바닐라 JS로 크롬 앱 만들기 #Quotes And Background

Quotes

Momentum을 봤을 때, 맨 하단에 새로고침을 할 때마다 랜덤으로 다른 명언들이 뜨는 것을 확인할 수 있다. 이번 파트는 그 부분을 구현해 보는 단계이다.

미리 조사한 명언들을 모아 Array를 만든다. 이 명언들은 영어여도 좋고, 한국어여도 좋다. 나는 그냥... 있어 보이려고 영어로 모아놨다. 여기서 주의할 점! 콤마(,)를 잊고 배열을 작성하면 안 된다. 가장 기초적이며 많은 실수이기도 하다. 이 점을 주의하며 아래 코드처럼 quotes.js 파일을 작성해 준다. 명언들은 이곳에서 가져왔다.

const quotes = [
    {
        quote: "You can't change what you are, only what you do.",
        author: "Philip Pullman"
    },
    {
        quote: "Lay a firm foundation with the bricks that others throw at you.",
        author: "David Brinkley"
    },
    .
    .
    .
]

#1. Math Module

우리가 가져오고 싶은 것은? 명언 배열의 전체가 아니라 명언 배열 중 하나를 랜덤으로 가져오는 것이다. 그러기 위해서는 근본적으로 배열에서 element 하나를 가져와야 하는데, 이러한 경우에는 배열이름[가져올배열의순서] 로 표현하면 된다. 예를 들어, console.log로 확인하고 싶다면 아래와 같이 하면 된다. 각각 배열의 첫 번째와 마지막 명언을 가져온 모습이다. 배열에서 첫 번째는 0이 되며, 마지막 순서는 배열의 길이에서 1을 빼면 확인할 수 있다.

random()

그런데, 우리가 구현하고 싶은 것은 뭐다? 랜덤으로 명언이 표시되는 것이다. 이때, 사용할 수 있는 것이 Math Module인데, JavaScript가 내장하고 있어 간편히 사용할 수 있다. 그 중에서 우리가 사용할 것은 random()이다.

random()은 0부터 1 사이의 랜덤한 숫자를 제공한다.

우리가 원하는 것은 0과 9사이의 랜덤한 숫자! 매우 간단하다. 뒤에 * 숫자만 해 주만 만사 오케이~ Math.random() * 10 와 같이 말이다. 

(나의 착각으로 사진에서는 9로 작성하였는데 10을 넣는 것이 맞다. item이 10개이기 때문에.)

round()

그러나, 여전히 소수점을 가지고 출력되는데 이를 해결할 함수도 Math가 가지고 있다.

그 중 하나가 round()이다. 이 함수는 쉽게 말하면 반올림을 해 주는 함수이다. Math.round(1.2)를 입력하면 1을 돌려주고, Math.roud(1.8)을 입력하면 2를 돌려 준다. 1.2의 반올림은 1이고, 1.8의 반올림은 2이기 때문에.

ceil()

그 다음으로 소개할 함수는 ceil()이다. ceil()는 숫자를 천장(ceil)까지 높여주는 함수이다. 즉, 반올림이 아닌 그냥 올림을 해 버리는 것이다. Math.ceil(1.0)을 입력하면 그대로 1이 출력되겠지만, Math.ceil(1.1)을 입력하면 2로 출력이 된다.

floor()

다음은 floor()이다. floor()는 ceil()과 반대로 floor까지 숫자를 내려 주는 함수이다. floor() 안에 1.1을 넣든 1.9를 넣든 출력되는 값은 1이 된다.

여기서, 우리가 구현할 랜덤을 사용하는 것은 ceil()보다는 floor()가 더 적합하므로, floor()을 사용하여 구현할 것이다. 위에서 미리 구현해 봤던 0부터 9까지의 랜덤한 숫자를 floor() 안에 넣어 출력하면, 이제 우리가 원하던대로 소수점 없이 랜덤한 숫자를 얻을 수 있다.

그럼 이제 우리는 Math.floor(Math.random()*9)가 랜덤한 숫자를 나타낸다는 것을 알게 되었다. 그렇다면 이제 해야할 것은 숫자를 출력하는 것이 아닌, 명언을 출력하는 것. 아까 console.log에 특정한 배열을 출력했던 곳에 대신 Math.floor(Math.random()*9)를 삽입하면, 랜덤한 번째의 명언이 출력된다.

console.log(quotes[Math.floor(Math.random()*9)]);

여기서 마무리로, 현재 우리는 직접 배열의 갯수를 세고 10개라는 것을 알아낸 뒤에 10에서 1을 뺀 것을 quotes 배열의 길이로 나타내고 있다. 그러나, 명언을 추가하게 된다면? 9보다 더 큰 숫자가 붙어야 할 것이다. 그렇기 때문에 우리는 JavaScript가 알아서 Array의 길이를 알아내도록 코드를 변경해 주어야 한다. Array의 길이를 표현하는 법은? Array.length이다. 우리의 Array 이름은 quotes이므로, quotes.length로 표현해 주면 된다.

그렇다면 랜덤 명언을 출력할 수 있는 코드가 완성되었다! 많이 사용할 예정이니 'todaysQuote'라는 이름의 상수에 저장해 두도록 하자.

#2. innerText

이제 마무리 작업. 이 랜덤한 명언들을 페이지에 보여주기 위해서 HTML에 미리 만들어 뒀던 span 요소 안에 그 명언들이 보이도록 innerText 작업을 해 주는 일만 남았다. 이 부분은 앞에서도 많이 한 작업이기 때문에 수월할 거다. quote.innerText = todaysQuote 와 author.innerText = todaysQuote 로 구현을 해 줄 수 있을 텐데, 우리는 todaysQuote에 각각 명언과 작가 이름이 들어있다는 것을 잊으면 안 된다. quote에는 todaysQuote에 있는 명언이 입력되어야 할 것이고, author에는 todaysQuote에 있는 작가 이름이 입력되어야 할 것이다. 그러므로 아래와 같이 구현한다.

const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");

const todaysQuote = quotes[Math.floor(Math.random()*quotes.length)];

quote.innerText = todaysQuote.quote;
author.innerText = todaysQuote.author;

---

Background

Momentum에서 랜덤으로 나오는 것은 명언 뿐이 아니다. 배경화면도 함께 새로고침을 할 때마다 랜덤으로 바뀌어서 나타나고 있다. 이번 파트에서는 그 Background를 구현해 볼 예정이다.

제일 먼저 해 줄 작업은 background.js 파일을 만들어 주는 것과 img 폴더를 만들어 이미지 파일을 넣어 주는 작업이다. 나는 img 폴더에 세 개의 이미지 파일을 넣어 주었다. 각각 이름은 0, 1, 2로 저장하여 넣어 주었는데 파일 이름은 자유이다. 나는 그냥 내가 알아보기 쉽게 하기 위해 저렇게 넣어 주었다. HTML 파일에 js 파일을 import 해 주는 작업도 잊지 말아야 한다.

이 작업은 위에서 랜덤 명언을 출력하던 방법과 매우 유사하다. 거의 같은 방법으로 구현하면 된다고 봐도 무방하다. HTML에 어떠한 요소로 출력되느냐만 다를 뿐. 명언을 구현했던 것처럼 이미지 파일들도 images 라는 배열에 각각 담아 주고, Math 함수들을 사용하여 랜덤 숫자를 추출했던 부분을 그대로 가져와 상수 선언을 해 주면 된다.

const images = [
    "0.jpg",
    "1.jpg",
    "2.jpg",
];

 const chosenImage = images[Math.floor(Math.random()*quotes.length)];

벌써 다 끝났다. 이제 HTML에 나타나게만 해 주면 끝이다. 여태까지 우리는 HTML 요소를 추가하여 JS 파일에서 불러와 작업을 했는데, 이번엔 좀 다른 방법으로 접근할 것이다. 왜냐? 미리 HTML 안에서 요소를 선언해 주면 이미지 파일을 특정된 파일로 고정하여 구현할 수밖에 없기 때문이다. JS 파일에서 HTML 요소를 하나 만들어 주어 HTML에 삽입하는 작업을 할 것인데, 이때 createElement 라는 것을 사용할 것이다. 원하는 HTML 요소를 만들어 주는 method이다. 괄호 안에 원하는 요소를 적으면 그 요소가 생성된다. 우리는 img 요소가 필요하니 img 요소를 생성하도록 하자.

const image = document.createElement("img");

그러나, 우리가 img 폴더에 추가한 이미지들을 보이기 위해서는 img 요소만 있으면 안 된다. 기본적으로 img 요소는 <img src="/~" /> 로 동작하기 때문에 src로 이미지들의 경로를 설정해 주어야 한다. 여기서 공통적으로 모두 img라는 폴더에 있으므로 img/ 까지 넣어 준 후, 그 뒤에 랜덤한 파일의 이름이 들어갈 예정이니 chosenImage를 입력해 준다.

image.src = `img/${chosenImage}`;

이제, 진짜로 마지막! HTML에 실제로 추가하여 우리 눈에 보이도록 하자. 하나의 method 사용으로 쉽게 가능하다. 바로 appendChild! 우리는 body 요소를 불러온 적이 없기 때문에 document.body로 body 요소를 불러온 후, appendChild로 image를 추가해 주면 원하는 작업은 끝난다.

document.body.appendChild(image);

---

Quotes And Background 파트를 마무리하며

코딩 쉰지 한 달 정도가 되어 오랜만에 만나는 Math 객체가 꽤나 반가운 파트였다. appenChild도 마찬가지! 이런 방법도 있었지~ 하며 되돌아 보는 파트였던 것 같다. 사실 감을 많이 잃었어서 혼자 하기에는 막막한 클론 작업이 되었을 것 같은데 니꼬 쌤과 함께 하니 좀 더 수월하고, 복습하는 기분이라 재미있다. 점점 어떻게 구현하면 원하는 결과를 얻을 수 있는지 알아가고 있는 중!