Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/woowacourse-teams/2021-jujeol-jujeol

술 알고 마시자! 알고 마시면 더 맛있는 술! 당신을 위한 술을 추천해드립니다.
https://github.com/woowacourse-teams/2021-jujeol-jujeol

alcohol drinks java jpa react react-query recommendation spring-boot typescript

Last synced: about 3 hours ago
JSON representation

술 알고 마시자! 알고 마시면 더 맛있는 술! 당신을 위한 술을 추천해드립니다.

Awesome Lists containing this project

README 

        



# 술 알고 마시자! 술 추천 및 리뷰 서비스 주절주절



- [jujeol-jujeol.com](https://jujeol-jujeol.com) 에서 이용하실 수 있어요.

- [주절주절에 대한 더 많고 흥미진진한 이야기들](https://github.com/woowacourse-teams/2021-jujeol-jujeol/wiki)



---



## 🍻 Intro





  jujeol_og_image





  react

  spring-boot

  typescript

  mysql




**술 알고 마시자! 알고 마시면 더 맛있는 술!**  당신을 위한 술을 추천해드립니다.



편의점에서 처음 보는 술을 봤을때, 어떤맛인지 궁금할 땐?  *아 오늘 와인이 마시고 싶은데*, 내 취향에 맞는 와인이 궁금할 땐?



바로, **주절주절**



## 🚀 Demo



|                   💖 맞춤 술 추천 (로그인O)                   |                   👍 베스트 추천 (로그인X)                    |                         🌟 일괄 평가                          |

| :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: |

| 유저_맞춤_술_추천 | 베스트_추천 | 일괄_평가 |



|                         🧐 상세페이지                         |                  👩‍💻 선호도 입력과 리뷰 작성                  |                         🧑‍💻 리뷰 수정                         |

| :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: |

| 상세페이지 | 선호도_입력과_리뷰_작성 | 리뷰_수정 |



|                👯 로그인 (카카오 소셜 로그인)                 |                     💁 닉네임, 소개 수정                      |                     💆 리뷰와 선호도 관리                     |

| :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: |

| 로그인(카카오_소셜_로그인) | 닉네임_소개_수정 | 리뷰와_선호도_관리 |



|                       🍓 카테고리 검색                        |                       🔎 키워드로 검색                        |                          🥂 전체보기                          |

| :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: |

| 카테고리_검색 | 키워드로_검색 | 전체보기 |



## 👑 Recommendation Algorithm





	recommend_algorithm  




주절주절은 [직접 구현한 **협업 필터링 알고리즘**](https://jujeol-jujeol.github.io/2021/10/24/%EC%95%84%EC%9D%B4%ED%85%9C_%EA%B8%B0%EB%B0%98_%EC%B6%94%EC%B2%9C_Slope_One/)으로 사용자 맞춤형 서비스를 제공해요. 



주절주절은 초기에 **사용자 기반**의 알고리즘을 구성했어요. 이는 한 사용자가 많은 선호도를 남겨야 유의미한 알고리즘이죠.

하지만 **슬로프 원 알고리즘**을 이용해 **아이템 기반** 필터링 방식으로 변경하여 선호도를 적게 남기더라도 즉시 기능을 누릴 수 있게 되었답니다!



## ⚡️ Skills



더 많은 기술 이야기는 [조잘조잘](https://jujeol-jujeol.github.io/)에서 확인하세요.



### Front-end





  react

  type_script

  react_query

  emotion

  react_testing_library




- **React** 로 사용자와의 상호작용이 많은 웹 페이지를 효율적으로 구현하고 관리했어요.

- **Typescript** 를 사용해 빌드 시에 오류를 미리 찾아, 코드 안정성을 높였어요. 또한 동료와의 커뮤니케이션이 원활해졌어요.

- **React Query** 를 비동기 관련 로직과 상태를 관리했어요. API 응답 데이터를 캐싱함으로써 서버 통신 비용을 줄였어요.

- **Emotion** 으로 자바스크립트로 스타일을 관리했어요. 반복되는 스타일 컴포넌트를 재활용하고, 상태에 따른 스타일 변경에 용이해요.  

- **React Testing Libray** 로 테스트 코드를 작성했어요. 자신감있는 리팩토링을 통해 완성도 높은 코드를 짤 수 있어요.



---



### Back-end





  spring_boot

  hybernate

  query_dsl

  flyway

  spring_rest_docs




- **Springboot** 로 웹 어플리케이션 서버를 구축했어요.

- **Spring Data JPA(Hibernate)** 로 객체 지향 데이터 로직을 작성했어요.

- **QueryDSL** 로 컴파일 시점에 SQL 오류를 감지해요. 더 가독성 높은 코드를 작성할 수 있어요.

- **Flyway** 로 데이터베이스 버전 관리를 하고 있어요.

- **RestDocs** 로 작성한 API 문서를 통해 클라이언트와 원활하게 소통해요.



---



### Infra Structure





  aws_ec2

  docker




- **AWS EC2** 와 **Docker** 를 사용해 서버를 구축했어요.



#### CI/CD





  jenkins

  sonarqube

  github_actions




- **Jenkins** 로 백엔드 코드의 지속적 배포와 무중단 배포를 진행해요.

- **SonarQube**  백엔드 코드의 퀄리티를 분석해 더 양질의 코드를 위해 노력해요.

- **Github Actions** 로 코드 퀄리티와 테스트를 검사해요. 프론트엔드 코드의 지속적 배포를 진행해요. 



#### DB





  mysql

  elastic_search




- 데이터 베이스는 **MySQL**을 사용해요.

- **ElasticSearch** 로 검색 데이터베이스를 분리했어요. Full-text 검색으로 더 정확한 결과를 얻을 수 있어요.



#### Network





  aws_cloud_front

  nginx




- **CloudFront** 를 활용해 CDN 환경을 구성했어요.  

- **Nginx** 를 리버스 프록시와 로드 밸런서로 활용하고 있어요.



#### Monitoring & Testing





  prometheus

  grafana

  ngrinder




- **Prometheus** 로 서버의 상태를 확인해요.

- **Grafana** 가 Prometheus 로 확인한 결과를 시각화 시켜줘요.

- **nGrinder** 로 웹 어플리케이션 서버 요청과 데이터베이스에 대한 부하 테스트를 진행해요.



## 🌈 Members



|            [서니](https://github.com/sunhpark42)             |            [티케](https://github.com/devhyun637)             |             [웨지](https://github.com/sihyung92)             |             [소롱](https://github.com/soulgchoi)             |              [피카](https://github.com/pika96)               |             [크로플](https://github.com/perenok)             |             [나봄](https://github.com/qhals321)              |

| :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: |

| _ | _ | _ | _ | _ | _ | _ |

|                         🍷 프론트엔드                         |                         🍾 프론트엔드                         |                           🍺 백엔드                           |                           🥃 백엔드                           |                           🍸 백엔드                           |                           🍹 백엔드                           |                           🍶 백엔드                           |