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

미용실 예약 커스터마이징예약 관리 시스템을 고도화합니다.미용실에 대해 커스터마이징을 진행해 봅시다. 미용실 예약을 할 때 서비스를 선택할 수 있도록 합니다.이를 위하여 서비스를 등록, 수정, 삭제할 수 있는 관리 기능을 구현합니다. ‘상점 보기’에서 서비스업 상점의 경우 ‘서비스(메뉴) 관리’ 링크가 추가되었습니다.서비스 관리 페이지에서 등록된 서비스 리스트를 볼 수 있고서비스를 등록할 수도 있고,등록된 서비스를 선택하면 서비스를 수정할 수도 있습니다. 서비스 리스트 기능은 서비스 등록에도 사용되므로상점의 관리자가 아닌 경우 ‘서비스 등록’ 버튼이 보이지 않습니다.이를 위하여 현재 로그인한 회원이 상점의 관리자인지 확인할 수 있어야 합니다.상점의 관리자는 company.ownerId가 현재 로그인한 u..

상점 위치 보기 개선상점의 주소로 네이버 지도 위에 표시를 하였을 때 실제 위치와 차이가 납니다.검색 API는 네이버 검색 결과를 뉴스, 백과사전, 블로그, 쇼핑, 웹 문서, 전문정보, 지식iN, 책, 카페글 등 분야별로 볼 수 있는 API입니다. 그 외에 지역 검색 결과와 성인 검색어 판별 기능, 오타 변환 기능을 제공합니다.지역 검색은 검색 API를 사용해 네이버 지역 서비스에 등록된 업체 및 기관을 검색한 결과를 반환하는 RESTful API입니다. 지역 검색 결과를 XML 형식 또는 JSON 형식으로 반환합니다. API를 호출할 때는 검색어와 검색 조건을 쿼리 스트링(Query String) 형식의 데이터로 전달합니다.https://developers.naver.com/docs/serviceapi..

업체 위치 보기Home의 업체 리스트에서 업체 정보에 주소가 있습니다.주소 옆에 '지도 보기' 버튼이 있고 이것을 누르면 네이버 지도로 위치를 보여 줍니다. index.html src/router/index.js// src/router/index.jsimport { createRouter, createWebHistory } from 'vue-router'import Home from '../views/Home.vue'import Register from '../views/Register.vue'import Profile from '../views/Profile.vue'import Login from '../views/Login.vue'const routes = [ { pat..

네이버 지도 SDK 연동네이버 지도 SDK 연동은 다음 3단계로 구성됩니다:✅ 1. 클라이언트 ID 발급네이버 클라우드 플랫폼에 로그인합니다.콘솔 → Application > 등록 → "Maps" 서비스 선택Client ID (JavaScript용) 발급✅ 2. SDK 스크립트 삽입Vue 앱의 public/index.html 또는 에 다음 스크립트를 추가:YOUR_CLIENT_ID는 위에서 발급한 클라이언트 ID로 교체submodules=geocoder는 주소 검색 기능 포함 시 필요✅ 3. 지도 초기화 코드 작성mounted 시점에 다음처럼 사용할 수 있습니다: const map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595..

업체 주소 등록업체 등록 정보에 주소를 추가합니다.주소 API는 Kakao 주소 검색 API (우편번호 서비스)를 사용합니다.ChatGPT가 Kakao 주소 검색 API가 좋다고 합니다. 업체 정보에 주소 필드를 추가하는 이유는지도에 업체의 위치를 보여주기 위해서입니다.지도는 네이버 지도를 사용할 예정입니다. index.html src/views/RegisterCompany.vue - 업체 등록 (주소 등록 추가됨) 업체 등록 업종 선택 {{ item }} ..

