네캔만원 바로가기 (서버 비용 문제로 배포 중단)
네캔만원은 편의점 맥주의 다양한 정보를 제공하고 이를 기반으로 한 커뮤니티를 형성하여 맥주 구매 결정에 도움을 주는 서비스입니다.
기획 배경
- 국내 편의점은 5만개 이상 존재하고, 맥주는 편의점의 주력 판매 물품 중 하나
- 맥주에 대한 정보를 종합하여 한눈에 제공하는 서비스의 부재
- 기존의 맥주 추천 서비스들은 맥주의 단순한 정보만 제공해주거나, 정보 제공보다 광고가 위주인 곳이 대다수
주요 기능
- 편의점에서 판매하는 맥주의 다양한 정보 (맥주 종류, 향, 맛, 설명 등)를 제공해주어 취향에 따라 맥주 선택 가능
- 맥주에 대해 많은 사람들과 의견을 나눌 수 있는 소통의 장을 마련
부가 기능
- 맥주의 종류인 '에일', '라거', 'IPA','스타우트'에 대한 정확한 정의를 소개하고 필터링 기능을 제공하여 종류별로 맥주 확인 가능
- 사용자가 어떤 맥주를 먹어야 할 지 모르는 경우 맥주를 랜덤으로 추천하고 맥주의 상세 정보를 제공
- 캔 맥주를 더 맛있게 먹는 팁을 제공
- '찜하기' 버튼을 제공하여 자신이 찜한 맥주 리스트를 관리
나의 회고
이번 프로젝트도 멋사 동아리를 통해 시작하게 되었다. 이번에는 React로 프로젝트를 진행했다. React를 아예 처음 접했는데 한 2주 공부하고 바로 프로젝트에 투입되었다. 그래서 혼자 걱정이 엄청 많았는데 웬걸,,, 어느새 뚝딱뚝딱 하고 있는 나를 발견했다. 아마 코드가 그리 좋진 않겠지만 처음부터 잘하는 건 반칙(?)이기 때문에 React로 프로젝트를 진행해보았다~에 의의를 두기로 했다.
이번 프로젝트는 React를 사용해본 것 말고도 axios를 사용해 백엔드와 통신하고, postCSS를 사용해 보는 등 전보다 훨씬 더 다양한 경험을 할 수 있었다.
내가 구현했던 것들 중 중요하고 기억하고 싶은 것들을 정리해보겠다.
1. postCSS를 사용한 이유
postCSS를 사용하자고 먼저 제안한 것은 나였다. 프로젝트 초기, 생각보다 많이 구현해야 하는 페이지들을 보면서 문득 class 이름을 어떻게 다 다르게 하지... 라는 생각이 들었다. 그렇게 구글링을 하다 발견한 친구가 postCSS였다. postCSS의 큰 장점은 모듈화가 가능하다는 것이다. 모듈화는 각 컴포넌트의 class 이름이 같아도 CSS를 다르게 적용할 수 있다. 당시, 한달안에 총 13페이지를 구현해야 했기 때문에 class 이름을 고민하고 있을 시간이 없었다.
postCSS를 지금까지 사용해본 후기는 '정말 편리하다' 이다. 전에는 버튼 class 이름을 'header_button_1' 이런식으로 복잡하게 썼는데, 지금은 그냥 'button'이라고 쓴다. 그래서 class 이름을 고민해야 하거나 이름을 길게 써야 하는 불편함이 해소되었다.
2. 별점 기능
내 속을 가장 오래 썩힌 기능이 이 기능이다. 구글링해보니 대부분 api를 사용하던데 그렇게 하면 내가 생각한대로 구현되지 않았다. 예를 들어, 5개의 빈 별 중에 3번째의 별을 클릭하면 3번째 별까지 모두 색이 채워지고 다시 3번째 별을 클릭하면 채워졌던 별이 다시 빈 별이 된다. 그리고 3번째 별을 클릭해서 3번째 별까지 색이 채워진 다음, 4번째 별을 클릭했을 때 앞의 3개의 별들은 채워진 채로 그대로 있고 4번째 별만 채워진 별로 바뀌는 .. 우리가 평소에 별점을 부여하기 위해 클릭하는 방법처럼 구현하길 원했다.
그래서 현재 클릭한 별과 이전에 클릭한 별의 id를 비교하여 별의 상태를 바꾸었다.
3. 필터 기능
필터링은 전에도 한번 해봐서 큰 걱정이 없었는데 오산이었다. 전에 구현했던 필터는 하나씩 클릭하는 것이었는데 이번에 구현해야 할 필터는 다중선택이 가능해야 하는 필터였다. 그래서 필터를 클릭할 때마다 해당하는 맥주의 리스트들이 보이게끔 구현해야 했다.
4. 실시간 댓글, 대댓글
우리 프로젝트의 핵심 기능이라고 할 수 있는 실시간 댓글과 대댓글 기능을 구현했다. 댓글은 댓글 페이지에 들어오자마자 볼 수 있고 대댓글은 토글 버튼을 클릭하면 볼 수 있도록 했다. 그리고 댓글과 대댓글을 입력하자마자 바로 볼 수 있도록 하였다.
.
.
.
8월 말 해커톤을 목표로 시작한 프로젝트라 큰 기능들은 모두 구현되었다. 그런데 팀원들 모두 다른 프로젝트를 새로 시작하는 것보다 한 프로젝트를 꾸준히 발전시키는 것이 더 중요하다고 생각해서 지금도 (22.11~) 개발중이다. 지금은 자잘한 수정과 더불어 관리자 페이지를 구현중이다. 관리자 페이지에는 댓글 신고 관리, 맥주 신청 내역, 회원 관리, 맥주 등록 페이지가 포함될 예정이다.
현재 막학기라 많은 시간을 할애하기는 어렵지만, 그래도 조금씩 새로운 기능들을 덧붙이면서 점점 완성되어 가는 프로젝트를 보니 많이 뿌듯하다. 얼른 관리자 페이지도 완성하고 싶다! 너무 기대된다 😆
