재료를 얻기 전에 인생 이야기를 읽는 것이 지겨워서 Recipe Extractor를 만들었다

Source: Dev.to

당신도 다 아시죠.

“easy chicken tikka masala recipe”를 구글에 검색합니다. 첫 번째 결과를 클릭합니다. 그러면 저자는 자신의 할머니가 한여름에 인도 자이푸르의 향신료 시장을 방문해 인생이 바뀐 이야기를 3,000자에 걸쳐 들려줍니다.

스크롤합니다. 또 스크롤합니다. “Jump to Recipe” 버튼을 지나쳐서 또 다른 단락, 즉 주방 리모델링 이야기가 나올 때까지 스크롤합니다.

드디어 한계에 다다랐습니다.

그래서 JustTheRecipe를 만들었습니다

justtherecipe-app.fly.dev – 레시피 URL을 붙여넣으면 재료와 조리법만 제공합니다. 그게 전부입니다. 인생 이야기도, 광고도, 불필요한 요소도 없습니다.

작동 방식

• 레시피 URL을 붙여넣습니다.
• 서버가 페이지를 가져와 레시피 데이터를 추출합니다.
• 깔끔하고 읽기 쉬운 레시피 카드가 나타납니다.

추출 방법 (우선순위)

1. JSON‑LD (가장 확실한 경로)
   대부분의 레시피 사이트는 Schema.org Recipe 마크업을 사용해 구조화된 데이터를 삽입합니다. 이것이 가장 신뢰할 수 있는 소스이며, <script> 태그 안에 기계가 바로 읽을 수 있는 레시피 데이터가 들어 있습니다.

   function extractJsonLd($) {
     const scripts = $("script[type=\"application/ld+json\"]");
     for (let i = 0; i < scripts.length; i++) {
       let data = JSON.parse($(scripts[i]).html());
       if (data["@graph"]) data = data["@graph"];
       const items = Array.isArray(data) ? data : [data];
       for (const item of items) {
         if (item["@type"] === "Recipe") return normalizeRecipe(item);
       }
     }
     return null;
   }

2. Microdata fallback
   오래된 사이트 중에는 JSON‑LD 대신 itemprop 속성을 사용하는 경우가 있습니다. 이 경우도 체크합니다.

3. Heuristic extraction
   구조화된 데이터가 전혀 없을 때는 일반적인 패턴을 찾아냅니다 – 클래스 이름에 “ingredient”가 들어간 리스트, “instruction” 또는 “step”이 들어간 순서 목록 등. 완벽하지는 않지만 많은 사이트에서 동작합니다.

사용 스택

• Express – API와 정적 파일을 제공
• Cheerio – HTML을 파싱하고 레시피 데이터를 추출
• Vanilla HTML/CSS/JS – 프레임워크 없이, 빌드 단계 없이
• Fly.io – 파리(CDG 지역)에서 배포

서버 전체가 하나의 파일에, 프론트엔드 전체가 하나의 HTML 파일에 들어갑니다. 전체 의존성 수: 6개.

내가 실제로 자부심을 느끼는 기능

• 체크박스 재료 – 진행하면서 탭으로 체크해가며 확인할 수 있습니다. 요리할 때 큰 변화를 줍니다.
• 인쇄 모드 – 깔끔한 레시피 카드를 생성합니다. 이제 냉장고에 이런 카드가 가득합니다.
• 모바일 퍼스트 – 주방에서 데스크톱을 쓰는 사람은 거의 없으니까요.
• 계정·추적 없음 – URL을 붙여넣고 레시피를 받으면 끝.

사용해 보기

👉 justtherecipe-app.fly.dev

좋아하는 푸드 블로그에서 레시피 URL을 복사해 붙여넣어 보세요. 버몬트 가을 이야기가 4,000자에 달하는 서문이 있던 그 레시피도 문제없이 작동합니다.

배운 점

• Schema.org는 큰 선물입니다. 구조화된 데이터 덕분에 이런 도구가 실제로 웹을 활용할 수 있게 됩니다. 레시피 사이트를 운영한다면 JSON‑LD를 사용해 주세요.
• React가 전부는 아니다. 바닐라 JS와 하나의 HTML 파일만으로도 즉시 로드되고 필요한 모든 기능을 구현할 수 있습니다.
• 자신의 불편을 해결하라. 최고의 사이드 프로젝트는 스스로 겪는 문제를 해결할 때 탄생합니다. 저는 거의 매일 요리하는데, 이 도구가 큰 좌절을 없애줍니다.

주말에 만들었고, 지금도 매일 사용하고 있습니다. 때로는 가장 좋은 프로젝트가 가장 단순한 프로젝트입니다.