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

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

들어가기 전 이 글은 이미 tistory에 있다! 근데 굳이 velog에 다시 올리는 이유는.. 일단 당분간은 velog에 모든 글을 올리기로 했기 때문이다. 굳이 따로따로 올리는 것보다 중복되더라도 모아놓는 게 나을 것 같아서.. 일단 올려놓고 나중에 수정할 수도 있다. 프로젝트 소개 우선 '프론트엔드', '백엔드'는 범위가 너무 넓기 때문에 들어가기 앞서 진행한 프로젝트 소개를 잠깐 하려고 한다. 이번 학기에는 팀원들과 함께 맛집 웹사이트를 만드는 프로젝트를 진행했다! HTML/CSS/Javascript로 프론트엔드를, Flask(goorm.ide)로 백엔드를, 그리고 Firebase로 데이터베이스를 구현하였다. 개발하는 도중에 수많은 에러를 마주칠 수밖에 없었지만... 하나하나 해결해 나갔다! 오늘은 프로젝트를 진행하면서 알게 된 프론트엔드, 백엔드에서 에러를 해결하는 나만의 팁을 공유하려고 한다. 프론트엔드: 사실상 '