Refribank Front 🏦

💡 The purpose of a project

First cooperation project

1️⃣ Idea

여러분의 냉장고는 현재 어떤 상태인가요? 가지고 있는 식재료로 어떤 요리를 할지 고민이 되거나 또는 잊혀진 식재료가 있지는 않나요?

이러한 고민을 가진 5명의 학생들이 제작한 Refri Bank는 냉장고를 의미하는 Refrigerator와 관리를 대신수행하는 Bank를 합친 단어입니다.

처음엔 단순히 냉장고에 들어있는 식재료를 사용할 수있는 레시피 추천 서비스를 구상하였으나, 추가적으로 저희가 가진 데이터를 이용하여 실시간 인기 레시피, 내가 등록한 식재료의 유통기한, 재료나 제목을 통한 레시피 검색기능, 자유게시판 등을 만들어 최대한 다양한 서비스를 제공할 수 있도록 제작하였습니다.

어서 실시간으로 인기있는 레시피, 혹은 궁금한 레시피를 검색해보세요! 만약 회원가입을 하시면 냉장고 페이지에서 식재료의 유통기한을 표시할 수있고, Refri Bank는 냉장고에 들어있는 식재료를 바탕으로 하여 추천 레시피를 제공해줍니다.

2️⃣ Technology stack

3️⃣ Trouble

🔓 Communication
🔑 모든 팀원들이 협업 경험이 단 한번도 존재하지 않아, trouble이 자주 발생하였다.
변수명 규칙을 지키지 않거나, git collision이 매우 자주 발생하였고, 프로젝트 마감 일자가 다가올 수록 서로 많이 다투기도 하였다.
다툴수는 있으나, 감정이 상해 앞으로의 작업에 영향을 주는 것은 문제가 될 수있었기에, 나는 하루의 작업이 끝나고 각자 다른 팀원들을 칭찬하는 칭찬하는 시간을 만들었고, 결과적으로 무사히 프로젝트를 마칠 수있었다.

🔓 rendering
🔑 rerendering 문제가 심각했었다. 나는 Backend를 담당해서 개발을 진행했기 때문에 나의 영역은 아니였지만, 지인들에게 도움을 구하고, React 기술을 사용하는 법만 빠르게 익혀 state를 최대한 효율적으로 배치하여 문제를 많이 개선하였다.

🔓 External libraries
🔑 modal, paging slide에 대한 외부 라이브러리를 사용하였다. paging slide에 대한 라이브러리는 custom이 매우 까다로웠고, 소스코드를 하나씩 까보며 css를 최대한 변경했다.

4️⃣ What I learned