JS-4) Quotes, Background 만들기

 * 아래 진행은 '노마드코더' 님의 무료 JS 강의를 참고했습니다.

 이번에는 영문으로 된 격언과 그걸 한글로 번역한 문장을 웹 브라우저에 랜덤으로 띄울 예정이다. 이를 위해서 격언 10개를 영/한 버전으로 각각 준비해 둔다.

 그 다음으로는 배경 이미지를 마찬가지의 방법으로 랜덤으로 웹 브라우저 상에 띄울 예정이다. 이를 위해서 사전에 배경 이미지 3개를 준비해 둔다.

[quotes.js handling]

- quotes.js 파일을 추가하고, index.html과 연결한다.

- index.html에 영/한 버전의 격언이 들어갈 자리를 추가한다. div 태그 id="quotes"로 만들어서 그 안에 span 태그를 두 개 추가한다.

- 여기서 div 태그와 span 태그의 차이점을 짚고 넘어가자.

span : 문장 단위로 텍스트 영역을 지정(한 줄로 표현되는 인라인 요소로 줄 바꿈을 하지 않으며 한 줄로 표시)

input) <span>text</span>other

output) textother

div : 문단 단위로 영역을 지정(블록 레벨 요소로 줄 바꿈이 일어나 상하로 분리 된다)

input) <div>text</div>other

output) text

          other

위와 같이 출력 되는 차이점이 있다.

- 이제 quotes.js 로 넘어와서 미리 준비했던 격언들을 array 형태로 변수를 선언해 준다.

const quotes = [

{

 quote : "The dies is cast",

 translate : "주사위는 던져졌다.",

}, ...

];

- 이제 html에 작성해 둔 div id="quotes"의 span들과 연결해서 변수를 선언한다.

const qoute = document.querySelector("#quotes span:first-child");

const traslate = document.querySelector("#quotes span:last-child");

여기서 span:first-child는 id="quotes" 의 span 태그 중 맨 처음 태그를 가져오는 역할을 한다. 마찬가지로 span:last-child는 id="quotes"의 span 태그 중 마지막 태그를 가져온다.

- 이제 10가지의 격언 중에 랜덤으로 하나를 추출해서 웹 브라우저 상에 띄워줄 변수가 필요하다. 이때 우리는 Math.random() 메서드를 사용할 수 있다. Math.random() 메서드는 0 ~ 1에 해당하는 난수를 무작위로 출력한다. 해당 메서드를 console.log() 해보면, 새로고침 할 때마다 아래와 같은 난수가 출력 되는 것을 볼 수 있다. 

input) Math.random();

output) 0.6184687765430696

- 우리는 위에서 array로 만든 quotes 중 랜덤한 하나를 인덱싱 해야 하므로 array의 길이에 맞는 정수를 필요로 한다. 

Math.random() * quotes.length;

위의 식을 실행 시키면 quotes의 길이인 10이 난수에 곱해져서 출력 된다.

- 하지만 우리가 원하는 건 랜덤한 정수이기 때문에 Math.floor()를 활용해서 소수점 아래 수를 모두 버려준다.

Math.floor(Math.random * quotes.length);

이때 굳이 Math.floor 를 사용하지 않고, Math.round() 나 Math.ceil() 을 사용해도 된다. 이 둘은 각각 round는 소수점 뒷자리를 삭제해주고, ceil은 올림의 역할을 수행한다.

- 랜덤하게 나온 정수로 quotes의 array에서 인덱싱 하기 위해 아래처럼 변수를 선언한다.

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

- 위의 변수를 활용해서 html의 span에 각각 innerText로 quote와 translate를 넣어준다.

quote.innerText = todayQuote.quote;

translate.innerText = todayQuote.translate;

이 상태로 웹 브라우저로 돌아가서 새로고침을 하면 매번 랜덤한 격언이 표시된다.

최종 코드는 아래와 같다. (array는 길어서 접어뒀다.)

[Background.js handling]

이번에는 배경 이미지를 랜덤하게 나오도록 만들어 볼 예정이다. 새로운 폴더로 img 폴더를 하나 생성해서 적당한 이미지를 3개 넣어준다. 나는 알아보기 쉽게 각각 0.jpg, 1.jpg, 2.jpg로 이미지 파일 3개를 넣어줬다. (만약 내 프로젝트 폴더를 찾기 어렵다면, 내 pc -> user -> 프로젝트명 순으로 찾아가면 찾을 수 있을 거다.)

- js 폴더에 background.js 파일을 생성하고 index.html 파일과 연결한다.

- 저장한 3개의 이미지를 array 형태로 변수를 선언한다.

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

- 위의 격언에서 만든 것처럼 랜덤한 이미지가 뽑히도록 만들어 변수로 선언한다.

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

- 이번에는 html에 직접 태그를 넣는 게 아니라 js파일에서 html로 태그를 넣도록 만들 예정이다. 그러기 위해서는 우선 createElement 메서드를 활용해야 한다.

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

위의 bgImage를 사용할 경우 img 태그를 갖고 있는 코드가 생성된다. 아직 index.html 상에는 입력되지 않은 상태이다.

- 이제 img 태그에 이미지 파일들의 경로를 지정해줘야 한다.

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

위 코드는 img 태그에 src="img/0.jpg" ... 등의 경로를 추가하는 것과 같다. 이 경로가 새로고침 마다 랜덤으로 선택되는 거다. html에서 src 속성은 원하는 이미지의 URL을 지정하는 문자열이다.

- 이제 index.html에 우리가 만든 img 태그를 집어 넣어서 동작시켜야 한다. 여기에는 appendChild 메서드가 사용된다. appendChild 메서드는 지정된 부모 노드의 자식 노드 목록 맨 끝에 노드를 추가해준다.

document.body.appendChild(bgImage);

위 코드는 index.html의 body 안의 맨 마지막에 만들어 둔 img 태그를 추가하는 내용이다.

최종 코드는 아래와 같다.

내가 알기로 위처럼 이미지를 넣는 것은 절대 경로를 사용하는 형식이어서 내가 갖고 있는 이미지 파일들만 넣을 수 있는 걸로 알고 있다. 만약 나중에 더 많은 이미지를 다뤄야 한다면, 그에 맞는 다른 방식을 찾아서 사용해야 할 것 같다.

python에서는 import random으로 사용하던 메서드가 JS로 넘어오니 다른 형식으로 사용되는 게 재밌는 부분이었던 것 같다. 그리고 앞에서는 HTML에 직접 태그를 입력한 후 JS 파일에서 불러오는 형식으로 진행하다가 반대로 JS 파일에서 HTML로 태그를 넣어주는 형식으로 만든 부분도 흥미로웠다. 

내용을 그냥 했을 때 보다 정리할 때가 훨씬 기억에 남는 게 많은 것 같다. 나머지도 빨리 정리해서 내 것으로 만들어야겠다.

"기억은 기록을 이기지 못한다." 아쟈아쟈!