한식 메뉴 렌더링 4일차(完)

이 페이지를 작성하기 시작한지 4일이 지났다. 오늘은 저번 시간에 목표로 삼았던 식사/간식 메뉴표를 분리하는 것을 성공했다. display="none"/"flex"를 통해 성공했고, 이것을 성공했으므로 검색 기능 또한 추가하려고 노력했다. 아래는 오늘의 성과들이다. 

빨간색 식사 버튼을 누르면 나오는 식사차림표

 

빨간색 간식 버튼을 누르면 나오는 간식 차림표

검색어를 입력하고 회색 검색 버튼을 누르면 하단에 검색 결과가 출력되는 검색 기능 구현

 

 

식사 버튼을 누르면 식사 차림표 표시, 간식 버튼을 누르면 간식 차림표 표시, 검색창에 검색어를 입력하면 해당되는 이름을 가진 검색 결과가 표시되는 검색 기능까지 구현을 해내었다. 전자의 2가지는 저번에 사용하기로 결심한 display="none"을 통해서 쉽게 구성하고, 나머지는 화면 구조만 신경쓰면 되었다. 

 

정말 문제였던 것은 검색 기능이었는데, 처음 쓰는 filter 기능을 이해하는 데에도 시간을 소비했을뿐더러 <input>태그와 <div> 태그, 그리고 태그 타입에 대한 이해가 부족해서 시간을 버리고 말았다. 내가 처음에 검색 결과창 구성에 사용한 input 태그에는 반복문으로 append하는 수법은 통하지 않는 것을 몰랐기 때문에, 오류가 뜨지 않는 콘솔창을 붙들고 무엇이 문제인지 한참을 고민했다. 그리하여 어찌저찌 검색 기능을 구현하고 출력하는 것까지 성공하게 되었다. 아래는 검색 기능을 구현한 코드이다. 

 

$('#searchbtn').click(function () {

        $("#outputbox").empty();

        let searchresultm = mainItems.filter((d) => {

            return d.name == $('#inputbox').val();

        });

        let searchresultd = dessertItems.filter((d) => {

            return d.name == $('#inputbox').val();

        });

        searchresultm.forEach((item) => {

            let name = item.name;

            let description = item.description;

            let temp_html = `

            <h2>${name}</h2>

            <p>${description}</p>`

            $("#outputbox").append(temp_html);

        })

        searchresultd.forEach((item) => {

            let name = item.name;

            let description = item.description;

            let temp_html = `

            <h2>${name}</h2>

            <p>${description}</p>`

            $("#outputbox").append(temp_html);

        })

    });

 

전에도 <script>태그의 위치로 한 번 고생을 했는데, 프론트엔드를 배우려면 태그의 기능에 대해서도 많이 배워야겠다는 것을 이참에 깨닫게 되었다. 그래도 이번에 이렇게 고생을 했으니, 다음에는 더 잘 할 수 있으리라 생각한다.