Recipe-Finder.org 구축: Vue, Express, MongoDB, 그리고 Vuetify와 함께하는 풀스택 여정 🍳
Source: Dev.to
Overview
안녕하세요, DEV 커뮤니티! 👋
오늘은 제가 최근에 출시한 프로젝트 Recipe-Finder.org 를 소개하고자 합니다. 많은 개발자들처럼 저도 냉장고 앞에 서서 남은 재료로 뭘 만들까 고민할 때가 많습니다. 빠르고 깔끔하며 직관적인 레시피 검색 방법이 필요해서 직접 솔루션을 만들게 되었어요. 이번 프로젝트는 수정된 MEVN 스택을 활용해 풀스택 개발을 깊이 탐구할 수 있는 좋은 기회였습니다.
🛠️ The Tech Stack
- Frontend: Vue.js – 배우기 쉬운 진입 장벽과 반응형 컴포넌트 덕분에 동적인 검색 인터페이스를 손쉽게 구축할 수 있었습니다.
- UI Framework: Vuetify – 커스텀 CSS 없이도 깔끔한 Material Design 컴포넌트(카드, 네비게이션 드로어, 반응형 그리드)를 제공해 줍니다.
- Backend: Express.js (Node.js) – 가벼운 API 라우팅을 통해 Vue 프론트엔드의 검색 요청을 처리하고 데이터베이스와 통신합니다.
- Database: MongoDB – 레시피에 적합한 배열 형태의 재료와 단계 등을 문서 형태로 저장할 수 있어, 관계형 테이블 없이도 유연하게 데이터를 관리할 수 있습니다.
🏗️ Architecture & How It Works
- The Client: Vue 앱은 상태(Pinia 사용)와 사용자 인터랙션을 관리합니다. 사용자가 재료나 레시피 이름을 입력하면 Vue가 Axios 요청을 트리거합니다.
- The API: Express 서버가 요청을 받아 입력을 검증하고 쿼리를 구성합니다.
- The Data: 서버가 MongoDB를 조회해 일치하는 레시피 문서를 가져와 JSON 형태로 반환합니다.
- The Render: Vue가 JSON을 소비해 Vuetify 컴포넌트를 업데이트하고 결과를 표시합니다.
🚧 Biggest Challenges & Lessons Learned
1. Managing Complex Search Queries
Challenge: 사용자는 정확하고 정제된 재료명을 입력하지 않는 경우가 많습니다. 엄격한 배열 매칭(재료)과 퍼지 텍스트 매칭(레시피 제목)을 동시에 처리하면서 성능을 유지하는 검색을 구현하는 것이 어려웠습니다.
Solution: MongoDB의 텍스트 검색 인덱스와 $text 연산자를 활용했습니다. 세밀한 재료 매칭을 위해 Express에서 집계 파이프라인을 구축해 사용자가 입력한 재료와 일치하는 개수에 따라 점수를 매기고 결과를 정렬했습니다.
2. Responsive UI with Vuetify
Challenge: 레시피 카드의 이미지 비율과 제목 길이가 달라 그리드 레이아웃이 모바일 화면에서 깨지는 문제가 있었습니다.
Solution: Vuetify의 v-img aspect‑ratio 속성을 이용해 이미지 크기를 통일하고, CSS line-clamp 속성으로 텍스트를 잘라냈습니다. 또한 Vuetify의 반응형 그리드 시스템(cols="12" sm="6" md="4")을 충분히 활용해 다양한 뷰포트에서 우아하게 표시되도록 했습니다.
🚀 What’s Next?
- User Accounts: 사용자가 자신만의 레시피를 저장하고 즐겨찾기할 수 있도록 계정 기능을 추가합니다.
- Meal Planning: 주간 식단을 미리 계획할 수 있는 캘린더 기능을 도입합니다.
- Smart Shopping Lists: 선택한 레시피에서 부족한 재료를 자동으로 추출해 인터랙티브 체크리스트로 제공하는 스마트 쇼핑 리스트를 구현합니다.
여러분의 의견을 듣고 싶어요! 프로젝트를 만드는 과정은 정말 즐거웠고, 웹에 직접 배포된 모습을 보는 것이 큰 보람이었습니다. 꼭 사용해 보시길 바랍니다.
👉 Check it out here: Recipe-Finder.org
UI, 검색 기능, 혹은 코드 구조에 대한 피드백이 있다면 아래 댓글에 남겨 주세요. 즐거운 코딩 되세요! 👨💻👩💻