그랜파 개발자의 프론트엔드 공부

9. PWA가 뭐야?

🌐 PWA(Progressive Web App)란?PWA(Progressive Web App) 는 웹 기술(HTML, CSS, JavaScript)을 사용하여 개발하지만,네이티브 앱과 유사한 경험을 제공하는 웹 애플리케이션입니다.📌 쉽게 말해?✅ 웹사이트인데 앱처럼 동작하는 것!✅ 브라우저에서 실행되지만 설치 가능✅ 오프라인에서도 사용 가능✅ 푸시 알림, 백그라운드 실행 지원🔥 PWA의 핵심 기능1️⃣ 설치 가능 (Add to Home Screen)사용자는 웹사이트를 앱처럼 설치할 수 있음아이콘이 홈 화면에 추가됨2️⃣ 오프라인 지원 (Service Worker 사용)인터넷이 없어도 캐시된 데이터를 사용하여 실행 가능3️⃣ 푸시 알림 (Push Notifications)모바일 앱처럼 푸시 알림을 받..

32. [개발] 로그인, 자동 로그인, 로그인 상태 - Vue3 Firebase 프로젝트

Pinia Store - 로그인, 자동 로그인, 로그인 상태상태 관리(store) 를 활용하면 사용자 정보, 채팅방 목록, 메시지 상태 등을 더 효율적으로 관리할 수 있습니다.Vue 3에서는 Vuex 대신 Pinia를 권장하니까 Pinia를 사용합니다.authStore.js의 Pinia Store의 Login() 함수를 사용하여 로그인 인증을 하고checkAuthState() 함수를 main.js에서 호출하여 자동 로그인을 합니다.로그인 상태에 따라 UI를 다르게 나타낼 수 있습니다.로그인authStore.js에 Pinia Store를 정의하였습니다.Pinia Store 사용를 사용하여 로그인 기능을 구현합니다.- authStore.js에서 Pinia Store를 정의하고 login() 함수에서 Fire..

31. [개발] Pinia를 사용한 사용자 인증(Store) 구현 - Vue3 Firebase 프로젝트

