go>> food_SNS-project>> 返回
项目作者： LEESUNSOO

项目描述 ：
SpringBoot, Vue web project
高级语言： Vue
项目地址: git://github.com/LEESUNSOO/food_SNS-project.git
创建时间： 2020-08-31T15:04:53Z
项目社区：https://github.com/LEESUNSOO/food_SNS-project
开源协议：
下载


:honey_pot: Honey-Combo :bee:

GithubGithubGithubGithubGithub

:earth_asia: 번역: KR US

Honey-Combo 는 1인 가구를 위한 음식 조합을 공유하기 위한 소셜 네트워크 서비스(Social Networking Service, SNS) 입니다. 사용자가 직접 요리한 사진을 피드로 게시해 여러 사용자들과 공유하며 소통할 수 있습니다.

  1. Common Service
    • 꿀조합 피드 게시, 댓글, 좋아요 서비스를 제공합니다.
    • 유저들 간 팔로우 및 팔로잉 서비스를 제공합니다.
    • 유저의 성별과 나이대를 기반으로 피드 게시, 피드 좋아요, 피드 상세 조회, 검색 데이터를 분석해 피드를 추천합니다.
  2. Contest Service
    • 관리자가 매주 하나의 주제로 콘테스트를 열어 유저들이 익명으로 참여합니다.
    • 좋아요를 가장 많이 받은 3개의 꿀조합을 게시한 유저에게 포인트를 부여합니다.
    • 차트를 이용해 콘테스트 피드의 좋아요를 누른 유저의 성별과 나이대 데이터를 시각화합니다.
  3. Liquors Service
    • 관리자가 매주 새로운 주류 조합을 게시합니다.

여기를 클릭해 사이트를 확인하세요 :slightly_smiling_face:

📌 목차

:honey_pot: Honey-Combo :bee:

:runner: 시작하기

아래 방법을 따르시면 프로젝트를 실행시킬 수 있습니다.

시작하기에 앞서

설치하기

  1. 깃헙의 레포지토리를 클론합니다.

    1. $ git clone https://github.com/YongjoonSeo/1st_pjt_301.git

  2. yarn을 설치합니다.

    1. $ yarn install

실행하기

Honey-combo 서비스를 사용하기 위해서는 다음과 같은 방법으로 실행합니다:

  1. 데이터베이스를 설정합니다.

    • honey-combo.sql을 참고해서 데이터베이스를 생성합니다. (여기를 눌러 erd를 확인하세요.)

    • application.yml에 데이터베이스 설정을 추가합니다.

      1. spring:
      2.   datasource:
      3.     driver-class-name: com.mysql.cj.jdbc.Driver
      4.     url : jdbc:mysql://localhost:3306/honeycombo?characterEncoding=UTF-8&serverTimezone=Asia/Seoul
      5.     username : {데이터베이스 계정 아이디}
      6.     password : {데이터베이스 계정 비밀번호}

  2. 백엔드 서버를 실행합니다.

    • IDE에 import 후 실행합니다.

      : IntelliJ, STS와 같은 IDE를 사용하는 경우, backend를 import하여 실행합니다.

    • war파일을 생성 후 실행합니다.

      1. $ gradlew -DskipTests=true build
      1. $ java -jar [filename].war

  3. 프론트엔드를 실행합니다.

    1. $ yarn serve

배포하기

해당 서비스는 AWS EC2를 이용하여 배포하였습니다. 사전에 여기를 참고해서 AWS EC2계정을 생성하세요.

배포를 하기위해서는 다음과 같은 방법으로 실행합니다:

  1. AWS EC2 인스턴스 생성
  2. JDK 설치 (환경변수 설정)
  3. DB 설치 (해당 프로젝트에서 MySQL 사용)
  4. gradle wrapper을 위한 버전 설정 (6.0.0 이상)
  5. gradle clean build 실행 (war 파일 생성)
  6. yarn build (dist 폴더 생성)
  7. Nginx (front-end, back-end 경로 설정)

데모

여기를 클릭하세요.

