HackaLearn Final - 네캔만원⌨️

lio8625.log

💡 네캔만원 링크: http://4can10000won.shop/

현상 분석 및 문제 정의(PPOS)🧐

출처 : 한국 농수산 식품공사

Phenomenon 현상 분석
- 코로나 19 이후 대학생 중 집에서 술을 즐기는 ‘홈술’ 및 혼자서 술을 즐기는 ‘혼술’이 트랜드로 자리 잡았다.
- 국내에는 편의점만 5만개 이상 존재하고 맥주는 편의점의 주력 판매 물품 중 하나이다.
- 소맥에 어울리게 디자인 된 기존 한국의 전통적인 맥주(cass, hite)가 아닌 맥주 자체 맛에 초점을 맞춘 여러 국내 맥주 브랜드의 등장(헨드 엔 몰트, 제주 맥주, 플레티넘 맥주)
  - https://www.allurekorea.com/2020/06/09/나만-몰랐던-국내-수제-맥주-전성시대/
- 새로운 수입 맥주 등장(CU에 “에일 메이크 미 스마일”)
  - https://www.lawissue.co.kr/view.php?ud=202203081358386747204ead0791_12
Problem 문제
- 편의점 내 판매하는 맥주는 많지만 맥주에 대한 정보는 없어 구매자들이 새로운 맥주 구매를 시도하지 못하고 기존에 자신이 먹던 맥주를 주로 소비하게 된다.
- 맥주에 대한 정보를 찾을 시 이를 종합하여 한눈에 제공하는 서비스가 없고 정보 제공이 아닌 광고가 위주인 곳이 많다.
- 자신이 접한 맥주에 대한 의견을 남들과 공유하고 특정 맥주에 대한 남들의 생각을 확인할 커뮤니티가 없다.
Opportunity 기회
- 편의점에서 판매하는 맥주에 대한 정보를 제공해주는 서비스가 있다면?
- 맥주에 대해 남들과 의견을 나눌 수 있는 소통의 장이 존재하여 특정 맥주를 먼저 접해본 구매자가 남긴 후기를 볼 수 있거나 자신의 생각을 남길 수 있다면?
Solution 솔루션
- 편의점에서 판매하는 맥주에 대한 정보를 제공하고 다른 사람들과 맥주에 대해 의견을 공유할 수 있는 서비스를 제공하자!

협업 방식🚴‍♂️

1. Slack을 활용한 팀원 간의 소통

Slack : 여러 업무용 도구를 위한 추가 기능이 있는 인스턴트 메시징 시스템이자 업무 협업 툴
- 업무와 개인 채팅을 분리할 수 있다.(개인 : 카카오톡, 업무 : 슬랙)
- ‘트렐로’, ‘구글 드라이브’, ‘깃허브’ 등 업무와 직결되어 사용 가능한 많은 서비스들이 슬랙과 동기화 가능하다.
- 카카오톡의 단톡방과 유사한 기능인 슬랙의 ‘채널’ 기능을 사용하여 여러 명이서 소통할 수 있으며 한 채팅방에서만 키워드 검색을 사용할 수 있는 카카오톡과 달리 모든 채널에서 특정 키워드를 검색할 수 있다.
- ‘쓰레드’ 기능을 사용하여 한 채널에서 한 사람, 혹은 특정 몇몇 사람과 개인 적인 DM(Direct Message)를 나눌 수 있다. (큰 그룹 내에서 별도의 채널 생성 없이 작은 그룹의 대화가 가능)
- 코드블럭 기능, 마크다운을 접해본 개발자라면 익숙한 볼드(Bold) 채, 혹은 이탤릭 채로 글씨체를 바꿔주는 기능과 같이 개발자 친화적인 여러 부가 기능들을 제공한다.

2. Gather를 활용한 주간 회의

