프로젝트 Food-Reco 회고

아이디어를 낼 때 제일 중요하게 생각했던 것은 참신함과 충분히 기간 내에 만들 수 있는 볼륨이었다.

stack-overflow를 클론코딩하면서 팀원 간의 합을 맞추고 시간을 조절하는 법을 배울 수 있었다. 그리고 메인 프로젝트를 시작할 때는 서로 소통을 많이 하고자 노력하였다. 메인 프로젝트 시작과 동시에 개강을 하여 나는 두배로 바빠졌다. 하지만 둘 다 포기하려고 하지 않았고 결국 메인 프로젝트를 잘 끝낼 수 있었다.

 

일단 프론트엔드 팀원 2명, 백엔드 팀원 2명으로 진행된 프로젝트였다. 교내 동아리에서도 프로젝트를 진행하였는데 그때는 혼자 프론트엔드를 맡아서 하였기 때문에 이번 프로젝트에서는 어떻게 파트를 나누어야 할지 고민이 많았다.

 

디자이너가 없었기 때문에 초반에는 대략적인 디자인작업을 팀원 4명이 같이 하였고,  테이블 명세서와 사용자 요구사항 정의서부터 작성하여 프로젝트의 기반을 튼튼히 다졌다.

 

내가 한 역할은 로그인, Api 모듈화, 지역선택, 카카오 지도 api로 맛집 표기하기, toast-ui사용이였다. 

 

프로젝트는 create-react-app으로 제작하여 렌더링 방식은 client side rendering이었다. 그리고 css in js인 styled-component로 스타일링을 했다. 개인적인 취향으로는 css파일을 따로 관리하는 것보다 편리했고 또한 재사용성에 있어서 좋았다. css파일을 따로 만들었을 때 클래스명이 겹쳐 많은 고생을 한 경험이 있는데 styled-component는 중복되지 않는 클래스명을 생성해주기 때문에 클래스명이 겹침으로 인해 생겼던 디자인적인 문제를 없애주었다. 또한 전역 변수로 스타일을 관리해서 색깔을 변경하였을 때 일일이 다시 찾아 변경하는 경우가 없게 만들었다. 다양한 외부 라이브러리도 사용하였다. Material-ui를 사용해 버튼이나 입력 라벨 등 편리하게 스타일링을 할 수 있어 좋았고, toast-ui를 사용해 마크다운 언어로 내용을 입력할 수 있었다. 또한 사진을 업로드할 때 이미지가 Base64로 인코딩 되어 긴 문자열을 잡아먹었는데 이를 해결하기 위해 업로드 버튼을 누르면 서버와 통신하여 이미지 파일을 amazon s3에 올려 이미지 url을 리턴 받았다.

또한 배포는 vercel로 진행하였다. 

 

한 달간의 프로젝트에서 나는 역시 많은 것을 배웠다. 진행 중인 코드가 막혔을 때 우선순위를 정해 먼저 해결해야 할 것을 정리하면서 진행해 시간을 관리하였고, 재사용할 수 있는 컴포넌트들은 최대한 재사용할 수 있게 하였다. 또한 백엔드분들에게 정확한 타입과 리턴되는 값을 요구하는 법을 배웠다. 대충 값만 넘겨주세요가 아닌 정확히 어떤 값을 백으로 보내줄 테니 이러이러한 값을 리턴해주세요와 같이 요구해야 서로 편하게 작업할 수 있다. 

 

Food-Reco 푸드레코 (나만의 메뉴추천 및 리뷰 서비스)

내가 뭘 먹고 싶은지 모를 때!🙄

아무거나 먹기는 싫을 때!😝

선택지가 너무 많아 고르기 힘들 때!🥲

🍱푸드레코가 도와줄게요!

• 매일매일 점심 메뉴선택으로 고민하는 학생 & 직장인들을 위한 간편 메뉴 추천 서비스!!
• 한식? 중식? 일식? 아니면 면? 밥? 국물?? 원하는 카테고리만 선택하고 내가 원하는 메뉴가 나올 때까지 무한 랜덤 돌리기!!
• 메뉴를 고른다고 해도! 이왕이면 맛있는 걸 먹고 싶다면??
• 랜덤으로 선택된 메뉴에 해당하는 식당의 리뷰를 보고 사람들이 많이 찾고! 맛,가격,시설까지 점수별로 검증된 맛집 찾기까지 가능한 리뷰 기반 맛집 추천 서비스 기능!

https://github.com/JIYEONGSTAR/seb39_main_037

GitHub - JIYEONGSTAR/seb39_main_037: 🤔FoodReco😀