과제 요구사항
필수
주어진 데이터를 확인합니다.
배열 메서드로 데이터를 화면에 표시합니다.
선택사항
CSS로 간단한 스타일을 적용합니다.
객체의 속성을 추가 해봅니다.(e.g. 가격, 카테고리 등)
filter를 사용하여 설명에 “고기”가 포함된 메뉴 항목만 화면에 노출시킵니다.
충족된 요구사항
필수
주어진 데이터를 확인합니다.
배열 메서드로 데이터를 화면에 표시합니다.
선택사항
CSS로 간단한 스타일을 적용합니다.
특이사항
filter를 사용하지 않았지만,
설명에 “고기”가 포함된 메뉴 항목만 화면에 노출시킬 수 있는 토글 버튼이 있다.
이 버튼은 클래스 추가와 삭제를 이용하여 구현하였다.
구현
소스코드
깃허브 링크 : https://github.com/heftyCornerstone/Korean-menu-board
소스코드 뜯어보기
크게 세 부분으로 나누어 볼 수 있습니다.
- 메뉴판 생성과 이벤트 리스너 할당
- 메뉴판 구현 함수
- 토글 버튼 구현 함수
메뉴판 생성과 이벤트 리스너 할당
//메뉴판 생성과 이벤트 리스너 할당 window.onload = ()=>{ loadMenuBoard(menuItems); menuFilter.addEventListener('click', showVeggieToggle) }
요구사항에 따르자면 메뉴판 내부는 동적으로 생성됩니다.
또, 저는 토글 버튼(이벤트 리스너 할당 필요)을 만들 계획이 있었습니다.
그렇다면 JavaScript 코드는 DOM이 로드된 후에 작동해야 합니다.
window.onload() 메서드를 이용하여 JS파일 적용 시점을 조절했습니다.
메뉴판 구현 함수
<ol>태그 안에 메뉴의 이름과 상세한 정보가 담긴 <li>블록을 넣었습니다.
나중에 만들 토글 버튼을 위해서 채식 메뉴 여부를 <li>블록에 표시하기로 하였습니다.
(만일 메뉴 상세 정보에 고기가 포함되지 않았다면 <li>블록에 veggie 클래스를 할당함)
토글 버튼 구현 함수
버튼에 클릭 상태를 반영하기 위해 클래스를 사용하였습니다.
버튼의 클래스가 vegetarian일 때 클릭하면 no-options로 전환되고,
no-options일 때 클릭한다면 vegetarian로 전환됩니다.
이로서 마치 스위치처럼 두가지 모듈을 오갈 수 있습니다.
버튼 모듈이 채식 메뉴 보기일 때에는 비채식 메뉴 <li>블록의 스타일에
display:none;을 적용하고, 모두 보기일 때에는 모든 <li>블록의 스타일에 display:block;을 적용하였습니다.
소소한 트러블슈팅
각 <li>블록의 채식 메뉴 여부를 검사하고, veggie 클래스를 할당하는 작업을 하기 위해
const menuList = document.getElementsByClassName()으로 <li>블록을 불러와
forEach() 메소드를 사용하려다 에러를 맞닥트렸습니다.
Uncaught TypeError : menuListItems.forEach() is not a function
로직에는 잘못된 부분이 없었으므로 직관적으로 menuListItems의 타입부터 체크하였습니다.
어레이일 줄 알았는데 오브젝트였다.
getElementsByClassName() 메소드의 리턴 타입은 Object인 모양이었습니다.
forEach() 메소드는 Array의 메소드이므로 Object 인스턴스가 사용할 수 없습니다.
저런
하지만 큰 문제는 아닙니다.
리턴값의 타입이 Array인 Object의 메소드가 하나 있기 때문입니다.
오브젝트의 key와 value 중에서 value만을 모아 Array로 리턴해주는 메소드입니다
결국 에러를 해결하였습니다.
번외1 : SEO문제
이 과제 속 메뉴판은 JS가 열심히 생성하였습니다.
만약 메뉴 데이터만 바꾼다면,
번거롭게 HTML코드를 일일이 입력할 필요 없이 메뉴판의 내용이 자동으로 바뀔테고,
그렇다면 유저 또한 행복하게 빠르게 업데이트되는 메뉴판을 즐길(?) 수 있습니다.
관리하는 프로그래머, 유저, 모두가 행복합니다.
과연 그럴까요...?
화면에 표시되는 메뉴 엘레먼트는 정상적이다. 그런데,
소스에는 메뉴가 없다. 텅 비었다!
그렇습니다. 무언가 이상한 일이 일어나고 있습니다.
그리고 누군가는 행복하지 않습니다.
행복하지 않은 누군가는 다름 아닌 검색 엔진입니다.
우리는 검색 엔진을 매일 사용합니다.
검색창에 원하는 내용을 넣으면 편리하게도 웹 상에서 원하는 데이터를 가져올 수 있습니다.
어떻게 이런 일이 가능할까요? 바로 검색 엔진 덕분입니다.
검색 엔진이 웹 페이지의 소스를 분석하여,
검색창에 우리가 넣은 데이터와 어울리는 검색 결과를 가져다주기 때문입니다.
따라서... 소스가 텅 비어 있다면 검색 엔진이 웹 페이지에 어떤 정보가 담겨있는지
제대로 알아볼 수가 없습니다.
그렇다면 프로그래머와 유저가 조금 불행해질 수 밖에 없습니다.
텅 빈 웹 페이지(검색 엔진이 보기에)는 검색 결과에 노출되지 않을테고,
따라서 웹 페이지에 방문하는 사람이 없을테고,
웹 사이트 서비스 역시 사업이므로
사람이 유입되지 않는다면 곧 시장 경제의 논리에 따라 사라지겠죠.
검색 엔진에 잘 노출되도록 신경 쓰는 것.
그것을 SEO라고 합니다.
하지만 과제는 과제일 뿐,
복잡한 생각을 멈추고, 끝난 것들을 이만 놓아주어야 할 시간이 되었습니다.
더 멀리 간다면 오늘의 공부 주제를 한참 벗어나게 될 것입니다.
하지만 한가지는 잊지 말아야 합니다.
동적으로 생성한 웹 페이지는 SEO를 주의하여야 합니다.
번외2 : 자바스크립트 구조 눈치보기
이 포스팅을 읽는 여러분들 중에는 조금 전 에러를 해결할 때 사용했던
Object.values()메소드를 처음 알게 된 분도 계실 것입니다.
이미 알고 계시는 분들은... 잠시만 모르고 있었다고 가정해 주시겠습니까?
기술 문서를 일일이 검색하거나, 읽지 않아도 자바스크립트의 구조를
대강 머릿속에 그릴 수 있는 팁을 이야기해보고 싶습니다!
자, 우리는 이제부터 Object.values()를 처음 알게 된 사람들입니다.
'그렇구나, Object 인스턴스에 value만 모아서 리턴받을 수 있는 메소드가 있구나'
라고 생각하며 고개를 끄덕이고 있습니다.
이때 머릿속에 한가지를 더 떠올릴 수 있다면
나중에 기술문서 검색에 드는 시간을 줄일 수 있습니다.
const obj = {key:'value', key2:'value,value' ...}; console.log(Object.values(obj)); /// output: ['value', 'value,value' ...]
Object.values()는 Object를 다루기 위한 메소드입니다.
value를 모아서 리턴합니다.
자연스럽게 무엇을 연상하여야 할까요?
힌트는 Object라는 자료형의 특징입니다.
답을 10초 정도 생각해봅시다...
눈치를 챙겨봅시다
3
2
1
.
.
.
value가 있으려면 key가 있어야겠죠
답은 key입니다!
이처럼 자료형을 염두에 두고 코드를 바라본다면
더 효율적으로(어찌 보면 좀 더 본질적으로) JS를 이해할 수 있습니다.
공부에 도움이 되는 습관이라고 생각해요.
작은 팁이 당신에게 언젠가 도움이 되기를 바랍니다.