Gather Town : 메타버스 가상 공간에서 각자 개인의 아바타를 생성 후 이를 사용하여 비대면으로 타인과 자유롭게 소통할 수 있는 서비스. ‘Google Meet’, ‘Zoom’과 같은 기존의 대표적인 온라인 화상 회의 서비스를 대체한다.
- 기존 화상 회의의 ‘일대다’의 일방적인 관계에서 벗어나 필요할 때 원하는 사람들과 화상 회의를 가능하게 한다.
- 특정 초대된 인원만이 회의에 참여가 가능하던 단점에서 벗어나 다수의 사람들이 자유롭게 방을 드나들며 의사소통 할 수 있다.
- 다수의 사람으로 구성된 큰 그룹 내에서 ’버블’ 기능을 사용하여 별도의 공간으로 이동할 필요 없이 작은 그룹끼리 대화를 할 수 있다.
- 메타버스 가상공간을 사용자가 개인의 취향에 맞게 직접 꾸밀 수 있어 참여자들이 게임을 할 수 있도록 하거나, 특정 위치에 가면 BGM이 들리도록 하는 등 여러 재미 요소들을 제공한다.

정기적으로 주간 회의를 진행 → 주 2회(수: 21:00~23:00, 토: 11:00~13:00)

혼자 개발 작업을 할 때에도 Gather Town에 접속하여 개인 작업 수행 → 주간 회의가 아니더라도 팀원들과 잦은 만남이 가능하여 팀원 간 결속력이 증가하고 , 팀원들이 개발하는 모습을 보며 자극을 받거나 도움을 받을 수 있어 개발 생산성 또한 증대한다.

3. Github 활용

깃 허브 링크: https://github.com/Central-Heckaton/4can10000won

팀원 모두가 속해 있는 Central-Heckaton이라는 Organization 생성 후 안에 새로운 Repository를 만들어 각자 Fork해서 개인 작업을 진행

‘Commit Message’ 규칙을 정하고 이를 준수

개인 작업 후 Pull Request를 보내고 Merge 할 때 Comment를 달아 피드백 및 코드 리

총 75번의 Pull Request와 192개의 Commit을 수행한 모습

주요기능😎

시연 영상: https://youtu.be/obeEv0ZyjpM (스마트폰 화면 기준으로 제작하였습니다.)

1. 다양한 맥주 정보 제공

먼저 해당 맥주의 맛에 대한 자세한 설명을 보여주고, 부가적으로 맥주의 알코올 도수, 맥주의 맛을 대표할 수 있는 키워드를 태그 형식으로 보여준다.
맥주는 크게 ‘에일’, ‘라거’, ‘IPA’, ‘스타우트’로 구분되는데 사용자가 맥주를 정보를 찾을 때 원하는 조건(맥주 종류)에 따라 맥주를 정보를 확인할 수 있다.
하트 버튼을 통해 사용자가 현재 보고 있는 맥주가 맘에 든다면 찜하기 기능을 사용하여 추후에 자신이 찜한 맥주 리스트를 한눈에 확인할 수 있다.

2. 맥주에 대한 정보 공유가 가능한 커뮤니티 제공

특정 맥주를 접해본 사용자가 남긴 실제 후기(ex. 맛 평가)를 확인하거나, 맥주를 접한 후 직접 후기를 작성할 수 있다.
사용자가 맥주에 대해 1~5점 사이로 평점을 매길 수 있으며 남들이 매긴 점수 또한 확인할 수 있다.
대댓글 기능을 제공하기 때문에 특정 사용자가 남긴 후기에 자신의 생각을 남길 수 있다.

‘에일’, ‘라거’, ‘IPA’, ‘스타우트로’에 대한 정확한 정의를 소개하고 네 가지로 구분되는 기준에 대한 설명을 제공
사용자가 어떤 맥주를 먹어야 할지 모르는 경우 맥주를 랜덤으로 추천해주고 추천된 맥주에 대한 상세 정보를 제공
캔 맥주를 더 맛있게 먹는 팁 제공

오픈 소스 활용 사례🙃

Swagger UI를 통한 API명세로 FE와 BE 협업

Swagger UI 링크: http://4can10000won.shop/swagger-ui/index.html

Swagger는 서버로 요청되는 URL 리스트를 HTML화면으로 문서화 및 테스트할 수 있는 오픈소스 라이브러리입니다.

API Design : Swagger-Editor를 통해 api를 문서화하고 빠르게 명세 할 수 있다.

API Development : Swagger-codepen을 통해 작성된 문서를 바탕으로 SDK를 생성하여 빌드 프로세스를 간소화 할 수 있다.

API Document : Swagger-UI를 통해 작성된 API를 시각화하여 한눈에 알아볼 수 있도록 한다.

API Testing : Swagger-Inspector를 통해 API를 시각화된 정보를 바탕으로 빠른 테스팅을 진행할 수 있다.

