[스파르타 코딩클럽]나만의 웹서비스 만들기 "마이 레시픽" 6주차 - '마이레시픽' 그려보기

문세미·2020년 2월 18일
3
post-thumbnail

'마이레시픽'으로 이름을 정한 이유

특성화고등학교에서 호텔조리를 전공한 나는 항상 요리에 관심이 많았다.
내가 생각하는 요리는 누구나 할 수 있는 것이다.
가장 필요한 소양은 요리에 대한 관심과 흥미, 레시피를 잘 찾아서 읽을 수 있으면 된다.
여기서 '마이 레시픽'이 도움을 줄 수 있는 건 레시피를 잘 찾아서 알려주는 것이다.
내가 선택하는 레시피 my + recipe + pick을 간단히 줄여서 my recipick = 마이 레시픽이라고 웹서비스 네임을 정했다.

'마이레시픽' 구상하기

내 머릿속에 있는 레시피로 요리를 하기도 하지만 이건 전공자들이나 평소에 요리를 즐겨 하는 사람들에게 해당되는 방법이다.
보통은 검색사이트에 레시피명을 검색해서 나온 레시피를 따라 해본다.
예전에는 다양한 파워블로거, 요리매니아들의 황금레시피가 인기였었다. 덕분에 '네이버'에서 쉽게 레시피들을 검색해서 그대로 따라할 수 있었다.
요즘에는 요리, 음식 관련 티비프로그램이 굉장히 많아졌다. 그 배경에는 유튜브가 큰 영향을 준 것 같다. '유튜브'에는 '먹방'이라는 신조어가 생길 정도로 맛있게, 많이 먹는 이들의 영상이 생겨났고, 그것을 보며 대리만족을 느끼는 사람이 꽤 많아질 정도로 인기를 끌게 되었다. 아무리 바쁜 현대인들이라 할 지라도 퇴근 후, 주말에는 맛있는 조합의 음식들과 레시피들로 행복감을 느끼는 사람들이 많아졌다. 이른바 소.확.행(소소하지만 확실히 행복한 상태)을 즐기는 사람들 말이다.

이제는 '네이버'에 '제육볶음'이라고 검색만 해도 가장 많이 나오는 레시피의 주인공은 '백종원', '김수미'님이다.
tvn의 '집밥 백선생', '수미네 반찬'이라는 프로그램으로 인기를 많이 끌었다. 다년간의 경험에서 나오는 바이브들로 시청자들을 만족시켰고, 내가 생각했던 요리의 정의를 그대로 보여줬다. (요리는 누구나 할 수 있는 것) 막상 해보면 요리는 그렇게 어렵지 않고 재밌는 것이라는 걸 알려주었다.

네이버 블로그에는 이미 두 분의 공식레시피를 변형한 본인들만의 레시피들이 존재한다. '백종원'님의 레시피를 조금이라도 변경했어도 여전히 '백종원 레시피'라고 부르기에 뭐가 오리지널이고 변형된 건지 알 수가 없어 혼란스럽다. 그래서 누군가는 공식레시피를 알고 싶어 찾는 수고가 발생한다고 생각했다.

그래서 '마이 레시픽'에선 많은 인기로 '맛'과 '따라하기'를 충족시킨 '백종원', '김수미'님의 레시피의 공식레시피와 따라하기 레시피들을 카테고리화하여 보여주기로 했다.
1. '제육볶음' 키워드를 누르면 백종원, 김수미님의 레시피를 분류하여 보여주고
2. 그 안에서 official레시피와 그 레시피를 따라한 레시피들을 함께 보여준다. official레시피를 볼 사람은 그 레시피를 보고, 제목을 보고 본인이 원하는 다른 레시피들을 선택할 수도 있다.

'마이 레시픽' 을 구현 할 백엔드 기능

