유튜브 드림코딩 by 엘리 채널에 minishop 프로젝트에 PWA 를 사용하는 예시가 올라왔다. minishop 프로젝트는 js 입문용으로 예전부터 소개되고 있었는데, 단순 웹 구현에서 더 나아가 PWA 적용도 배울 수 있는 기회였다. 작은 프로젝트부터 계속 만들어 볼 생각이다.
- JSON 으로 items 목록을 받아온다.
- 받아온 items 를 화면에 나타낸다.
- 버튼에 맞게 필터링하여 보여주도록 한다.
- 로고 버튼을 누르면 전체 items 가 나타나게끔 한다.
- 리팩토링, PWA
'use strict'
//getElementByClassName 과 querySelectorAll 비교 숙지 필요
const container = document.querySelector(".items");
const logo = document.getElementById("logo");
const btn = document.querySelectorAll(".clothes");
// fetch에 적은 url을 통해 json 파일을 받아올 수 있다
// json에서 items 만 받아오기 위해 과정을 한 번 더 거친다.
const loadData = () => fetch("./data.json")
.then((res)=>res.json())
.then((json)=>json.items);
const createHTML = (item) => {
return `<li><img src="${item.img}">
<span>${item.size}, ${item.gender}</span>
</li>`
}
const displayItems = (items) => {
// join("") 이 아니라 join() 하게 되면 중간에 콤마로 구분됨
container.innerHTML = items.map((item)=>createHTML(item)).join("");
return items;
}
const setEventListener = (items) => {
// 로고 누르면 모든 옷 출력
logo.addEventListener("click", (event) => {displayItems(items)});
// 버튼에 맞게 필터링 되어 출력
btn.forEach(button => button.addEventListener("click", (event) => {
if(event.target.dataset.key === "color"){
displayItems(items.filter((item) => item.color === event.target.dataset.value));
} else if(event.target.dataset.key === "type"){
displayItems(items.filter((item) => item.type === event.target.dataset.value));
} else {
displayItems(items);
}
}))};
loadData()
.then((items) => displayItems(items))
.then((items) => setEventListener(items));
getElementById 와 querySelector 의 결과값은 동일하지만, querySelectorAll 과 비교할 땐 결과가 달라졌다. 구체적으로 학습할 필요가 있었다.
참고) https://guinatal.github.io/queryselector-vs-getelementbyid/
참고) https://devsoyoung.github.io/posts/js-htmlcollection-nodelist
const staticNList = document.querySelectorAll('.product');
const dynamicNList = document.body.childNodes;
console.log(staticNList);
console.log(dynamicNList);
// DOM 변경
const input = document.createElement("input");
document.body.appendChild(input);
console.log(staticNList);
console.log(dynamicNList);
class, id 로 속성값을 생각하기만 했는데 dataset을 이용하면 값 속성을 쉽게 받아올 수 있었다.
https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset