School Picks - Weekly Demo Feedback2

어제 오늘 한 일

수업으로 듣는 컴퓨터 네트워크 과제를 하면서 시간이 날 때마다 데이터에 넣을 가게도 생각해보고 어떻게 해야지 편할까에 대해서 고민을 많이 해봤었다.

 

 사실 해당 에브리타임 게시글에 왜 사람들이 많이 사용했을까에 대해서 고민을 해본 결과, 들어가서 버튼만 누르면 1개의 가게를 바로 보여주기 때문이다. 그래서 고민해본 결과 최대한 유저가 선택하는 태그는 빼야겠다는 생각이 들었다. 딱 유저가 선택할 수 있는 건 몇 명이서 갈거야? 그리고 가격이 얼마였으면 좋겠어?로 해놨다. 그마저도 귀찮으면 혼밥에 가격은 5000원에서 2만원 사이로 default로 놔두기로 했다.

 

 

대략적인 화면구성

React로 화면 구성을 다음과 같이 했다. HTML이랑 CSS좀 배워놓을 걸 싶은 순간이었다... 그냥 HTML로만 작성을 해도 될 것 같기도 하고 백엔드라 확실히 화면이 별로다. 나중에 틈 날때마다 조금씩 익혀둬야겠다. 다시보니까 체크 박스도 해당 값이 얼마인지 뜰 수 있게 아래에 Min Max도 추가해야되고 저거 간격도 좀 건드리고 많은 게 필요할 것 같다.

 

하지만 기능과 로직은 충분히 설명이 가능하다. 사람들이 목적(혼밥, 2인-4인 등)에 따라 선택을 하고 아래 바를 보면 지금 5000원부터 시작해서 20000원까지 쭉 다이얼로 당겨서 Min, Max를 설정할 수 있다. 그러면 react에서 api를 서버쪽으로 보낼 수 있는데 { purpose: " {목적} ", priceLow: 5000, priceHigh: 20000 } 이렇게 JSON 형태로 날려보내면 응답할 수 있게 백엔드를 구성해놨다.

 

 

서버 구현

프론트는 조잡하기 짝에 없지만 서버 쪽을 이제 봐보자. 서버는 MySQL과 Spring으로 우선 구성을 해두었다. 

 

우선 정말 저 선택과 가격만 알면 되니까. 대표 메뉴 기준으로 인 당 얼마정도 사용할까 생각해서만 작성을 했고 뽑아올 수 있는 데이터는 네이버 지도 url, 가게 이름, 가게 인당 비용, 내 평가 등이 있다. 그래서 url은 솔직히 필요가 없으니 넣은 데이터를 전부 뽑아보면 아래와 같다. 가게는 총 51개이고 진짜 점심 혹은 저녁 식사용으로 갈 만한 곳만을 선정했다. 술 집, 데이트 장소는 전혀 넣지 않았다.

 

스프링 테스트를 통해서 데이터가 잘 들어갔는지 확인하는 테스트 코드를 통해서 해당 데이터를 뽑아왔다.

 

위의 화면에서 가장 큰 성균 맛집은 바뀌지 않고 그 아래 두 개의 바가 각각 이름과 설명 창이 되고 아래의 내용이 들어가게 우선 생각을 해놨다.

짱식당: 혼밥으로 보쌈 먹기 좋은 장소, 가격은 인당8000를 예상한다.
기똥찬고기: 저렴한 가격에 고기 먹을 수 있는 식당, 단체 회식으로도 좋다., 가격은 인당12500를 예상한다.
제주도야지생삼겹살: 항정살이 맛있다고 한다. 가격이 좀 있다., 가격은 인당20000를 예상한다.
성대목장: 교수님 혹은 취업한 졸업생과만 갈 수 있는 곳, 가격은 인당20000를 예상한다.
찬이네주먹고기: 좋은 고기를 적절한 가격에 먹을 수 있는 곳, 가격은 인당15000를 예상한다.
보리네주먹고기: 좋은 고기를 적절한 가격에 먹을 수 있는 곳, 가격은 인당15000를 예상한다.
예국향: 닭볶음밥 아니면 육개장이 맛있는 집, 떡만둣국 같은 거 잘못 시키면 엄청 늦게 나온다., 가격은 인당7000를 예상한다.
서브웨이: I인 사람은 힘들지만 모르면 야채는 빼는 것만 말하고 소스는 추천소스 뿌려달라하자., 가격은 인당7000를 예상한다.
본찌돈까스: 옛날에 비해 가성비가 많이 나빠졌지만, 메밀정식 먹으러 가는 곳, 가격은 인당8000를 예상한다.
포크포크매콤돈가스칡불냉면: 신입생 때 돈까스 냉면 조합이 어색했지만 나름 잘 어울리는 집, 가격은 인당9000를 예상한다.
일인자감자탕: MT나 술 많이 먹고 해장하러 가는 곳, 밥 먹으러 가도 맛있다., 가격은 인당9000를 예상한다.
서울24시감자탕: 자주 안 가겠지만 일인자와는 다른 숨은 감자탕 맛집. 김치가 맛있다., 가격은 인당9000를 예상한다.
카마타케제면소: 저렴한 가격에 색다른 기분을 낼 수 있다. *치쿠텐부카게우동 강추*, 가격은 인당8000를 예상한다.
찜닭에 꽂힌 닭집애: 화학관 뒷편에 사는 애들과 대학원생들만 아는 집, 닭칼국수가 맛있다. 점심에 가면 줄이 길다., 가격은 인당9000를 예상한다.
이라면: 자주 열지는 않지만 저렴하게 즉석 떡볶이에 볶음밥을 즐길 수 있다., 가격은 인당6000를 예상한다.
미가라멘: 돈코츠라멘이 제일 나은 곳, 가격은 인당7500를 예상한다.
카와마루아지: 츠케멘과 극라멘을 먹을 수 있는 곳, 호불호가 있다., 가격은 인당9000를 예상한다.
모수밀면: 율전에서 밀면을 먹을 수 있는 곳, 국물이 굉장히 진하다., 가격은 인당8500를 예상한다.
태화루: 학교에선 멀지만 빨간버스를 타고 내렸다가 시간이 남으면 가보길 추천한다., 가격은 인당6000를 예상한다.
국졔식당: 옛날과 달리 메뉴가 크게 바뀐 곳, 돈까스와 냉면, 제육을 판다., 가격은 인당9000를 예상한다.
무대뽀핫도그: 핫도그도 맛있지만 떡볶이가 맛집인 곳. 저녁엔 애들과 간술을 점심에 떡볶이에 핫도그로 먹어도 좋다., 가격은 인당8000를 예상한다.
무대뽀핫도그: 핫도그도 맛있지만 떡볶이가 맛집인 곳. 저녁엔 애들과 간술을 점심에 떡볶이에 핫도그로 먹어도 좋다., 가격은 인당8000를 예상한다.
벨라튀니지: 목적이 뭐냐에 따라 금액이 크게 다르다. 데이트 혹은 대접할 때 들르기 괜찮은 곳, 가격은 인당12000를 예상한다.
알촌: 가볍게 식사하기 좋은 곳, 이 정도에 혼밥하기 좋은 곳이 없다., 가격은 인당5000를 예상한다.
한솥: 가볍게 식사하기 좋은 곳, 치킨마요덮밥만 먹는다., 가격은 인당5000를 예상한다.
행컵: 가볍게 식사하기 좋은 곳, 제육 먹으러 가는 곳, 가격은 인당5500를 예상한다.
율천회관: 체감상 가게가 여는 날보다 닫은 날이 더 많은 곳, 하지만 비빔밥이 맛있다. *혼밥힘든장소*, 가격은 인당11000를 예상한다.
카츠요이: 항상 줄이 긴 곳, 가보려고 했다가 사람이 많아서 항상 명동찌개마을에서 김치찌개를 먹는다., 가격은 인당12000를 예상한다.
청년밥상: 제육, 우렁 쌈밥이나 찌개 쌈밥 세트 먹으러 가는 곳. 해물된장찌개에 토마토가 들어갔지만 의외로 괜찮다., 가격은 인당8500를 예상한다.
일미닭갈비: 닭갈비 먹을 땐 우동사리를 먹고 나선 볶음밥을 먹는 곳, 가격은 인당10000를 예상한다.
중경마라탕: 매운 마라탕을 먹고 싶거나 마라샹궈 먹으러 가는 곳, 가격은 인당8000를 예상한다.
수해복마라탕: 감칠맛 나고 깔끔한 마라탕을 먹을 수 있는 곳, 가격은 인당8000를 예상한다.
고기굽는교실: 저렴하게 고기 구워먹을 수 있는 곳, 가격은 인당9000를 예상한다.
엉터리생고기: 고기 무한리필은 여기만 살아남았고 여기가 제일 낫다. 점심특선도 이용해보자., 가격은 인당14500를 예상한다.
천하일면: 고기국수가 단돈 7천원이다. 5년째 가격이 그대로에 고기도 많다., 가격은 인당14500를 예상한다.
생순 본점: 루다헤어 앞 생순으로 외관과 함께 맛도 변했지만 순대철판 볶음이 맛있다., 가격은 인당9000를 예상한다.
생순 쪽문점: 쪽문 쪽 생순으로 매운 맛은 꽤나 매콤하고 밥도 리필이 가능하다., 가격은 인당9000를 예상한다.
성대밥상: 떡볶이와 반찬을 마음 껏 먹을 수 있고 찌개 밥 세트는 가성비가 최강이다., 가격은 인당7000를 예상한다.
맥도날드: 맥도날드 앱에서 쿠폰 받아서 먹으면 더 싸다. 24시간 여는 얼마 안되는 집, 가격은 인당5000를 예상한다.
맘스터치: 맛은 있는데 사람 많으면 엄청 늦게 나온다., 가격은 인당5000를 예상한다.
롯데리아: 아이스크림이랑 양념감자 먹으러 가는 곳, 가격은 인당5000를 예상한다.
롯데리아: 아이스크림이랑 양념감자 먹으러 가는 곳, 가격은 인당5000를 예상한다.
담은샤브칼국수: 샤브샤브, 칼국수, 볶음밥을 먹을 수 있다., 가격은 인당12000를 예상한다.
경복궁개성손만두메밀소바: 잘 모르는 왕만두전골 맛집, 가격은 인당11000를 예상한다.
보영만두: 넣긴 했는데... 군만두에 쫄면이 너무 비싸다., 가격은 인당11000를 예상한다.
먹깨비김밥: 새벽에 진짜 갈 곳 없을 때만 가는 곳 아니면 갈 이유가 없다., 가격은 인당6000를 예상한다.
인더비엣: 학교에서 가장 가까운 베트남 식당. 맛도 괜찮다., 가격은 인당12000를 예상한다.
명륜진사갈비: 무한 리필 갈비집 셀프바가 내부에 있고 다양하다., 가격은 인당19000를 예상한다.
청년다방: 율전에 몇 없는 즉석 떡볶이 집, 가격은 인당10000를 예상한다.
동대문엽기떡볶이: 포장 시 엽떡앱쓰면 3000원 할인이다., 가격은 인당10000를 예상한다.
신전떡볶이: 엽떡과 신전 중 그날 먹고 싶은 데로 가자., 가격은 인당7000를 예상한다.

 

 그렇게 서버는 띄워놨고 데이터를 전부 가져와서 가격과 옵션에 따라서 동적으로 작동할 수 있는 Repository를 만들었고 Service로는 해당 선택지 중에서 랜덤하게 하나만 골라서 가져오게 만들었다. 이건 테스트에서 혼밥, 5000-10000원 사이로 설정해두고 Service를 테스트했을 때 출력 값을 하나 나오게 한 부분으로 아래처럼 값이 나온다. url은 너무 길어서 내가 복붙하고 지워버렸다.

 

Shop(Id=131, name=청년밥상, price=8500, 
, description=제육, 우렁 쌈밥이나 찌개 쌈밥 세트 먹으러 가는 곳. 해물된장찌개에 토마토가 들어갔지만 의외로 괜찮다.)

 

 controller는 만들어놨는데... React 단을 전혀 모르니 화면도 만들었는데 무슨 문제가 생겼는지 잘 모르겠어서 우선 놔두고 있다. 결과적으로 데이터를 { purpose: " {목적} ", priceLow: 5000, priceHigh: 20000 } 이걸로 받으면 { result: true, shopName:"청년밥상", description:"제육, 우렁~~~" }를 내놓게는 만들어놨는데 오늘 얘기를 해보고 완성을 해놓아야겠다.

 

추가적으로 해당 페이지의 기능을 만든다면 생각할 수 있는 부분은 데이터를 앞으로 더 추가하고 category에 따라서 하되, 카페 선택 기능과 술집, 데이트 이렇게 4개를 따로 카테고리를 만들고 이건 옵션에서 추가하는 게 아니라 위에서 Navigation bar형태로 만들어야겠다.

 

반응이 좋으면 운영시간에 따라서 시간이 아니면 검색이 안되게 추천을 해주는 기능도 만들어보고 리뷰도 다른 사람이 남길 수 있게 만들어봐야겠다.

 

고민은 서버인데 어제 이걸 계속 찾아봤는데 잘 안됐다. AWS로 서버를 프론트 백을 다 돌려버릴까 vercel로 프론트만 돌리고 백은 DB maria로 바꿔서 클라우드타입에다가 돌려버릴까인데 모르겠다. 그리고 웹 앱도 모바일에서 마치 어플처럼 사용가능한 뭐가 있는 것 같은데 뭔지 모르겠다.