이번에는 쇼핑몰 만들기 프로젝트에서 HTML, CSS, JavaScript 만을 사용하여 사용자 화면 만들기에 대해 포스팅 하겠습니다. 그 중 제가 맡은 js기능에 대해 포스팅하려 합니다.
상품을 리스트 형식으로 나타내고, 각각의 상품은 이름과 가격이 보여집니다. 상품을 장바구니에서 추가/삭제 할 수 있으며, 수량 관리 및 구매도 가능합니다.
프로젝트 구조입니다. 상품 데이터를 담고 있는 products.json 파일은 로컬에 저장합니다. 이미지 폴더에는 상품 이미지들이 담겨져 있습니다.
class Products {
async getProducts(){
try {
let result = await fetch("products.json");
let data = await result.json();
let products = data.items;
products = products.map(item =>{
const {title,price} = item.fields;
const {id} = item.sys;
const image = item.fields.image.fields.file.url;
return {title,price,id,image};
})
return products;
} catch (error) {
console.log(error);
}
}
}fetch()를 비동기로 작동하여 async, await을 사용합니다. 이렇게하면 동기 프로그램처럼 자바스크립트를 사용할 수 있습니다. fetch를 통해 가져온 데이터는 json()파일로 변환합니다. 변환된 json파일에서 필요한 정보만 추출하여 객체에 담아서 반환합니다.
addCartItem(item){
const div = document.createElement("div");
div.classList.add("cart-item");
<>
div.innerHTML = '<img src={item.image} alt="product"/>
<div>
<h4>${item.title}</h4>
<h5>${item.price}</h5>
<span class="remove-item" data-id={item.id}>삭제</span>
</div>
<div>
<i class="fas fa-chevron-up" data-id={item.id}></i>
<p class="item-amount">${item.amount}</p>
<i class="fas fa-chevron-down" data-id={item.id}></i>
</div>
'
</>
cartContent.appendChild(div);
}순수 자바스크립트를 사용하기 때문에 동적으로 UI를 추가합니다. 즉, 필요한 Element를 만들고 속성을 추가해서 화면상 DOM에 추가해줍니다.
class Storage{
static saveProducts(products) {
localStorage.setItem("products",JSON,stringify(Products));
}
static getProducts(id){
let products = JSON.parse(localStorage.getItem("products"));
return products.find(product=>product.id===id);
}
static saveCart(cart){
localStorage.setItem("cart",JSONstringify(cart));
}
static getCart() {
return localStorage.getItem('cart') ? JSON.parse(localStorage.getItem('cart')) : [];
}
}화면상에 필요한 모든 데이터는 하나의 클래스에서 관리합니다. Storage 클래스로 화면상에 필요한 데이터를 관리하였습니다.
setupAPP() {
cart = Storage.getCart();
this.setCartValues(cart);
this.populateCart(cart);
cartBtn.addEventListener('click', this.showCart);
closeCartBtn.addEventListener('click', this.hideCart);
}첫 메인 화면이 나올 때, 사이드 메뉴에 있는 장바구니도 이미 랜더링이 완료되어 DOM에 추가된 상태입니다. 따라서 fetch()로 데이터를 가져오기 전에 로컬에 있는 장바구니의 데이터를 기준으로 화면을 만들어 냅니다.
< 결과 화면 > 
느낀 점
사실, 이번에 프론트엔드로 웹 화면을 만드는건 처음 해봤습니다. 그것도 순수 자바스크립트만을 이용해서 한다는 것이 쉽지 않았습니다. 기본적인 흐름은 fetch()를 통해서 데이터를 전달 받은 다음, 그것을 화면에 나타내고, 장바구니에 추가된 상품들의 목록은 로컬스토리지를 이용해서 로컬에 저장하는 것 입니다. 비교적 간단하지만 프론트엔드에서 데이터를 다루는 기본적인 것들을 공부하기에 충분했습니다. 또한 리액트, 앵귤러 없이 순수 자바스크립트 만으로 제작한 거라서 실력 향상에 큰 도움이 되었다고 생각합니다. 특히, 사이트 내의 데이터를 관리하는 간단한 방법도 공부할 수 있어서 좋았습니다.
SW developer