[식단관리 프로젝트] 0. 소개

 

사이트 주소 : https://www.buchu-meal.com/

AWS 프리티어 기간이 만료되어 배포 서버를 닫습니다 ㅜㅅㅜ

식단관리

 

github 주소 : https://github.com/BuchuKim/buchu_diet

GitHub - BuchuKim/buchu_diet: 김부추의 식단관리 사이트입니다.

 

 

첫 사이드 프로젝트의.. 1차 대단원이 막을 내렸다. 사실 버그도 약간 남아있고 추가하고 싶은 기능도 엄청 많지만 일단 2주간의 개고생 (사실 프로젝트 자체를 만들어내는데엔 일주일 정도 걸렸는데 AWS 배포하는거 알아보느라 시간이 다갔다..)을 기억 휘발 전에 빨리 기록하기 위해 블로그에 글을 열었다!

 

사용한 기술 스택은 노드의 express + mongoDB + 프론트를 위한 bootstrap 정도이다. (사실 npm install이 다했다)

로그인 구현을 위해 passport를, ODM으로 mongoose를, 그리고 웹 배포를 위해 AWS의 EC2 및 Route53을 사용했다. https 인증도 받았고, code deploy를 통해 배포 자동화까지 완료했다. 무려 12달러짜리(만칠천원 부들부들) .com 도메인을 구입한 것 말고는 다 무료 커뮤니티 에디션이고(mongo atlas포함) 트래픽에 관한 설정은 하나도 안한 피사의 사탑같은 서버지만^^.. 내 인생 처음으로 완료한 사이드 프로젝트임에 의의를 두고 어떻게 프로젝트를 발전시켰는지 하나하나 기록하도록 하겠다.

 

 

 

 

 

!간단한 사이트 이용 방법!

사이트를 들어가면 처음 보이는 화면이다.(야매 캡처라 스크린샷 워드 이해 바람..) 당연히 당신은 회원이 아니므로 회원가입 링크를 클릭한다.

 

 

입력하라는 것을 착실히 잘 입력한다. user input에 관해서 프론트에서 확실히 validation을 해야하는데 지금은 그냥... 빈칸 확인만 된다. schema validation 툴로 joi를 사용했는데, 만약 validation에 실패할 경우 일단 에러창으로 이동하게된다. 한번 생년월일을 이상한 숫자로 써보도록 하겠다. 

^^.. 정리가 끝나면 input 관련해서 안내 설정 해주는 작업을 최우선으로 진행하겠다! 하루-이틀 정도 걸릴듯.

아무튼 잘 입력한다. 닉네임을 일단 '데모'로 하고 가입했다.

회원가입이 정상적으로 되면 자동으로 로그인이 된다. 그러면 오늘 내 식단을 확인할 수 있는 main페이지가 뜬다.

오늘 날짜의 식단이다. 아직 아무것도 먹지 않았으므로 먹은 영양소는 하나도 없다. 간식으로.. 연어 200g을 먹으려고 한다 해보자. 그러기 위해 간식 카드의 [+]버튼을 누른다.

음식 사전 탭으로 이동되었다! 간식 탭에 연어를 추가하기 위해 음식 이름으로 연어를 검색할 것이다. 사실 목록에 이미 연어가 보이지만.. 다른 엄청나게 많은 음식들에 휩쓸려내려가 연어가 안보인다고 가정하고 검색란에 '연어'를 입력하고 검색해보았다.



연어와 훈제연어가 떴다! 내가 추가하고 싶은 음식은 연어 200g이므로 연어를 클릭한다.

그럼 이렇게 '연어'라는 음식의 기본 탄단지 정보와 설명이 뜬다. 근데 서빙 사이즈가 100g이다. 배고픈 나는 200g을 먹을 것이므로 서빙 사이즈를 200으로 입력하고 '변경'버튼을 누른다.

칼로리와 탄단지가 잘 바뀌었다. 이제 '식단 추가'버튼을 눌러 간식 탭에 오늘의 식단을 추가해보겠다.

식단 추가를 클릭한 뒤 모습이다. 간식 탭에 내가 먹은 음식과 영양소가 추가된 것을 확인할 수 있다. 같은 방법으로 임의의 음식들로 아침, 점심, 저녁식사를 추가해봤다.

 

각 끼니의 영양소, 그리고 오늘 먹은 전체 영양소들이 잘 반영된 것을 볼 수 있다. 각 식사 탭의 음식 목록을 클릭하면 먹은 메뉴의 상세 영양 정보를 확인할 수 있고, 양을 수정할 수도 있고 삭제할 수도 있다.

 

이번엔 navbar에 있는 내 정보에 들어가본다.

회원가입 시에 입력했던 내 정보와, 내 정보를 토대로 계산된 기초대사량, 하루 권장 영양소를 확인할 수 있다. 사실 그냥 탄단지 3:4:3으로 두고 계산했는데.. 단백질을 저렇게 많이 먹긴 힘들지 않을까? 아무튼 회원 정보 수정을 누르면 내 성별, 키, 몸무게, 나이, 활동 강도 등을 변경할 수 있는 폼이 나오게 된다.

 

이번엔 '지난 식단'을 눌러 지난 식단을 검색해보자.

사실 데모는 오늘 처음 시작한 놈이므로 과거 식단이 없다. 그러나 과거 식단이 있고 그 날짜로 검색하면 그 날짜의 아침~간식 식단 카드가 뜨게된다.

그 날짜에 식단이 없으면 '표시할 검색 결과가 없습니다!'문구가 뜬다.

시험삼아 오늘 날짜를 넣어봤다.

잘 나오는 것을 확인할 수 있다.

 

 

 

 

한번 기능을 확 돌아보니 ... 수정할게 너무 많이 보여서 어지럽다. 아무튼 이런 기능을 하는 프로젝트를 만들어보았다!