리액트로 식재료 관리 앱 만들기
6일 만에 풀스택 앱을 만들어보자
코딩 부트캠프 시니어 코스의 첫 과제는 프론트엔드부터 백엔드까지 모든 기능을 풀스택으로 혼자 구현해보는 것이었다. 나는 이번 솔로 프로젝트 과제로 What's in my fridge라는 식재료 관리 앱을 만들었다.
*글 읽기 싫으시면 다 건너뛰고 이걸 봐도 됩니다..다만 한시간 자고 만든 영상이라 저퀄주의+영어주의�
1. 왜 만들었는지?
요리랑 담을 쌓고 살아오다 영국에 와서야 비로소 살기 위해 요리를 시작한 나는 요령 있게 냉장고 속 재료들을 관리하는 데는 젬병이다. 그렇다 보니 냉장고 안에 뭘 사다 놨는지 까먹어서 장 보러 가서 똑같은 재료를 계속 사 오거나 식재료를 구석에 처박아두고 까먹어서 거의 액체가 된 야채를 뒤늦게 발굴해 다 내다버려 낭비해버리는 경우가 비일비재했다. 그래서 냉장고 식재료를 좀 더 알뜰하게 관리하는데 도움이 되는 솔루션을 만들어보고 싶었다.
2. 어떤 문제를 해결했는지?
식재료를 잘 관리하는 일의 핵심은 이미 내가 뭘 가지고 있고, 어떤 재료들이 더 필요한지를 효율적으로 파악하게 만드는 것이라고 생각했다. 그래서 냉장고 속의 재료들을 저장하는 My Fridge list와 어떤 재료들을 사 와야 하는지를 저장하는 Shopping list를 만들었다. 그리고 레시피 API를 앱에 연동해 냉장고 속의 재료들을 활용해 어떤 요리를 만들 수 있을지를 손쉽게 알 수 있도록 기능을 구성했다.
3. 주요 기능
1) 메인 페이지
어플리케이션에 접속하면 일단 냉장고에 어떤 재료들이 있는지 한눈에 파악할 수 있다면 편리할 것이라고 생각했다. 그래서 냉장고 속에 대략 어떤 아이템들이 있는지 식재료 카테고리별로 구성을 볼 수 있도록 파이차트를 배치했다. 그리고 구매한 지 오래된 식재료들의 리스트를 필터링해서 유통기한이 곧 지날 아이템들을 빠르게 소진할 수 있도록 알려주는 섹션을 만들었다.
2) 식재료 관리 기능
상단의 입력 폼을 이용해서 식재료를 쇼핑 리스트에 등록하거나, 냉장고 식재료 리스트에 등록할 수 있도록 했고, 두 개의 리스트를 연동해서 냉장고 리스트에 등록된 재료들을 다시 사야 한다면 쇼핑리스트로 옮기고, 구매를 완료했다면 다시 냉장고 리스트로 옮길 수 있도록 만들었다. 그리고 냉장고 리스트에 등록된 재료들은 식재료 종류별 재료의 리스트를 볼 수 있는 카테고리 뷰와 오래된 식재료부터 볼 수 있는 타임라인 뷰 두 가지의 레이아웃을 토글할 수 있도록 구성했다.
3) 레시피 관리 기능
냉장고 리스트에 등록된 재료들을 선택한 후 'Get Recipe' 버튼을 클릭하면 해당 재료들을 활용해 만들 수 있는 레시피를 추천해준다. 만약에 마음에 드는 레시피가 없다면 'Get more recipe'를 클릭해 다른 레시피들을 더 로딩할 수 있다. 마음에 드는 레시피들은 나중에 꺼내볼 수 있도록 My Recipe로 저장할 수 있고, 각 레시피의 이름을 클릭하면 요리에 필요한 모든 재료의 리스트와 상세한 레시피 정보를 확인할 수 있다.
4. 아쉬웠던 점
1) 와이어 프레임을 잘 만들기 : 마케터였을때도 와이어 프레이밍은 자주 해봤어서 꼼꼼히 하려면 한도 끝도 없다는 걸 알고 있기에, 굳이 와이어프레임 만들면서 시간 쓰지 말고 대강 기능만 정의한 다음에 바로 html 마크업으로 넘어가려고 했었다. 근데 머릿속에 아이디어가 있었어도 막상 코드를 짜다보면 빠트린 기능이 생기고 프론트엔드단의 로직이 명확하지 않은 채 데이터 스키마를 정의하다 보니 몇 번이고 백엔드 로직을 뒤집어엎어야 하는 일이 생겼다. 무엇보다도 기능을 더 작은 컴포넌트 단위로 잘 쪼갰으면 코드의 중복을 줄이고 전체적인 앱의 구조를 더 깔끔하게 만들 수 있었는데, 한참이나 코드를 짜다가 결국 나중에야 이 사실을 깨닫고 한나절 동안은 꼬박 리팩토링에 시간을 써야 했다. 그래서 결론은 마음이 급하다고 바로 코딩부터 시작하지 말고 일단 내가 산출할 결과물을 명확히 정의하는 것부터 시작하는 게 결국 시간을 아끼는 길이라는 것...
2) 기술 스택을 잘 선택하기 : 6일 만에 모든 걸 다 해야 한다는 압박감에 일단 할 줄 아는 걸 이용해서 뭐라도 만들자는 심정으로 프론트엔드는 리액트로, 백엔드는 몽고 db로 구성했는데 결국 프로젝트 진행하면서 조금 후회했다. 식재료 유통기한 알림 기능이라던가, 스와이프해서 리스트 지우기 등 내가 구현하고 싶었던 요소들은 사실 모바일에 최적화하는 게 더 적합한 기능이었다. 차라리 반나절 정도는 시간을 투자해서라도 리액트 네이티브를 공부한 다음에 리액트 네이티브 기반으로 앱을 구현했다면 조금 더 예쁘고 사용하기 편리하게 잘 구현할 수 있었을 것 같다. 그리고 프론트엔드에서 레시피 api로 fetch request 보낼 때는 GraphQL을 이용해보려고 했는데 레시피 api가 자꾸 Apollo 서버 통한 접근을 거부해서 결국은 한나절 내내 짰던 GraphQL 코드는 다 갈아엎고 결국 일반적인 rest api 방법으로 데이터를 받아와야 했다. 사실 GraphQL은 굳이 쓸 필요는 없었지만 한번 써보자 싶은 마음으로 시도해봤었던 거였는데, 굳이 꼭 필요한 게 아니라면 그냥 보통의 방법이 최선의 방법일 수도 있다는 교훈을 얻었다^_ㅜ
3) 코어 기능에 집중하기 : 처음에 프로젝트를 구상했을 때는 열정이 넘쳐서 만들고 싶은 기능이 너무 많았다. 식재료를 찍으면 바로 그걸 인공지능 api가 인식해서 리스트로 만들어준다던가, 유저가 텍스트를 입력하면 추천 키워드를 띄워준다던가 기타 등등 잡다한 기능도 어떻게든 끼워 넣어 보려고 이것저것 손대 보다가 초반에 시간을 좀 낭비했었다. 결국 만들기 쉬워 보이는 기능은 있어도 만들기 쉬운 기능은 없다는 걸 깨닫고 그냥 코어 기능을 완성하는데만 집중했는데도 시간이 너무 모자랐다.(마감날에는 한시간밖에 못잠ㅠㅠ) 나 같은 오류를 겪고 싶지 않다면 내 앱의 MVP 기능을 정의하고 그걸 완성할 타임라인을 설정해두고, 그 타임라인 안에 모든 코어 기능을 완성했을 때 추가할 기능들을 별도로 정의해두기를 추천한다.
프로젝트를 끝내고 나서 튜터가 프로젝트 리뷰를 하고 코멘트를 달아주었다. 좋은 리뷰 받아서 뿌듯함:)솔로 프로젝트를 끝내고 난 다음에 베를린, 바르셀로나 캠퍼스의 학생들과도 가장 잘 완성된 프로젝트들을 공유하는 프레젠테이션 세션을 진행했었는데, 다른 학생들 프로젝트들의 퀄리티를 보고 좀 의기소침했었다.(도대체 이미 그런 거 할 줄 알면 다들 왜 부트캠프 하는거죠..?ㅠㅠ) 근데 코드웍스에 지원할 때만 해도 백엔드도 없는 싱글 페이지 주소록 하나 만드는게 일주일 걸렸는데, 이젠 일주일 만에 혼자서 백엔드부터 프론트엔드까지 다 다룰 줄 알게 되었다는 걸 생각하니 그동안 잘 체감하진 못했지만 어느새 코딩 실력이 많이 늘었다는 게 좀 실감 난다. 사실 이 프로젝트 실제로 디플로이 하려면 리팩토링 해야 할게 산더미지만 그건 부트캠프 끝나고 손대보는걸로...ㅋㅋ 일단 솔로 프로젝트 잘 마무리했으니 남은 그룹 프로젝트도 열심히 참여해서 좋은 포폴 남기고 졸업해야징!ㅋㅋ
*상세한 프로젝트 코드는 이쪽으로 와서 봐주세요
