6.1 Background

정진우·2022년 10월 31일

랜덤으로 배경화면이 나오는 이미지를 만들어보자. js 폴더 안에 background.js라는 파일을 만들어준 뒤 index.html에서 import 시켜준다.

이미지 폴더를 만들고 그 안에 사용할 이미지를 넣어준다.

background.js는 quotes.js랑 작성할 내용이 비슷한 부분이 많다. 랜덤 한 숫자를 얻어서 그걸로 이미지를 고르고 그 이미지를 body에 추가하기 때문이다. image Array를 만들고 img 폴더에 있는 이미지들과 image Array 안의 이름을 같게 작성한다.

여기서 필요한 숫자는 0부터 8이다. 0부터 8까지 접근이 가능하기 때문이다, 그런데 이렇게 하드코딩을 하면 나중에 이미지를 추가하거나 삭제했을 경우 코드 수정 시 자동 반영이 되질 않아서 직접 수정해 줘야 하는 번거로움이 있다.

const images = [
  "0.jpg",
  "1.jpg",
  "2.jpg",
  "3.jpg",
  "4.jpg",
  "5.jpg",
  "6.jpg",
  "7.jpg",
  "8.jpg",
];

const chosenImage = images[8]; // X 

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

console.log(chosenImage);

전에 사용했던.length를 사용하자, .length가 배열의 길이를 체크, 코드 수정 시 자동으로 반영시킨다. Math.floor()로 숫자를 내림해 주고 Math.random()으로 나온 숫자에 image Array의 길이 값을 곱한 숫자를 내림한다. 코드를 작성한 뒤 console.log()로 확인해 보면 이미지 이름이 계속 랜덤으로 출력되는 걸 확인할 수 있다. 이제 이미지를 html에 실제로 추가해 보자.

📌 createElement()

자바스크립트를 이용하여 문서에 HTML 요소를 추가할 수 있습니다. createElement() 메 서드는 지정한 tagName의 HTML 요소를 만들어 반환합니다.

document.createElement("img")

보이는 것처럼 <img>가 생겼다. 하지만 이 태그는 현재 어디에도 존재하지 않는다. 지금은 태그만 만들었을 뿐 어느 위치에 둘지, 태그 속에 어떤 내용을 넣을지 안정했기 때문입니다.

Elememt 탭에서 보려고 하면 “현재 페이지에서 노드를 찾을 수 없습니다.”라는 문구가 보이며 어디에도 없는 것을 확인할 수 있습니다.

bgImage.src = `img/${chosenImage}`; // 코드에 적혀있는 img는 이미지가 담겨있는 img파일을 의미한다.

console.log(bgImage);

코드를 작성한 뒤에 새로고침하면 JavaScript에서 html element를 생성할 수 있다는 것을 알게 됐다. JavaScript에서 작성하는 것은 html에서 아래 코드처럼 작성하는 것과 같다. 차이점은 html에서가 아닌 JavaScript에서 해준다는 것, 하지만 여전히 현재 어디에도 존재하지 않는다. JavaScript에만 존재한다.

<img src="img/5.jpg">

📌 append(), appendChild()

append() 및 appendChild()는 DOM(문서 개체 모델)에 요소를 추가하는 데 사용되는 두 가지 방법, 두 메서드는 모두 부모 노드에 자식 노드를 추가하는 메서드입니다.

◎ append()

append() 메서드를 활용하면 노드 객체(Node object)나 DOMString(text)를 사용할 수 있다. 또 한 번에 여러 개의 자식 요소를 설정할 수 있습니다.

// 새로운 단락 요소를 생성하고 문서에 있는 바디 요소의 끝에 붙입니다.

let span = document.createElement("span");
document.body.append(span);

append()의 인자속에 추가하고 싶은 변수를 넣고, append()앞에 자식으로 속하고 싶은 위치를 넣는다.

Node object 사용 예시

// Node object 삽입
const parent = document.createElement("div")
const child = document.createElement("p")

parent.append(child)

// <div><p></p></div>

문자열(DOMString) 사용 예시

// DOMString 삽입
const parent = document.createElement("div")
parent.append('append 예시')

// <div>append 예시</div>

여러 개의 자식 요소를 설정하는 예시

const div = document.createElement('div')
const span = document.createElement('span')
const p = document.createElement('p')

document.body.append(div,'Hello',span,p);

{/* 
<body>
<div></div>
Hello
<span></span>
<p></p>
</body> 
*/}

append()메서드는 return 값을 반환하지 않는다.

const div = document.createElement('div')
const span = document.createElement('span')
const p = document.createElement('p')

console.log(document.body.append(div,'Hello',span,p)) // undifined

◎ appendChild

appendChild() 메서드는 append()와는 다르게 오직 Node 객체만 받을 수 있습니다. append()는 여러 개의 노드와 문자를 추가할 수 있지만 appendChild()는 한 번에 하나의 노드만 추가할 수 있습니다.

// 새로운 단락 요소를 생성하고 문서에 있는 바디 요소의 끝에 붙입니다.

let div = document.createElement("div");
document.body.appendChild(div);

appendChild()의 인자속에 추가하고 싶은 변수를 넣고, appendChild()앞에 자식으로 속하고 싶은 위치를 넣는다.