Pinia를 사용한 사용자 인증(Store) 구현Pinia를 사용하여 사용자 인증(Store) 을 구현한 코드입니다.계정 만들기, 로그인, 로그아웃, 자동 로그인 기능을 포함하고 있습니다.📌 주요 기능✅ register(email, password, name) → 회원가입✅ login(email, password) → 로그인✅ logout() → 로그아웃✅ checkAuthState() → 자동 로그인 (onAuthStateChanged 사용)📌 Pinia 인증 Store (useAuthStore.js)import { defineStore } from "pinia";import { ref } from "vue";import { auth, createUserWithEmailAndPassword, sig..

Pinia를 이용한 Vue 앱의 상태 관리Vue에서는 전역 상태 관리를 위해 Vuex가 널리 사용되었지만,Vue 3에서는 Pinia가 공식적으로 추천되는 상태 관리 라이브러리가 되었습니다.Pinia는 더 직관적이고 사용하기 쉽도록 설계되었으며,Composition API와 완벽하게 호환됩니다.1. Pinia란?Pinia는 Vue 3의 상태 관리 라이브러리로, 다음과 같은 특징을 가지고 있습니다. ✅ 간단한 API → Vue의 Composition API와 자연스럽게 통합✅ 타입스크립트 지원 → 타입스크립트 친화적✅ 직관적인 스토어 구조 → state, getters, actions를 통해 상태 관리✅ SSR(서버사이드 렌더링) 지원✅ 플러그인 지원 및 확장성2. Pinia 설치Vite 기반의 Vue 3 ..

서버리스 백엔드우리는 서버가 없습니다. 즉 백엔드가 없습니다.Firebase의 Firestore를 사용하면 백엔드 없이도 강력한 기능을 구현할 수 있다고 합니다.🔥 Firestore란?Cloud Firestore는 Firebase에서 제공하는 NoSQL 클라우드 데이터베이스야.실시간 데이터 동기화, 확장성 높은 구조, 간단한 API 덕분에 Vue, React 같은 프론트엔드 앱에서 백엔드 없이도 강력한 기능을 구현할 수 있어.🎯 Firestore 주요 특징1️⃣ 실시간 동기화 (Real-time Sync)Firestore의 onSnapshot()을 사용하면 데이터가 변경될 때 자동으로 업데이트됨.→ 채팅 앱, 협업 도구, 실시간 피드 같은 기능을 쉽게 구현 가능.2️⃣ NoSQL 문서(Document..

실시간 채팅앱 VSignal 소스 코드실시간 채팅앱 VSignal 개발을 위하여프로젝트를 만들고,Vuetify를 설치 및 설정하였고,Material Design Icon을 사용하기 위해서 Vuetify 아이콘 설정을 하였습니다.Firebase 설치 및 설정을 하였고,UI를 위한 컴포넌트 AppLayout.vue 와 App.vue를 만들었고계정 만들기 기능을 구현하였습니다.지금까지 구현한 소스 코드입니다.1. 프로젝트 폴더 구조chat-app├─ .env├─ index.html├─ package-lock.json├─ package.json├─ public│ └─ vite.svg├─ README.md├─ src│ ├─ App.vue│ ├─ assets│ │ └─ vue.svg│ ├─ compone..

Firebase AuthenticationFirebase Authentication은 Google의 Firebase에서 제공하는 서비스로,웹 및 모바일 애플리케이션에 사용자를 인증하고 관리하는 데 도움을 줍니다.이 서비스는 여러 인증 방법을 제공하여 사용자가 로그인할 수 있도록 해줍니다.Firebase Authentication을 통해 다양한 인증 방식을 손쉽게 구현할 수 있어,앱의 사용자 인증을 보다 안전하고 효율적으로 관리할 수 있습니다.Firebase Authentication을 설정하고 '계정 만들기' 를 구현 합시다.1. createUserWithEmailAndPassword 설명createUserWithEmailAndPassword는 Firebase Authentication에서 제공하는 메서..

Vuetify로 UI 만들기Vuetify를 사용하여 App Bar(헤더), Drawer(사이드 메뉴), Footer(푸터) 가 포함된 UI를 만들어 봅시다.더하여 Material Design Icon도 사용합니다.1. 기본 레이아웃 만들기 (AppLayout.vue)📌 구성 요소1. App Bar (헤더)앱 제목과 네비게이션 메뉴 버튼우측에는 로그아웃 버튼2. Drawer (사이드 메뉴)홈 : 이미 만들어진 1:1 채팅방 리스트채팅방을 선택하면 채팅방으로 들어갑니다.채팅방 만들기 : 새로운 채팅방을 만듭니다.계정만들기 : 사용자의 계정을 생성합니다.계정 설정 : 계정 정보 외에 사용자 정보를 설정합니다.로그인3. Main Content (메인 컨텐츠 영역)현재 선택된 화면이 표시됨4. Footer (푸..

실시간 채팅앱 VSignal - 프로젝트 만들기Vue3와 Firebase를 사용하여 1:1 실시간 채팅앱을 개발합니다.프로젝트 만들기부터 새로 시작합니다. 1. 프로젝트 만들기npm create vite@latest chat-app --template vue > npx> create-vite chat-app vue◇ Select a framework: Vue◇ Select a variant: JavaScript cd chat-app npm install2. Vuetify 설치🌟 Vuetify란?Vuetify는 Vue.js를 위한 Material Design 기반 UI 프레임워크입니다.Google의 Material Design 가이드라인을 따르는 고급 UI 컴포넌트를 제공해서,빠르게 반응..

--- 주의 요청 ---지금까지 ChatGPT에게 질문하여 답을 받은 내용으로 코팅을 진행하여 왔습니다.그러나 종종 불합리하거나 잘못된 정보들이 있었고,이들에 대해서 별도로 ChatGPT에게 질문을 해서 답을 받아 수정하고 있습니다.이렇게 실제 코딩하면서 기능을 구현하고 있어서개발되는 각 코드나 내용은 블로그 게시글의 내용과 차이가 있습니다.사실 ChatGPT가 제공하는 코드에 대해서는 "충분한 검증" 이 필요합니다. 실시간 1:1 채팅앱 VSignal 개발 계획이제까지 ChatGPT에게 배운 내용으로 코딩을 진행하여 왔고.이를 통하여 실시간 채팅 기능에 대해서는 이해를 하였으므로우리의 앱이 전체적으로 어떤 구조를 가질지도 고민해 봐야겠습니다.우리의 실시간 채팅앱 VSignal은 우선 1:1 채팅만 구현..