08 / 08
칼로리 사전
이름만 치면 칼로리와 탄단지가 바로, 332가지 음식 사전.
Web App · Vanilla JS08 / 08
칼로리 사전
이름만 치면 칼로리와 탄단지가 바로, 332가지 음식 사전.
식품 이름을 입력하면 100g 기준 칼로리와 탄수화물·단백질·지방을 즉시 보여 주는 식단 사전입니다. 332가지 음식을 17개 분류로 나눠 담았습니다.
초성만 쳐도 찾습니다. ‘ㄷㅂ’으로 ‘된장찌개’를, ‘찌게’처럼 자주 틀리는 표기도 보정합니다. 오늘 먹은 양을 제공량 단위로 환산해 기록할 수 있습니다.
주요 기능
Features- 01332개 음식 · 17개 분류
- 02초성(ㄷㅂ)·자모·부분 일치·띄어쓰기 무시 검색
- 03동의어·오타 보정 14종 (찌게→찌개, 달걀→계란)
- 04제공량 선택 시 자동 환산, 탄단지 열량 비율 바
- 05알코올·식이섬유 음식의 열량 차이 안내
- 06오늘 기록(날짜가 바뀌면 자동 리셋), 내 음식 추가
기술 노트
Engineering- 01
빌드 도구 없이 index.html 한 파일로 구현해, 어디서든 열고 고칠 수 있게 했습니다.
- 02
한글 유니코드 분해(0xAC00)로 초성·자모 검색을 라이브러리 없이 직접 구현했습니다.
- 03
서버 없이 localStorage에 저장하고 Firebase Hosting으로 배포했습니다.
사용 기술
Stack- HTML
- CSS
- JavaScript
- localStorage
- Firebase Hosting