Standardize : Swagger-hub를 통해 개인, 팀원들이 API 정보를 공유할 수 있다.

API-Controller 별로 api 명세를 구분
- comment-api-controller : 리뷰 및 대댓글의 CRUD(생성, 조회, 삭제, 업데이트)를 담당하는 API
- beer-api-controller : 저장된 맥주 데이터를 불러오거나, 특정 맥주를 찜한 사용자를 확인할 수 있는 등 맥주 데이터와 관련된 API
- user-api-controller : 회원 가입, 이메일 중복 여부 검사, 회원 정보 수정 등 사용자 정보와 관련된 API

HTTP Method(POST, GET)에 따른 API의 명세 세부 내용을 통해 request body에는 어떤 데이터가 들어오고, response로 어떤 데이터가 나가는지 확인할 수 있다
좌: beerId에 해당하는 댓글 전체보기 | 우: 대댓글 작성하기

💡 Swagger-UI를 통해 API 명세서를 작성하였습니다.

Infra Diagram with AWS

email: hufs@naver.com | password: 1234
(※ 네이버, 구글 소셜 로그인은 검수 단계에 있어서 아직 작동하진 않습니다.)

EC2(Elastic Compute Cloud) : AWS에서 제공하는 클라우드 컴퓨팅 서비스입니다.

용량을 늘리거나 줄일 수 있다.(탄력성)

사용한 만큼 지불하므로 저렴

사용자가 인스턴스를 완전히 제어할 수 있음

보안 및 네트워크 구서, 스토리지 관리에 효과적

RDS(Relational Datase Service) : AWS클라우드에서 관계형 데이터베이스를 더 쉽게 설치, 운영 및 확장할 수 있는 웹 서비스입니다.
- 스토리지 용량 조절가능
- 모니터링 가능
- 자동 백업 기간 설정 가능
Gabia에서 적절한 도메인 구입 후 가비아에서 제공하는 DNS 시스템이 IP주소를 80포트(HTTP)로만 접속하기 때문에 생성한 EC2 내 인바운드 규칙을 편집하여 HTTP 요청을 추가하였다.

시스템 구성도

💡 AWS(Amazon Web Service)의 EC2와 RDS를 활용해서 프로젝트를 배포했습니다.

비즈니스 모델(BM)💰

배달 플랫폼 혹은 음식점과 협업하여 맥주 구매 시 고객에게 맥주와 어울리는 안주를 추천하고 앱 안에서 안주의 주문까지 한 번에 해결할 수 있도록 하여 안주 구매를 촉진
편의점 점주들이 맥주에 대한 평점과 같이 서비스에서 축적한 데이터 확인하여 물건을 납입할 때 사용(ex, 평이 좋은 맥주는 더 많이 들인다.)
고객들에게 새로운 맥주에 대하여 정보를 제공하고, 이를 통해 고객이 평소 먹던 맥주가 아닌 새로운 맥주를 구입할 수 있도록 유도한다.

추후 계획😶‍🌫️

현재로선 단순히 커뮤니티이지만 사용자들의 리뷰 데이터(댓글, 찜 목록, 조회 수, 위치 정보 등) 축적 후 대표적인 추천 시스템 중 하나인 사용자 기반 협업 필터링 방식을 사용하여 사용자 취향에 맞는 맥주 추천 시스템으로 발전할 것이다.

1. 에러

검색(’돋보기’) 및 태그(’라거’) 선택하고
서치 footer 누르면 필터링 유지됨 -> 서치 누를때 useSate로 다 취소하자
검색 창에 글남아있을 경우 태그 버튼누르면 useState(””) 해 주기
소셜 로그인은 http로 들어오는 걸 https 로 redirect해줘야 한다 ㅜ
배포 + 소셜로그인
~~[BE문제] /random 들어가면 500 에러뜬다 (예상: 맥주 삽입하면서 id 달라짐) →~~
- 원인: BITTER 오타값이 있었다. (BIITER) → 해결완료 정상작동함[8/20]
프로필 수정에서 변경사항없으면 ‘변경 사항이 없습니다.’ 로 뜨도록 하자
DB에 createdDate를 Asia/Seoul로 하자
이메일 인증 넣자
닉네임 중복확인
개인정보 인증방식? → 선례
가비아 소셜 회원가입