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

2. 지역 커뮤니티 시지라이프 Nextjs + Firebase 웹앱 개발 - 구글 전화번호 인증전화번호 인증을 위하여 네비게이션 바에 로그인 버튼을 추가하였습니다. 로그인 버튼 클릭 하면 전화번호 인증 Dialog가 팝업 됩니다. 인증 Dialog는 Tailwind CSS + Headless UI 조합으로 모달을 구현합니다. 이를 위하여 Headless UI를 설치합니다.npm install @headlessui/react전화번호 인증은 다음과 같이 동작합니다. 인증 다이얼로그에서 사용자가 전화번호를 입력클라이언트(Firebase SDK)가 Google 서버에 전화번호 인증 요청Firebase가 해당 번호에 OTP(6자리 숫자)를 전송사용자는 OTP를 입력Firebase가 OTP 유효성 검사를 하고 사용..

1. 지역 커뮤니티 시지라이프 Nextjs + Firebase 웹앱 개발 - 프로젝트 만들기1. 프로젝트 만들기npx create-next-app@latest next-tailwind-firebase-order-app --typescript √ Would you like to use ESLint? ... No √ Would you like to use Tailwind CSS? ... Yes √ Would you like your code inside a `src/` directory? ... No √ Would you like to use App Router? (recommended) ... Yes √ Would you like to use Turbopack for `next dev`? ...

Nuxt + Tailwind CSS v4 - 자주 사용하는 UI 컴포넌트1. 프로젝트 만들기> npx nuxi@latest init my-nuxt-tailwind-app ✔ Which package manager would you like to use? npm ✔ Initialize git repository? Yes ✔ Would you like to install any of the official modules? @nuxt/ui – The Intuitive UI Library powered by Reka UI and Tailwind CSS > cd my-nuxt-tailwind-app > npm install > npm install -D tailwindcss @tailwind..

우리 동네 시스템 로깅지역 커뮤니티 웹앱 '우리 동네' 서비스에서는 아래 두 가지 의도로 로그를 삽입하였습니다.문제 원인 분석을 위하여 전역 에러 핸들러 설정이 로그의 목적은 운영상 에러가 발생하면에러의 원인을 신속하게 발견하여 처리하기 위함입니다.핵심 기능인 주문 관련 페이지 진입과 버튼 클릭 로그 남기기이 로그의 목적은 온라인 주문 관련하여 웹/앱에서 발생하는 사용자의 활동 기록(log) 을 수집하고 분석하여,고객의 이동 경로, 사용 패턴, 선호도, 이탈 원인 등을 파악하고자 하는 것입니다. 물론 서비스가 현실적으로 사용하는 시스템이 아니므로현실적으로 운영하는 서비스라면 운영자와의 협의를 통해로깅에 대한 고도화가 필요합니다. 그리고 로그를 남겼으면 로그를 조회할 수 있어야 합니다.로그 조회 기능을 추..

시스템 운영 로그의 중요성 웹 서비스에 있어서 시스템 로그(system log)는 단순한 기록이 아니라,서비스의 건강 상태를 보여주는 청진기이자, 문제 해결을 위한 블랙박스입니다. 시스템 운영에서 로그는 정말 핵심 자산으로운영 안정성과 문제 해결, 서비스 개선을 위한 거의 모든 활동에 필수적이라 할 수 있죠. https://my-project-bd617.web.app/ 우리 동네 - Vue + Firebase 사이드 프로젝트 my-project-bd617.web.apphttps://github.com/inetsos/downtown GitHub - inetsos/downtown: 동네 포털 - Vue 3 + Firebase동네 포털 - Vue 3 + Firebase. Contribute to inetso..

QR 코드 스캔하여 온라인 주문각 매장의 온라인 주문 URL을 QR코드로 만들어 비치를 하면고객은 QR 코드를 스캔하여 온라인 주문 페이지에 접속하여 주문할 수 있습니다.테이크아웃 커피 매장에서는 QR 코드가 음료 주문 키오스크를 대신할 수도 있습니다. QR 코드를 매장에 비치하려면 생성한 QR 코드를 다운로드 할 수 있어야 합니다. 이를 위하여 QR 코드를 생성하고 다운로드할 수 있는QR 코드 생성기를 구현합니다. 카카오나 네이버 등에 QR 코드 리더기가 있습니다.이를 통하여 QR 코드를 읽어 온라인 주문 페이지에 접속할 수도 있지만,자체적으로 QR 코드 리더기를 만들어 앱에 넣어 두는 것도 좋습니다. https://my-project-bd617.web.app/ 우리 동네 - Vue + Firebase..

GPS 기반 가까운 매장 위치 찾기웹앱에서도 GPS를 사용할 수 있습니다. 가까운 매장 찾기는 GPS로 현재 위치를 구해서 현재 위치의 위도, 경도와 등록된 매장의 위도, 경도 정보를 사용하여 현재 위치에서 매장까지의 거리를 계산할 수 있습니다. https://my-project-bd617.web.app/ 테스트 배포 우리 동네 - Vue + Firebase 사이드 프로젝트 my-project-bd617.web.app https://github.com/inetsos/downtown GitHub - inetsos/downtown: 동네 포털 - Vue 3 + Firebase동네 포털 - Vue 3 + Firebase. Contribute to inetsos/downtown development by..

쿠폰 관리 시스템10,000원 주문 금액에 대해 1,000원 할인 쿠폰을 발급하는 시스템을 생각합니다. 주문 결제를 할 때 장바구니에서 사용할 수 있는 쿠폰의 목록을 보입니다.주문 총금액 10,000원당 1,000원 할인 쿠폰을 발행하는 것이니쿠폰의 목록에는 1,000원 할인 쿠폰 여러장이 보입니다.이들 쿠폰 중 한장 또는 여러장을 선택하여 할인된 금액으로 결제할 수 있습니다. 결제를 하면 할인을 뺀 최종 결제 금액과 발급한 쿠폰의 수를 비교하여 새로 쿠폰을 발급해야 한다면 1,000원 할인 쿠폰을 발급합니다. 마이페이지에서 내 쿠폰을 조회할 수 있습니다.내 쿠폰에는 쿠폰이 발급된 날짜와 사용날짜 그리고 사용 가능 여부를 확인할 수 있습니다. https://github.com/inetsos/downtow..

PWA 설정 추가PWA(Progressive Web App)를 설정하는 과정은 웹 앱에 앱처럼 설치 가능한 기능과 오프라인 동작 기능을 추가하는 일입니다. https://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 ✅ PWA 설정 방법 (전체 흐름)manifest.webmanifest 작성service-worker.js 구현HTML에 manifest와 meta 태그 추가웹 서버 HTTPS 구성 (또는 loca..

네이버 로그인 - 소셜 로그인1. 네이버 인증 전체 흐름 ChatGPT의 말:네이버 로그인 인증은 OAuth 2.0 기반으로 동작하며, 사용자가 네이버 계정으로 로그인하면 access token을 발급받고, 이를 통해 사용자 정보를 가져오는 방식입니다. 이후 Firebase와 연동할 수도 있습니다. https://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 ✅ 네이버 로그인 전체 흐름 요약[1] 사용자 → 로그..