주소 api 연동은 어떤 것들이 있지?ChatGPT의 말:주소 API 연동을 위해 사용할 수 있는 대표적인 서비스는 다음과 같습니다:✅ 1. Kakao 주소 검색 API (우편번호 서비스)가장 널리 사용됨, UI 제공.JavaScript SDK로 쉽게 연동 가능.무료이며 상업적 사용도 가능 (단, 약관 확인 필요).주소 자동완성, 도로명/지번/건물명 검색 지원.🔗 공식 문서: Kakao 우편번호 서비스 https://postcode.map.daum.net/guide✅ 2. 네이버 주소 검색 API지도 API와 연동되어 사용 가능.주소보다는 위치기반 POI 검색 중심.일반 주소 검색보다는 목적지가 있는 검색에 적합.🔗 네이버 개발자 센터https://developers.naver.com/docs/map..

Firebase Hosting으로 실제 웹 서비스 오픈까지 진행합니다.서비스 오픈까지 개발을 진행하면서 계속 수정, 변경될 것입니다.업체 예약 관리개선 내용예약 정보에 회원 이름을 추가하였습니다.업체에서 예약 조회를 할 때 고객의 이름이 보이는 것이 좋다고 생각했기 때문입니다.stores/reservationStore.js // 예약 등록 const submitReservation = async (form) => { if (!authStore.user) throw new Error('로그인이 필요합니다.') const reservationNumber = await getNextReservationNumber() const data = { userId: authStore.us..

vue-router에서 useRouter과 useRoute의 차이점은?ChatGPT의 말:useRouter()와 useRoute()는 둘 다 Vue Router 4 (Vue 3용)에서 사용하는 훅(hook)이지만, 용도와 반환값이 다릅니다.✅ useRouter()역할: 라우터 인스턴스에 접근.주로 사용하는 기능: router.push, router.replace, router.back() 등 라우팅을 조작할 때 사용.예시:import { useRouter } from 'vue-router'const router = useRouter()const goToHome = () => { router.push('/') // 경로 이동}✅ useRoute()역할: 현재 활성화된 라우트(Route)에 대한 정보에 ..

Firebase Hosting으로 실제 웹 서비스 오픈까지 진행합니다.서비스 오픈까지 개발을 진행하면서 계속 수정, 변경될 것입니다.예약 보기(회원), 예약 기능 개선예약 기능의 개선이 있습니다.예약 정보에 업체 이름을 추가하였고,예약 번호를 추가하였습니다. 내가 예약한 내역을 볼 수 있습니다.그리고 ‘대기중’인 예약은 취소할 수 있습니다. 예약 기능 개선예약 업체와 예약 번호를 추가하였습니다.그리고 UI도 개선되었습니다. 예약 번호의 경우 자동 증가하는 숫자인데,Firestore의 경우 자동증가하는 숫자 필드를 지원하지 않습니다.그래서 별도의 counters 컬렉션의 reservationCounter 문서에 current 필드를 사용합니다.예약번호를 지정하기 위해 이 current 필드의 값을 가져와 ..

Firebase Hosting으로 실제 웹 서비스 오픈까지 진행합니다.서비스 오픈까지 개발을 진행하면서 계속 수정, 변경될 것입니다.예약하기업체 등록 정보에 영업 시간을 추가하였습니다.영업 시간에 따라 영업 상태 (영업중, 영업 종료)를 표시할 수 있습니다.회원은 홈페이지에서 업체를 선택하여 예약을 할 수 있습니다.예약 페이지가 열릴 때 라우터 쿼리로 받은 comapnyId로 업체 정보를 가져와 화면에 필요한 정보들을 나타냅니다.예약 시간은 30분 단위의 타임슬롯을 선택하고,하나의 예약에 타임 슬롯을 여러개 선택할 수 있습니다.업체 정보에 영업 시간 추가영업 시작 시간과 영업 종료 시간을 등록합니다.업체 정보 보기 또는 예약 화면에서 영업 시간을 보여주고, 영업중인지 여부를 표기합니다.src/views/..