AlcoholHeaven

프로젝트 소개

성인들의 즐거운 음주 문화를 지향하는 사이트

좋은 주류, 안주, 장소, 친구를 추천하는 커뮤니티

팀원 🚶

SSAFY 서울 8반 김현태, 최광림

기획

클라이언트의 요청을 예상한 서버의 응답 시스템

DATABASE의 구조

시작 가이드 ⭐

Requirements

For building and running the application ou need :

Java 17

Node.js 20.13.1

Npm 9.2.0

Installation

$ git clone https://github.com/KIMHT98/AlcoholHeaven.git
$ cd AlcoholHeaven

BackEnd

$ cd AlcoholHeaven
$ mvn clean install
$ mvn spring-boot:run

FrontEnd

$ cd alcohol-heaven
$ npm install
$ npm run dev

💡 Kakao Map과 Chat GPT의 API_KEY가 필요합니다

Stacks 💻

Environmnent

Config

Development

Communication

화면 구성 🔎

실제 구현한 화면과 실행 순서

구현기능	실제화면
로그인 회원가입
MainPage
술 찾기
안주 추천
친구 추천
공지사항

주요 기능 💡

D3 라이브러리를 활용한 지도 구현

Chat GPT를 활용한 자동 안주 추천 시스템

KaKao Map을 활용한 지역 주변 맛집 추천 시스템

Architecture 🌱

BackEnd - FrontEnd

요청과 응답 (Request / Response)

• HTTP 요청: FrontEnd는 BackEnd로 데이터를 보내기 위해 HTTP 요청 보냄. GET, POST, PUT, DELETE 등의 메서드를 사용
• HTTP 응답: BackEnd는 FrontEnd의 요청을 처리한 후, 그 결과를 HTTP 응답으로 반환

RESTful API

표준 HTTP 메서드: RESTful API는 GET, POST, PUT, DELETE 등의 표준 HTTP 메서드를 사용하여 리소스를 조작

AJAX와 Fetch API

FrontEnd는 AJAX(Asynchronous JavaScript and XML) 기술을 사용하여 백엔드와 비동기적으로 통신

Vue LifeCycle Hooks

beforeCreate: 인스턴스가 초기화된 후 데이터 관찰 및 이벤트 설정이 이루어지기 전에 호출

created: 인스턴스가 생성된 후 호출

beforeMount: 템플릿을 렌더링하여 가상 DOM을 생성한 후, 실제 DOM에 마운트되기 직전에 호출

mounted: 컴포넌트가 실제 DOM에 삽입된 후 호출

beforeUpdate: 반응형 데이터가 변경되어 DOM을 업데이트하기 직전에 호출

updated: 데이터 변경으로 인해 가상 DOM이 다시 렌더링되고 실제 DOM에 패치된 후 호출

beforeDestroy: 컴포넌트가 파괴되기 직전에 호출

destroyed: 컴포넌트가 파괴된 후 호출

기타 추가 / 문의 사항

📬 choikl3115@naver.com

📬 kht19684@gamil.com