한식 메뉴 렌더링 하기

하영·2024년 6월 29일

etc.

목록 보기

3/26

데일리미션 과제 중 하나인 한식메뉴 렌더링 과제!
map()도 사용하고 for 반복문도 사용하고 최대한 내가 해볼 수 있는 방법으로 만들어보았다.

한식 메뉴 렌더링하기

완성본 보기

과제 설명
1. 주어진 데이터(menuItems)를 확인합니다.
2. 배열 메소드로 데이터를 화면에 표시합니다.
3. CSS로 간단한 스타일을 적용합니다.
4. 객체의 속성을 추가 해봅니다.(ex.가격, 카테고리 등)
5. filter()를 사용하여 설명에 '고기'가 포함된 메뉴 항목만 화면에 노출시킵니다.

주어진 객체 확인 및 속성 추가

// 주어진 데이터에 'price' 객체 속성 추가
const menuItems = [
    {
        name: '비빔밥',
        description: '밥 위에 나물, 고기, 고추장 등을 얹고 비벼 먹는 한국 요리',
        price: 7000
    },
    {
        name: '김치찌개',
        description: '김치와 돼지고기 등을 넣고 끓인 한국의 찌개 요리',
        price: 8000
    },
    {
        name: '불고기',
        description: '양념한 고기를 구워서 먹는 한국 요리',
        price: 9000
    },
    {
        name: '떡볶이',
        description: '떡과 어묵을 고추장 양념에 볶아 만든 한국의 간식',
        price: 5000
    },
    {
        name: '잡채',
        description: '당면과 여러 채소, 고기를 볶아 만든 한국 요리',
        price: 9000
    }
];

1. html 전체를 백틱으로 넣는 방법 / map() 메소드 활용

const menuList = document.querySelector('.menu_list');

menuList.innerHTML = menuItems.map(item =>

    `
    <li class="menu-item">
        <h2>${item.name}</h2>
        <span>${item.price}</span>
        <p>${item.description}</p>
    </li>
    `

).join('');

코드설명

menuList 에 ul을 담아두고 이 안에 menuItems 객체들을 하나씩 반복해서 출력하도록 만들었다.
백틱을 사용해서 html 구문 전체를 코드로 작성
item의 원하는 value 값을 선택해서 제목, 가격, 설명에 들어가도록 하였다.

2. createElement 를 사용하여 하나씩 추가하기

const menuList = document.querySelector('.menu_list');

for (let i = 0; i < menuItems.length; i++) {
    const menuInner = document.createElement('li');
    const menuTitle = menuItems[i].name;
    const menuDes = menuItems[i].description;
    const menuPrice = menuItems[i].price;

    menuList.appendChild(menuInner);
    menuInner.innerHTML =
        `
    <h2>${menuTitle}</h2>
    <span>${menuPrice}</span>
    <p>${menuDes}</p>
    `
}

코드설명

동일하게 menuList 변수를 지정하고 반복문을 통해 li를 하나씩 appendChild()로 추가할 것이다.
for 반복문으로 menuItems의 i번째의 각 객체들을 뽑아서 변수에 담았다.
2-1. 반복문이 돌면 menuInner 라는 li 요소가 하나씩 생기게 만들었다.
menuItems에 빈 li menuInner 가 추가되게 하고 innerHTML 을 사용해서 값들을 추가했다.

3. 버튼을 누르면 '고기'가 들어간 내용만 보이기 / filter() 사용

function menuFilter() {
    let menuList = document.querySelector('.menu_list');
    let meatFilter = menuItems.filter(item =>
        item.description.includes('고기')
    );

    menuList.innerHTML = meatFilter.map(item =>
        `
        <li class="menu-item">
            <h2>${item.name}</h2>
            <span>${item.price}</span>
            <p>${item.description}</p>
        </li>
        `
    ).join('')
}

버튼에 addEventListener 를 추가할까 하다가 기능이 하나밖에 없으니 onClick 이벤트가 더 깔끔할 것 같아서 이번에는 후자의 방법으로 작성했다.

html 코드 작성시 onclick이벤트로 menuFilter() 를 부여하고 코드를 작성했다.

코드설명

버튼을 클릭하면 filter() 메소드로 설명(item.description)에 '고기'라는 단어가 들어가는지를 판별하여 meatFilter 변수에 저장했다.
meatFilter 에는 설명에 '고기'가 들어간 내용만 담겨있으므로 이를 map() 하여 meatFilter 에 넣어주었다.

4. HTML, CSS 코드

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>한식 메뉴</h1>
    <button onclick="menuFilter()" class="btn">고기반찬</button>

    <div class="menu_container">
        <ul class="menu_list">

        </ul>
    </div>
    <script src="app.js"></script>
</body>

</html>

@charset 'utf-8';

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

body {
    margin-top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


.menu_list li {
    margin: 30px auto;
    padding: 20px;
    text-align: center;
    border: 1px solid #dddddd;
    line-height: 40px;
}

.menu_list li h2 {
    display: inline-block;
}

.menu_list li p {
    font-size: 14px;
    ;
}

.menu_list li span {
    font-size: 18px;
    margin-left: 20px;
    font-weight: 700;
}

.btn {
    border: none;
    outline: none;
    margin-top: 20px;
    padding: 10px;
    background: #ffd388;
    border-radius: 5px;
    cursor: pointer;
}

.btn:hover {
    background: #eec071;
}

느낀점

filter() 메소드를 사용하는 부분이 조금 헷갈려서 공부하면서 includes() 도 같이 추가 공부해보려한다.
여기서 조금 더 나아가 사진이나 한식, 양식 등의 카테고리들도 추가해서 메뉴 관련된 간단한 프로젝트를 해보고 싶다.

하영

왕쪼랩 탈출 목표자의 코딩 공부기록

이전 포스트

숫자 기억 게임

다음 포스트

한식 메뉴 렌더링 하기

etc.