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

3. Vue3 프로젝트 - 실시간 채팅앱 VSignal 1:1 채팅

VSignal - 1:1 채팅로그인을 하고 채팅을 시작합니다.가장 단순한 1:1 채팅에 대해 생각해 봅니다.채팅이란 것이 상대가 있어야 하는데,상대가 접속하기를 마냥 기다리는 것도 그리 좋아 보이지 않습니다.실시간 채팅이라고는 하지만,SMS 처럼 상대가 접속하지 않았더라도 메시지를 보내는 것도 고려해 봅시다.실시간 채팅앱 - 1:1 채팅나의 말:로그인 성공 후 채팅방 페이지로 이동하는 기능을 추가해줘ChatGPT의 말:좋아! 로그인 성공 후 채팅방 페이지(/chat)로 이동하도록 기능을 추가해볼게.1. 채팅방 페이지(ChatView.vue) 생성먼저, 로그인 후 이동할 채팅방 페이지를 만들어야 해.src/views/ChatView.vue 파일을 생성하고 아래 코드를 추가해줘. 채팅방 ..

2. Vue3 프로젝트 - vite 빠른 프론트엔드 빌드 도구

프론트엔드 빌드 도구프론트엔드 빌드 도구는 웹 애플리케이션의 코드를 최적화하고 배포할 수 있도록 변환하는 도구입니다.개발자는 코드를 작성하기 편리한 형태로 유지하고, 빌드 도구는 이를 브라우저가 이해할 수 있는 형태로 변환해 줍니다.Vue 3 + Firebase 프로젝트에서는 Vite가 가장 적합하다고 합니다.나의 말:vite가 뭐야?ChatGPT의 말:🚀 Vite란?Vite는 Vue, React 등 최신 프레임워크에서 사용하는 빠른 프론트엔드 빌드 도구야. 기존의 Webpack보다 훨씬 빠르게 개발 서버를 실행하고, 파일 변경 시 즉각적으로 반영하는 기능이 강력하지.🔍 Vite의 특징1. 빠른 개발 서버기존 Webpack은 프로젝트 전체를 번들링하지만, Vite는 필요한 파일만 즉시 변환해서 실행해..

1. Vue3와 Firebase 프로젝트 - 실시간 채팅앱 VSignal 개발

VSignal - Vue로 개발하는 실시간 채팅앱새로운 나홀로 프로젝트를 시작합니다.Vue와 Firebase로 실시간 채팅 앱을 만들어 보려고 합니다.ChatGPT에게 물어보면서 프로젝트를 진행합니다.나의 말:vue3와 vuetify 그리고 firebase로 실시간 채팅앱을 만들고 싶어.ChatGPT의 말:좋아! Vue 3 + Vuetify + Firebase 조합이면 UI도 깔끔하고 기능도 강력한 실시간 채팅앱을 만들 수 있어.프로젝트 기본 설정Vue 3 + Vite 프로젝트 생성Vuetify 설치 및 설정Firebase SDK 설정 (Auth + Firestore + Storage)라우터 및 상태 관리 설정 (Pinia 또는 Vuex)우선 프로젝트 세팅부터 도와줄까, 아니면 특정 기능부터 구현하고 싶..