1. 셀레니움 크롤링
그냥 크롤링을 할 수도 있지만, 네이버에 '백종원 레시피', '김수미 레시피'들만 크롤링 해야하기에 셀레니움의 'send_keys'기능을 이용해야 했다.
현재 '집밥 백선생' 공식블로그에서 '백종원'님의 official 레시피들과, 네이버에 나오는 '백종원'님의 따라하기 레시피들을 셀레니움으로 크롤링 하여 mongo DB 저장해 놓았다.

  • 수정보완 : 네이버 검색 시 나오는 블로그들을 크롤링 했더니 썸네일이미지가 너무 작아 이미지가 깨져 예쁘게 보이지 않는 문제가 발생했다. 네이버 '포스트'에 해당 키워드를 입력한 후 나온 결과값들을 크롤링 해서 썸네일깨짐 현상을 해결했다.

2. DB 구축하기
내가 mongo DB에 저장해 놓은 데이터들을 구축하고 활용하는 작업이 필요하다.
현재 이 부분에서 가장 많은 심혈을 기울이고 고민 중이다.
더 많이 구글링하고, 코드로 연습하면서 이 부분을 계속 해봐야 할 것 같고, 튜터님께 질의하며 보완해 나가야겠다.

  • 수정보완 : 'DB 구축' 이 개념이 잘 잡혀 있지 않아서 크롤링을 하고도 이 데이터들을 어떻게 활용해야할까 고민을 많이 했다. 우선 크롤링 한 데이터들을 클렌징하고!(데이터클렌징 : 데이터들을 용도에 맞게, 보기 좋게 잘 정리한다는 뜻)
    api를 만들어 데이터를 서버에서 이용한다. api를 백엔드단에서 만들고 프론트단에서 화면에 구현한다.

구체적으로
1. 모든 레시피를 db에서 끌어와 프론트에 찍어보기. (첫 화면 - test)
2. 데이터 크롤링 한 것 중 레시피명으로 프론트 화면에 찍어보기 (공식레시피 / 따라하기레시피)
나 : 백종원
원행님 : 김수미
3. title 무작위로 찍히게 하기 (왼쪽 라인에 들어갈 내용) - 링크 이동

나머지 주차에 해결되어야 할 일
1. 레시피 저장(나홀로 메모장 참고) - 오른쪽 부분에 추가?
2. 로그인 부분 (네아로, 카카오톡 로그인..?) 추가? 대체할 것 검색 및 조사

  • 수정보완 : 크롤링한 데이터로 api만들기
  1. get방식 - 모든 레시피 뿌리기(보여주기)
  2. get방식 - 레시피 검색 - 사용자가 입력하는 값에 해당하는 데이터를 뿌려준다.
  3. post방식 - 레시피 저장 - 사용자가 해당 레시피의 url을 복사하여 이메일과 함께 입력한 후 레시피 저장을 한다. (중복저장 방지)
  4. get방식 - 내가 저장한 레시피 검색 - 사용자의 이메일값으로 해당하는 레시피 데이터 뿌리기

3. 프론트에 구현하기
현재 존재하고 있는 다른 레시피 관련 사이트, 앱들을 밴치마킹 하고 있다. 프론트 작업은 백엔드 작업 후 진행 할 예정이다.

  • 수정보완 : Recipe Keeper
    원페이지에 간결한 페이지구성이 내가 구현하고자 하는 프론트단과 유사하여 벤치마킹하였다.
profile
백엔드와 프론트엔드를 사랑하는 현 마크업개발자(퍼블리셔)입니다 :) 자바스크립트, React, Python을 공부하고 있습니다.

1개의 댓글

comment-user-thumbnail
2020년 6월 7일

안녕하세요! 스파르타 8기 학생입니다. 선배님의 작품영상을 봤는데 정말 구현을 잘하셔서 관심있게봤는데
이렇게 세세한 계획이있어서 만드신거군요!! 이제 저희 8기도 작품을 만들어야되는시기인데 많은 도움이되었습니다.
감사합니다 :-)

그리고 소개페이지를 보니까 현재 개발자이신거같은데
스파르타 졸업 이후에 백엔드 개발자가 되신건가요??

답글 달기