이번 프로젝트의 최종 기능들 정리 맨 처음에 이 프로젝트를 기획했을 때는 오로지 칵테일 추천 챗봇을 만드는 것이 목적이었다. 하지만 점점 이야기를 나누면서 앱의 최종적인 기능들이 정해졌다! 홈 화면 칵테일 추천 챗봇 홈 화면 추천 자유대화 챗봇 상세화면 즐겨찾기 검색창** 이중에 오늘은 검색창 기능에 집중해보려고 한다. 구현하고자 하는 검색창 내가 만들고자 하는 검색창은 다음과 같다. 검색창에 뭔가 입력하자마자 바로바로 밑에 리스트가 갱신된다. 칵테일 이미지와 칵테일 이름, 재료가 나열된다. 사용 환경 백엔드: Flask 통신: REST API (POST) 프론트: ReactNative 데이터 형식: JSON 코드 Data 형식(JSON) 데이터를 이렇게 써주면 item.name 이런 형식으로 뽑아서 사용할 수 있다. > const data =

진행 단계 최종적으로 칵테일을 추천해주는 단계는 어느 정도 (최소한) 틀은 완성되었다. 사용자가 입력한 내용에 따라 최종적으로 칵테일 3개가 추천이 된다. 그래서 프론트를 담당하고 있는 내가 해야 할 일은 그 3개를 예쁘게 앱에 보여주는 것이다. 고민들... 이미지를 어떻게 가져오나.. 칵테일 데이터는 모두 텍스트이기 때문에 어찌저찌 가져오는데 성공했지만, 아직 큰 난관이 남아있었다. 바로 '이미지'였다. 이미지가 없이 추천해주는 건 정말 말도 안되기 때문에, 어떻게든 이미지를 가져올 방법을 찾아야 했다. 하지만 칵테일 종류는 수백가지이고, 일일이 이미지를 찾아서 가져오는 것은 불가능해보였다. 최종 3개를 어떠한 구성으로 보여주나.. 세로로 3개를 보여주는 방식도 있고, 가로로 3개를 보여주는 방식도 있었다. 세로로 배열할 경우 공간이 넓어서 이미지랑 이름 말고도 많은 텍스트 데이터를 보여줄 수 있다는 장점이 있었다. 하지만 서로 비교해

계획 수정 일단 저번에도 말했다시피 우리의 목표는 챗봇을 만드는 것이었다. 하지만 프론트는 어떻게 구현할지, 백엔드는 어떻게 구현할지 등등.. 고려할 점이 많았다. 저번에는 별 생각없이 진행했지만, 그래도 최대한 조금이라도 익숙한 프레임워크를 이용하는 게 나은 것 같아 모든 계획을 전면 수정하기로 했다. 이번 프로젝트를 위한 근거 나는 백엔드보다 프론트엔드에 더 관심이 많다. 지난번에 (HTML/CSS/Javascript/Flask/Firebase)를 이용한 맛집 웹사이트를 만들어본 경험이 있다. 우리 팀원들은 iOS와 Android를 둘다 사용하고 있다. ReactNative를 아주 조금이나마 다뤄본 경험이 있다. 결론 따라서 이번 프로젝트에는 (ReactNative - EXPO/Flask/Firebase)를 이용해보려고 한다. 챗봇 화면 구현 <ReactNative의 GiftedChat와 Firebase로 R