CodePen 챌린지: 무료 피벗 그리드 라이브러리로 맥도날드 메뉴 시각화

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

초보 개발자 및 데이터 시각화에 관심 있는 사람들 (중간 난이도)

핵심 요약

• WebDataRocks 라이브러리를 사용하여 메뉴 카테고리 필터링 및 피벗 테이블 레이아웃 커스터마이징 가능
• CSS 스타일링과 테마 적용으로 시각적 매력도 향상
• JavaScript로 데이터 처리 최적화 및 사용자 친화적 인터페이스 구현

섹션별 세부 요약

1. JS 코드 설정

• uniqueName: "Category"와 filter.members를 사용해 Breakfast, Beef & Pork, Chicken & Fish 3개 카테고리만 필터링
• classic layout 선택으로 Excel 스타일의 계층 구조 표시 (기본값은 compact layout)
• filter.members를 통해 데이터 로딩 전 필터링으로 성능 향상

2. CSS 스타일링

• @import url("https://fonts.googleapis.com/css2?family=Quicksand&display=swap")로 "Quicksand" 폰트 적용
• background-image에 🍔 이모지 SVG 사용, #ffd700 배경색과 64px 간격 반복으로 시각적 효과 강화
• WebDataRocks 내장 테마인 오렌지 테마를 태그로 쉽게 적용 가능

3. 결과물 및 피드백

• CodePen 링크 제공으로 에너지/영양 성분 분석 가능한 인터랙티브 피벗 테이블 확인 가능
• 사용자 피드백을 통해 UI/UX 개선 및 기능 추가 제안 요청

결론

• WebDataRocks는 초보자도 쉽게 사용 가능한 피벗 그리드 라이브러리로, 데이터 필터링과 레이아웃 커스터마이징이 핵심
• CSS 스타일링과 내장 테마 활용으로 직관적 시각화 가능
• CodePen 챌린지를 통해 실무 프로젝트 경험과 기술 습득에 유용한 기회