그랜파 개발자의 풀스택 공부

Firebase Hosting으로 실제 웹 서비스 오픈까지 진행합니다.서비스 오픈까지 개발을 진행하면서 계속 수정, 변경될 것입니다.회원등록, 로그인 기능 구현Vue 3 + Vuetify + Firebase + 상태관리(Pinia)를 사용하여 이메일/비밀번호 회원등록 및 로그인 기능을 구현합니다. 회원은 Firebase Authentication에 이메일과 비밀번호로 등록합니다.그러므로 회원의 비밀번호는 앱에 저장하지 않습니다. 이메일과 비밀번호 외에 회원의 추가 정보(이름, 소개)는 firestore의 profiles 컬렉션에 저장합니다. 로그인 상태를 관리합니다.앱은 자동으로 로그인을 하고 로그인 상태에 따라 상단의 메뉴를 다르게 보여줍니다. 1. 라이브러리 설치라우터, firebase, 상태..

Firebase Hosting으로 실제 웹 서비스 오픈까지 진행합니다.서비스 오픈까지 개발을 진행하면서 계속 수정, 변경될 것입니다.Vue 3 + Vite + Vuetify 3 + JS 프로젝트 세팅1. 프로젝트npm create vite@latest booking-portal -- --template vue cd booking-portal 2. 의존성 설치npm install vuetify@^3 @mdi/font sass vite-plugin-vuetify3. vite.config.jsimport { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import vuetify from 'vite-plugin-vuetify'export defa..

Firebase Hosting으로 실제 웹 서비스 오픈까지 진행합니다.서비스 오픈까지 개발을 진행하면서 계속 수정, 변경될 것입니다. 여러 업체가 함께 사용하는 예약 포털을 Vue, Vuetify, Firebase를 활용해 개발합니다.이 조합은 빠른 개발, 실시간 기능, 확장성에 매우 적합합니다.아래는 시스템 아키텍처와 주요 기능을 고려한 설계 및 개발 로드맵입니다.🔧 기술 스택프론트엔드: Vue 3 + Vuetify 3 + Vue Router + Pinia (상태관리)백엔드/DB: FirebaseAuthentication: 이메일/소셜 로그인Firestore: 예약, 사용자, 업체 정보 저장Cloud Functions (선택): 예약 승인, 알림 등 백엔드 로직Firebase Storage: 프로필 ..

Eclipse에서 Spring Boot 프로젝트 생성🔹 사전 준비JDK 17 이상Eclipse IDE (최신)Maven 설치 (또는 Eclipse 내장 Maven 사용)MySQL 실행 중🔹 Step 1: Spring 프로젝트 생성Eclipse 실행 → File → New → Spring Starter Project프로젝트 정보 입력:Name: reservationType: MavenPackaging: JarJava Version: 17Language: JavaGroup: com.exampleArtifact: j reservationDependencies 추가:Spring WebSpring Data JPASpring Boot DevTools (선택)Spring SecurityMySQL DriverLom..

프로젝트npm init vue@latestProject name (target directory):│ reservationcd reservationnpm installnpm install vue-router@4 vuetify@3 axios plugins - axios.js// src/plugins/axios.jsimport axios from 'axios'import { useAuthStore } from '@/stores/authStore'axios.interceptors.request.use((config) => { const auth = useAuthStore() if (auth.token) { config.headers.Authorization = `Bearer ${auth.token}..

홈 회원가입로그인예약하기 회원 - 예약조회, 예약 취소 관리자 - 예약 조회, 승인, 거부 예약 날짜 선택

회원 예약 조회 및 취소회원은 자신의 예약을 조회할 수 있습니다.자신의 예약을 취소할 수 있습니다. ‘예약조회’를 누르면, 예약 조회 페이지로 이동하고, 자신의 모든 예약을 볼 수 있습니다.각 예약에는 ‘예약 취소’ 버튼이 있어 이것을 누르면 예약이 취소 됩니다. - 프론트엔드 -UserReservations.vue 내 예약 목록 예약 ID: {{ reservation.id }} - {{ reservation.date }} - 상태: {{ statusText(reservation.status) }} 메모: {{ reservation.memo }} 시간 슬롯: {{ slot...