:globe_with_meridians: 지원하는 브라우저
latest latest latest latest

:hammer_and_wrench: ​사용된 도구

  • Vue.js 2.6.11
  • vue/cli 4.4.6
  • yarn 1.22.4
  • Spring boot 2.3.1
  • Gradle 6.4.1
  • IDE: Visual Studio Code 1.48, Spring Tool Suite 3

:desktop_computer: ​사용된 기술

프론트엔드

Technology Description Official website
Vue Front-end framework https://vuejs.org/
Vue-router Routing library https://router.vuejs.org/
Vuex Global State Management library https://vuex.vuejs.org/
vuex-persistedstate Persist and rehydrate your Vuex state between page reloads https://www.npmjs.com/package/vuex-persistedstate
Axios HTTP communication library https://github.com/axios/axios
Vuetify Vue UI library https://vuetifyjs.com/
vue-cookies A simple Vue.js plugin for handling browser cookies https://www.npmjs.com/package/vue-cookies
vue-chartjs Wrapper for Chart.js in vue https://vue-chartjs.org/
vue-cropperjs A Vue wrapper component for cropperjs https://www.npmjs.com/package/vue-cropperjs
sweetalert A beautiful replacement for messages https://sweetalert.js.org/guides/
vue-google-oauth2 Handling Google sign-in and sign-out for Vue.js applications https://www.npmjs.com/package/vue-google-oauth2

백엔드

Technology Dscription Official Website
Spring Boot Container + MVC framework https://spring.io/projects/spring-boot
Spring Security Authentication and authorization https://spring.io/projects/spring-security
Redis Distributed cache https://redis.io/
JWT JWT login support https://jwt.io/
MySQL RDBMS https://www.mysql.com/
JPA ORM framework https://spring.io/projects/spring-data-jpa
QueryDsl Java persistence query language http://www.querydsl.com/
Lombok Simplified object packaging tool https://projectlombok.org/
OAuth Authentication and authorization https://oauth.net/
Swagger-UI Document production tool https://github.com/swagger-api/swagger-ui
  • Spring security와 JWT(JSON Web Token)를 이용해 사용자 인증 및 인가 과정을 거쳐 웹 어플리케이션의 보안을 구성하였습니다.
  • 로그인한 사용자의 인증 토큰을 인-메모리 데이터 저장소인 Redis에 저장하여 로그인 및 로그아웃한 사용자를 관리하였습니다.
  • 인증 프로토콜 중 하나인 OAuth2(Open Authorization) 를 통해 구글 소셜 로그인을 구현하였습니다.
  • JPA(Java Persistence API) + Spring Data JPA 를 사용하여 객체들과 테이블, 레코드를 자동으로 관리하며 기본적인 쿼리를 자동으로 생성합니다.
  • QueryDSL을 이용해 타입에 안전한 방식으로 동적 쿼리를 생성해 SQL문을 문자열로 작성하거나 XML파일에 작성하지 않고 코드로 작성합니다.
  • 사용자의 성별과 연령대를 기반으로 피드 게시, 피드 좋아요, 피드 상세 조회, 검색 로그 데이터를 분석해 추천 서비스를 제공합니다.
  • AWS EC2와 Nginx를 이용하여 서비스를 배포하였습니다.

추후 적용

  • 추가로 docker를 사용하여 배포할 예정입니다.

:vhs: 시연 영상

  • 시연 영상
  • 로그인, 피드, 댓글, 좋아요, 팔로우, 알림 서비스
  • 콘테스트 서비스
  • 주류 서비스

👤 저자

:page_with_curl: 라이센스

  1. Copyright (c) 2015 Juns Alen
  3. Licensed under the Apache License, Version 2.0 (the "License");
  4. you may not use this file except in compliance with the License.
  5. You may obtain a copy of the License at
  7.      http://www.apache.org/licenses/LICENSE-2.0
  9. Unless required by applicable law or agreed to in writing, software
  10. distributed under the License is distributed on an "AS IS" BASIS,
  11. WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12. See the License for the specific language governing permissions and
  13. limitations under the License.

:books: 참고