✨ Js 한식 메뉴 렌더링
조건
const menuItems = [
{ name: '비빔밥', description: '밥 위에 나물, 고기, 고추장 등을 얹고 비벼 먹는 한국 요리' },
{ name: '김치찌개', description: '김치와 돼지고기 등을 넣고 끓인 한국의 찌개 요리' },
{ name: '불고기', description: '양념한 고기를 구워서 먹는 한국 요리' },
{ name: '떡볶이', description: '떡과 어묵을 고추장 양념에 볶아 만든 한국의 간식' },
{ name: '잡채', description: '당면과 여러 채소, 고기를 볶아 만든 한국 요리' }
];-
배열 메서드로 데이터를 화면에 표시합니다.
HTML
<div id="wrap" class="wrap">
<h2 id="title">한식 메뉴</h2>
<ul id ="menuList">
<li>
<h3>비빔밥</h3>
<p>밥 위에 나물, 고기, 고추장 등을 얹고 비벼 먹는 한국 요리</p>
</li>
</ul>
</div>-
(선택 사항) CSS로 간단한 스타일을 적용합니다.
-
(선택 사항) 객체의 속성을 추가 해봅니다.(e.g. 가격, 카테고리 등)
JS
{ name: '제육볶음', description: '돼지고기를 고추장, 고춧가루와 양념해 양파와 볶은 한국의 볶음 요리', price: '10.000' }
const { name, description, price } = data;-
(선택 사항)
filter를 사용하여 설명에 “고기”가 포함된 메뉴 항목만 화면에 노출시킵니다.JS
if(data.description.includes('고기')) {
list += `
<li class="color">
<h3>${data.name}</h3>
<p>${data.description}</p>
<p>${data.price}원</p>
</li>`;
} 고기만 랜더링 하려 했지만, 색상만 바꾸어 출력했다.
코드
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>한식 메뉴 랜더링 하기</title>
<script async src="index.js"></script>
</head>
<body>
<div id="wrap" class="wrap">
<h2 id="title">한식 메뉴</h2>
<ul id ="menuList"></ul>
</div>
</body>
</html>
defer: 모든 DOM이 로드된 후에 실행
async: 오직 파일을 불러오는 것만 병렬로 실행, 실행 순서 보장 X
CSS
html{ height:100%; }
body{ height:100%; }
.wrap{ width:100%; height:100%; display:flex; justify-content:center; align-items:center; background-color: rgba(0, 0, 0, 0.4); }
.container{ width:auto; min-height:130px; height:auto; padding:20px; display:flex; flex-direction:column; justify-content:space-between; align-items:start; background-color:#fff; border:1px solid #fff; border-radius:8px; box-shadow:3px 3px 5px 0 rgba(0, 0, 0, 0.2); }
.container > h2{ margin-bottom:10px; }
.container > p{ margin-bottom:8px; display:none; color:rgb(116, 71, 71); font-size:18px; font-weight:600; }
.content{ margin:5px 0; display:flex; flex-direction:row; gap:5px; }
.content > *{ padding:4px 6px; border:1px solid #444; border-radius:2px; color:#444; }
.content > *::placeholder{ color:#444; }
.content > input{ caret-color:rgb(116, 71, 71, 0.5); }
.content > button:nth-of-type(2){ background-color:#000; border:1px solid #000; color:#fff; }
.content > button:hover{ background-color:rgb(116, 71, 71, 0.5); border:1px solid transparent; color:#fff; }JS
'use script';
let list = ``; // 빈 문자 값(초기화)
const menuList = document.querySelector('#menuList'); // list 가지고 오기
const menuItems = [
{ name: '비빔밥', description: '밥 위에 나물, 고기, 고추장 등을 얹고 비벼 먹는 한국 요리', price: '7.000' },
{ name: '김치찌개', description: '김치와 돼지고기 등을 넣고 끓인 한국의 찌개 요리', price: '7.000' },
{ name: '불고기', description: '양념한 고기를 구워서 먹는 한국 요리', price: '12.000' },
{ name: '떡볶이', description: '떡과 어묵을 고추장 양념에 볶아 만든 한국의 간식', price: '4.000' },
{ name: '잡채', description: '당면과 여러 채소, 고기를 볶아 만든 한국 요리', price: '8.000' },
{ name: '된장찌개', description: '된장과 여러 채소를 넣어 끓인 한국의 찌개 요리', price: '7.000' },
{ name: '감자전', description: '감자를 강판에 갈아 구운 한국의 전 요리', price: '5.000' },
{ name: '제육볶음', description: '돼지고기를 고추장, 고춧가루와 양념해 양파와 볶은 한국의 볶음 요리', price: '10.000' }
];
const menuElements = menuItems.map((data) => {
const { name, description, price } = data; // 구조 분해 할당
if(data.description.includes('고기')) { // 고기 포함 조건문
list += `
<li class="color">
<h3>${data.name}</h3>
<p>${data.description}</p>
<p>${data.price}원</p>
</li>`;
}
return false;
});
menuList.innerHTML = list;
객체 구조 분해 할당: 비구조화 할당으로 변수 받으면 편하게 key:value 구분 해서 쓸 수 있다.
const menuItemLi = document.createElement('li'); // li 엘리먼트 생성: 아마 이걸 쓰라고 한 것을 보면 db를 건들일 수 없는 경우에 이렇게 추가해서 쓰라고 한건가 싶기도하고..
menuItemLi.appendChild(itemName); // 생성한 li 엘리먼트에 메뉴 이름 추가
menuItemLi.appendChild(itemDescription); // 생성한 li 엘리먼트에 메뉴 설명 추가
(출처 : 구조 분해 할당)
(출처 : Array.prototype.filter())
(출처 : Array.prototype.map())
(참고할 것 : 다른 방식으로 풀이)
(참고할 것 : 다른 방식으로 풀이)
⚠️ 해야할 것
객체 속성 추가 하기
// 이것도 사용해서 해보기
const menuElements = menuItems.map((item) => {
// ...
});
const menuItemLi = document.createElement('li'); // li 엘리먼트 생성
// ...
menuItemLi.appendChild(itemName); // 생성한 li 엘리먼트에 메뉴 이름 추가
menuItemLi.appendChild(itemDescription); // 생성한 li 엘리먼트에 메뉴 설명 추가
const menuList = document.querySelector('#menu-list');
menuList.innerHTML = menuItems
.map(
(item) => `
<li class="menu-item">
<h2>${item.name}</h2>
<p>${item.description}</p>
</li>
`
)
.join('');
const menuItemLi = document.createElement('li'); // li 엘리먼트 생성
// ...
menuItemLi.insertAdjacentElement('beforeend', itemName); // 생성한 li 엘리먼트에 메뉴 이름 추가
menuItemLi.insertAdjacentElement('beforeend', itemDescription); // 생성한 li 엘리먼트에 메뉴 설명 추가github 배포하기
(바로가기 : 한식 메뉴 렌더링)
