사전캠프 데일리미션 - 03. 한식 메뉴 렌더링하기
과제에서 데이터가 주어지고 이 데이터로 위의 스크린샷과 같은 화면을 만드는 과제였다.
내 코드 :
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="style.css">
<title>Document</title>
</head>
<body>
<h1>한식 메뉴</h1>
<ul id="menu-list"></ul>
<script src="script.js"></script>
</body>
</html>CSS
body {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
}
h2 {
margin: 0;
}
#menu-list {
width: 380px;
text-align: center;
padding: 0;
}
li {
border: 1px solid gray;
list-style-type: none;
padding: 10px;
margin-bottom: 30px;
}Javascript
const menuItems = [
{ name: '비빔밥', description: '밥 위에 나물, 고기, 고추장 등을 얹고 비벼 먹는 한국 요리' },
{ name: '김치찌개', description: '김치와 돼지고기 등을 넣고 끓인 한국의 찌개 요리' },
{ name: '불고기', description: '양념한 고기를 구워서 먹는 한국 요리' },
{ name: '떡볶이', description: '떡과 어묵을 고추장 양념에 볶아 만든 한국의 간식' },
{ name: '잡채', description: '당면과 여러 채소, 고기를 볶아 만든 한국 요리' }
];
const menuList = document.getElementById('menu-list');
menuList.innerHTML = menuItems
.map(
(item) => `
<li class="menu-item">
<h2>${item.name}</h2>
<p>${item.description}</p>
</li>
`
)
.join('');
여기까지는 필수 사항만 구현한 코드이다.
4. (선택 사항) 객체의 속성을 추가 해봅니다.(e.g. 가격, 카테고리 등)
선택사항 4번은 예시로 나와있는 가격을 객체의 속성으로 추가했다.
const menuItems = [
{ name: '비빔밥', description: '밥 위에 나물, 고기, 고추장 등을 얹고 비벼 먹는 한국 요리', price: '9000원' },
{ name: '김치찌개', description: '김치와 돼지고기 등을 넣고 끓인 한국의 찌개 요리', price: '8000원' },
{ name: '불고기', description: '양념한 고기를 구워서 먹는 한국 요리', price: '12000원' },
{ name: '떡볶이', description: '떡과 어묵을 고추장 양념에 볶아 만든 한국의 간식', price: '10000원' },
{ name: '잡채', description: '당면과 여러 채소, 고기를 볶아 만든 한국 요리', price: '7000원' }
];menuItems에 price 속성을 추가했고
menuList.innerHTML = menuItems
.map(
(item) => `
<li class="menu-item">
<h2>${item.name}</h2>
<p>${item.description}</p>
<b>${item.price}</b> // price 추가
</li>
`
)
.join('');description 속성 아래에 price 속성이 나오도록 <b>${item.price}</b> // price 추가 코드를 추가했다.
5. (선택 사항) filter를 사용하여 설명에 “고기”가 포함된 메뉴 항목만 화면에 노출시킵니다.
선택사항 5번은 menuItems2를 menuItems의 description속성에 '고기'가 포함된 item만 필터되도록 선언하였다.
const menuItems2 = menuItems.filter((item) => item.description.includes('고기'));자바스크립트 최종 코드 :
const menuItems = [
{ name: '비빔밥', description: '밥 위에 나물, 고기, 고추장 등을 얹고 비벼 먹는 한국 요리', price: '9000원' },
{ name: '김치찌개', description: '김치와 돼지고기 등을 넣고 끓인 한국의 찌개 요리', price: '8000원' },
{ name: '불고기', description: '양념한 고기를 구워서 먹는 한국 요리', price: '12000원' },
{ name: '떡볶이', description: '떡과 어묵을 고추장 양념에 볶아 만든 한국의 간식', price: '10000원' },
{ name: '잡채', description: '당면과 여러 채소, 고기를 볶아 만든 한국 요리', price: '7000원' }
];
const menuItems2 = menuItems.filter((item) => item.description.includes('고기'));
const menuList = document.getElementById('menu-list');
menuList.innerHTML = menuItems2
.map(
(item) => `
<li class="menu-item">
<h2>${item.name}</h2>
<p>${item.description}</p>
<b>${item.price}</b>
</li>
`
)
.join('');(선택사항 5번 filter 적용한 화면)
