[엘리의 드림코딩] 자바스크립트를 이용한 미니게임 만들기(2)

functions

//main logic

loadItems()
.then (items => {
	console.log(items);
	displayItems(items)
    setEventListener(items)
})
.catch (console.log);

1. loadItems()

function loadItems(){
	return fetch('data/data.json')
    .then (response => response.json)
    .then (json => json.items)
}

loadItems 함수선언식

loadItems라는 함수는 data.json을 불러온 뒤, response객체에 json만 가져오고 json애서 items만 가져온다.

2. displayItems()

function displayItems(items){
	const container = document.querySelector('.items');
	container.innerHTML = items.map(item => createHTMLString(item)).join('')
}

displayItems 함수선언식

<ul class="items">

</ul>

HTML상에서의 모습. 우리가 가져온건 뒤에 생성될 item의 부모 items다.

.items를 컨테이너라고 선언한뒤 innerHTML을 붙인다. innerHTML의 기능은 다음과 같다.

Elements.innerHTML

innerHTML 은 요소(element) 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정합니다.
The Element property innerHTML gets or sets the HTML or XML markup contained within the element.

Syntax

const content = element.innerHTML;
element.innerHTML = htmlString;

value
요소(element)의 자손의 HTML 직렬화를 포함하는 DOMString 입니다. Setting the value of innerHTML 의 값을 설정(대입)하면 요소의 모든 자손이 제거되고, 문자열 htmlString에 지정된 HTML을 파싱하고, 생성된 노드로 대체합니다.

모질라답게 설명이 모자란데(..), 즉 우리가 하는 건

element에 innerHTML을 달아서 element의 자손을 제거하고
= htmlString(문자열)처럼 변경할건데,
여기 쓰인 htmlString을 문법적으로 해석하고 대체할거야~

라는 의미인 듯하다.

container.innerHTML = items.map(item => createHTMLString(item)).join('')

컨테이너 안에 채워질 내용은 조금 복잡한데, 구문대로면 htmlString으로 채워져야하지만, container안에 들어가야하는 아이템들의 정보가 정제되어 있지 않기 때문에 items.map을 사용해 바꿔줄 것이다.

map()생성자

map()생성자는 map객체를 생성한다.
*Map 객체는 키-값 쌍을 저장하며 각 쌍의 삽입 순서도 기억하는 콜렉션이다.

Syntax

new Map([iterable])

매개변수에는 요소가 키-밸류 쌍으로 이루어진, Array나 반복가능한(iterable) 객체가 들어간다.

const arr = [0,1,2,3];

let squaredArr = arr.map(function(element){
    return element * element;
});
// 혹은 arrow 함수 가능
squaredArr = arr.map(element => element * element);

console.log(squaredArr); // [ 0, 1, 4, 9 ]

map 사용예제

items.map(item => createHTMLString(item)).join('')

map() 안에 iterable인지 모르겠는 function이 들어갔는데, 이건 item이 Array라 괜찮은 것 같다.
매개변수 item은 loadItems()에서 온 것으로 response.json.items이다.(표기가 맞는지는 잘..ㅎㅎ) items를 넣으면 createHTMLString이라는 함수가 실행된다.

이 함수는 json 포맷의 데이터를 ${}표현식으로 html 안에 잘 구겨넣어줄거다.

function createHTMLString(item){
 return `
	<li class="item">
		<img src="${item.image}" alt="${item.type}" class="item_thumnail"/>
		<span class="item_description">${item.gender}, ${item.size}</span>
	</li>
	`;
}

htmlString의 뼈대를 이 함수에서 잡아주고, 여기에 map의 기능으로 아이템의 수만큼 새로운 객체를 생성한다.

Array.prototype.join()

join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만든다.

즉, 위의 템플릿 리터럴과 자바스크립트 데이터를 하나의 문자열로 만들어준다.
이렇게 해서 자바스크립트 상에서 리스트가 만들어져 보이게 된다.

<ul class="items">
	<li class="item">
		<img src="/images/yellow_t.png" alt="tshirts" class="item_thumnail"/>
		<span class="item_description">female, M</span>
	</li>
    	<li class="item">
		<img src="/images/pink_s.png" alt="skirt" class="item_thumnail"/>
		<span class="item_description">female, L</span>
	</li>
    	</li>
    	<li class="item">
		<img src="/images/blue_p.png" alt="pants" class="item_thumnail"/>
		<span class="item_description">male, S</span>
	</li>
    .
    .
    .
    
</ul>

와 같은 형태로