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

메뉴 카테고리 관리 테이크아웃 커피점의 메뉴 관리를 생각해 봅니다. 음료의 종류가 생각보다 많습니다.음료 외에 토핑, 사이드 메뉴까지 있습니다. 우선 메뉴 관리를 위하여 카테고리를 등록하여 카테고리 별로 메뉴를 볼 수 있도록 하겠습니다. 카테고리를 등록하면 등록한 카테고리는 리스트에 나타납니다. 카테고리 리스트의 카테고리 옆 삭제 아이콘을 누르면 카테고리가 삭제 됩니다. 카테고리의 순서는 메뉴를 나타낼 때 카테고리 순서로 나타내기 위해 필요합니다.카테고리 리스트에서 카테고리를 드래그하면 순서를 변경할 수 있습니다. https://github.com/inetsos/downtown GitHub - inetsos/downtown: 동네 포털 - Vue 3 + Firebase동네 포털 - Vue 3 + Fire..

테이크아웃 커피점 온라인 주문 개발 준비테이크아웃 커피점의 메뉴 관리를 위하여 몇가지 UI 컴포넌트 (UI Components)들에 대해 알아 봅니다. 각 메뉴는 카테고리별로 분류하여 보여 주고,표 형식으로 메뉴 데이터를 나타내고,메뉴의 순서를 변경하기 위하여 드래그 앤 드롭(Drag & Drop) 기능을 사용합니다. GitHubhttps://github.com/inetsos/downtown GitHub - inetsos/downtown: 동네 포털 - Vue 3 + Firebase동네 포털 - Vue 3 + Firebase. Contribute to inetsos/downtown development by creating an account on GitHub.github.com v-expansion-p..

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