Node object 사용 예시

// Node object 삽입
const parent = document.createElement("span")
const child = document.createElement("p")

parent.appendChild(child)

// <span><p></p></span>

문자열(DOMString) 사용 예시 appendChild()메서드는 DOMString을 넣을경우 에러가 발생합니다.

const parent = document.createElement("div")

parent.appendChild('Hello')

// Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

appendChild()에서 문자열을 추가해야 한다면 createTextNode()를 생성 후 삽입해 주어야 한다. 바로 String을 넣어주려 하면 에러가 발생한다.(그냥 append()를 사용하자)

const h1 = document.createElement("h1") // h1태그 생성
const textNode = document.createTextNode("안녕하세요!") // textNode 생성
h1.appendChild(textNode) // textNode appendChild 시키기
document.body.appendChild(h1) // appendChild()를 사용해 textNode를 body에 위치

appendChild() 메서드는 return값을 반환합니다.

const div = document.createElement("div");
const span = document.createElement("span");

console.log(document.body.appendChild(div));

// <div></div>

📌 append()와 appendChild() 차이점

두 메서드의 차이점은 append()를 이용하면 요소에 노드 객체(Node object) 또는 문자열(DOMString)을 자식 요소로 추가할 수 있지만, appendChild()는 노드 객체만을 추가할 수 있습니다.

const parent = document.createElement('div');
const child = document.createElement('p');
// 노드 개체 추가
parent.append(child) // 잘 작동한다
parent.appendChild(child) // 잘 작동한다
// 문자열(DOMString) 추가
parent.append('Hello world') // 잘 작동한다
parent.appendChild('Hello world') // 에러를 발생시킨다

appendChild()는 추가한 자식 노드를 반환하지만, append()는 반환 데이터가 없습니다.

const parent = document.createElement('div');
const child = document.createElement('p');
const appendValue = parent.append(child);
console.log(appendValue) // undefined
const appendChildValue = parent.appendChild(child);
console.log(appendChildValue) // <p><p>

append()를 사용하면 여러 항목을 추가할 수 있지만 appendChild()는 단일 항목만 허용합니다.

const parent = document.createElement('div');
const child = document.createElement('p');
const childTwo = document.createElement('p');
parent.append(child, childTwo, 'Hello'); // 잘 작동한다
parent.appendChild(child, childTwo, 'Hello');
// 잘 작동하지만 첫 번째 요소를 추가하고 나머지는 무시합니다.

결국 append(), appendChild() 모두 노드 객체를 삽입하는 기능은 같지만, 텍스트와 2개 이상의 객체를 다루는 상황에서는 차이가 있고, appendChild()를 사용할 수 있는 경우에는 append()를 사용할 수 있지만 그 반대의 경우는 사용할 수 없습니다.

appendChild()의 인자 속에 추가하고 싶은 변수 bgImage를 넣고, appendChild() 앞에 자식으로 속하고 싶은 위치 body에 위치시킨다.

const bgImage = document.createElement("img"); // img 태그 생성
bgImage.src = `img/${chosenImage}`; // JavaScript에서 html element를 생성
document.body.appendChild(bgImage); // appendChild()를 사용해 bgImage(생성된 img 태그)를 body에 위치

appendChild() 추가 전

appendChild() 추가 후

화면을 새로고침 후 Elements를 확인해보면 html이 추가된것을 확인할 수 있고 배경화면이 새로고침에 따라서 랜덤으로 바뀌는것을 볼 수 있다.

	append()	appendChild()
노드 객체(Node object)	O	O
문자열(DOMString)	O	X
반환값(return)	X	O
다중 값 허용	O	X

append()와 appendChild()를 정리하면서 append()가 더 활용성이 높다는 것을 알게 되었다. 그래서 사용할 일이 생긴다면 appendChild() 보다 append()를 더 많이 사용할 것 같다.

// 이미지가 담겨있는 배열
const images = [
  "0.jpg",
  "1.jpg",
  "2.jpg",
  "3.jpg",
  "4.jpg",
  "5.jpg",
  "6.jpg",
  "7.jpg",
  "8.jpg",
];

// Math.floor(Math.random()) 으로 랜덤한 정수를 생성하고
// 변수 image(이미지가 담겨있는 배열)의 길이만큼 곱해 정수인 난수를 출력, 이미지를 랜덤으로 생성해주는 변수
const chosenImage = images[Math.floor(Math.random() * images.length)];

const bgImage = document.createElement("img"); // img 태그 생성
// "img" 라는 tagName를 가진 HTML의 요소를 만들어반환
// 이 태그는 현재 어디에도 존재하지 않는다. 지금은 태그만 만들었을 뿐 어느 위치에 둘지, 태그 속에 어떤 내용을 넣을지 안정했기 때문

// JavaScript에서 html element를 생성
bgImage.src = `img/${chosenImage}`;

// appendChild()를 사용해 bgImage(생성된 img 태그)를 body에 위치
document.body.append(bgImage);

정진우

내가 바뀌지 않으면 아무것도 바뀌지 않는다 🔥🔥🔥

이전 포스트

6.0 Quotes

다음 포스트