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

4. 시지라이프 Nextjs + Firebase로 웹앱 개발 - 네이버 로그인

https://next-tailwind-firebase-order-app.vercel.app 지역 커뮤니티 - 시지 라이프시지 라이프 시지 지역 커뮤니티next-tailwind-firebase-order-app.vercel.appSNS 로그인 - 네이버 로그인1. 네이버 로그인네이버 로그인을 구현할 때의 전체 개발 시퀀스는 아래와 같은 단계로 진행됩니다.프론트엔드(웹 또는 앱)와 백엔드(Firebase Functions)를 연동하는 구조입니다.✅ 네이버 로그인 개발 시퀀스 (Redirect 방식 기준)1. 네이버 개발자 센터 애플리케이션 등록https://developers.naver.com/apps/애플리케이션 등록로그인 플랫폼: 웹서비스 URL: 예) https://myapp.comCallback U..

3. 시지라이프 Nextjs + Firebase로 웹앱 개발 - 카카오 로그인

https://next-tailwind-firebase-order-app.vercel.app 지역 커뮤니티 - 시지 라이프시지 라이프 시지 지역 커뮤니티next-tailwind-firebase-order-app.vercel.app시지 라이프 - SNS 로그인SNS 로그인은 사용자가 네이버, 카카오, 구글, 페이스북 같은 소셜 계정을 이용해 웹사이트나 앱에 간편하게 로그인할 수 있도록 해주는 기능이에요. 복잡한 회원가입 없이 클릭 몇 번으로 로그인할 수 있어서 사용자 경험을 크게 향상시켜주죠. ‘order app’은 SNS 로그인으로 카카오 로그인과 네이버 로그인을 연동합니다. 1. 사용자 정보 상태 관리사용자가 로그인 하면앱은 로그인 한 사용자의 정보를 전역적으로 사용하게 됩니다.이를 위하여 사용자 정..

https://next-tailwind-firebase-order-app.vercel.app 지역 커뮤니티 - 시지 라이프시지 라이프 시지 지역 커뮤니티next-tailwind-firebase-order-app.vercel.app시지라이프 - 전화번호 인증전화번호 인증을 위하여 네비게이션 바에 로그인 버튼을 추가하였습니다. 로그인 버튼 클릭 하면 전화번호 인증 Dialog가 팝업 됩니다. 인증 Dialog는 Tailwind CSS + Headless UI 조합으로 모달을 구현합니다. 이를 위하여 Headless UI를 설치합니다.npm install @headlessui/react전화번호 인증은 다음과 같이 동작합니다. 인증 다이얼로그에서 사용자가 전화번호를 입력클라이언트(Firebase SDK)가 Go..

https://next-tailwind-firebase-order-app.vercel.app 지역 커뮤니티 - 시지 라이프시지 라이프 시지 지역 커뮤니티next-tailwind-firebase-order-app.vercel.app시지라이프 - 온라인 주문 프로젝트 만들기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..

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..