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

블로그 글쓰기계정을 만들고, 사용자 인증, 글의 카테고리까지 만들었습니다.이제 글쓰기 기능을 구현해야 할 때입니다.1. 글쓰기 요구 사항글을 쓰는 시나리오를 생각해 봅니다.우선 로그인해야 합니다. 회원만 글을 쓸 수 있기 때문입니다.Menu Drawer에 글쓰기 메뉴 항목 외에,글쓰기 페이지를 열기 위한 아이콘도 화면 하단에 둘 생각입니다.글쓰기 아이콘을 누르면 글쓰기 페이지가 열립니다.글쓰기 페이지에 등록된 카테고리를 나타내어 선택할 수 있도록 합니다.글의 제목과 내용을 쓰고 저장을 누르면 글이 저장됩니다.2. 글의 데이터 항목사용자는 카테고리를 선택하고,글의 제목과 내용을 쓴 후 저장합니다.글이 저장될 때는 어떤 것들이 추가될까요?글의 카테고리, 제목, 내용 외에도글쓴이의 userId, 이름, 글을 ..

블로그 카테고리 관리블로그에서 카테고리를 사용하면 다음과 같은 장점이 있습니다.1. 콘텐츠 정리 및 구조화비슷한 주제의 글을 그룹화하여 블로그가 체계적으로 정리됨예: "프로그래밍", "라이프스타일", "여행", "요리" 등사용자 입장: 원하는 주제를 빠르게 찾을 수 있음블로그 운영자 입장: 콘텐츠를 쉽게 관리 가능2. 사용자 경험(UX) 향상방문자가 관심 있는 글을 쉽게 찾도록 유도카테고리를 클릭하면 관련 글 목록을 바로 확인 가능방문자가 블로그에서 더 오래 머무를 가능성이 증가3. SEO(Search Engine Optimization) 최적화카테고리별로 검색엔진에 최적화된 URL 구조 생성 가능예:- https://example.com/category/vue- https://example.com/ca..

구글 계정으로 로그인OAuth(Open Authorization)는 제3자 서비스에서 사용자의 비밀번호를 공유하지 않고 인증 및 권한을 위임할 수 있도록 하는 표준 프로토콜입니다. 예를 들어, 웹사이트나 앱에서 Google, Facebook, GitHub 등의 계정으로 로그인하는 기능이 OAuth를 사용한 사례입니다.OAuth의 핵심 개념1. 사용자의 로그인 정보를 직접 제공하지 않음앱이 직접 사용자의 아이디/비밀번호를 저장하지 않음대신, OAuth 제공자(예: Google, Facebook) 를 통해 사용자를 인증2. 제한된 권한 부여사용자가 특정 권한(예: 이메일 접근, 프로필 정보, 파일 읽기/쓰기 등) 을 앱에 허용할 수 있음앱이 사용자 대신 특정 작업을 수행할 수 있도록 토큰(Token)을 발급..

계정 설정Firebase Authentication은 사용자 계정 생성만 처리합니다.기본 정보 외에 사용자 관련 추가 정보가 필요하고 이것을 저장하려면 Firestore와 함께 사용해야 합니다. 사용자 관련 추가 데이터는 계정 생성을 하면서 계정 설정 정보도 함께 생성하여,Firestore의 profiles 컬렉션에 저장합니다. 계정 설정 항목은 다음과 같습니다.userId : 로그인 Id입니다. 계정 만들기에 등록된 정보입니다.email : 로그인할 때 이메일입니다. 이미 계정 생성에서 등록된 정보이므로 계정 설정에서는 입력하지 않습니다.name : 사용자의 이름 또는 별명입니다.blogName : 사용자의 블로그 이름입니다.aboutMe : 사용자의 현재 상태 정보입니다.createdAt : 계정 정..

myBlog는 서버 없이 강력한 웹/모바일 앱을 개발할 수 있는 Firestore를 클라우드 데이터베이스로 사용합니다.Cloud Firestore는 Google Firebase에서 제공하는 NoSQL 클라우드 데이터베이스 입니다.Firestore란?Cloud Firestore는 Google Firebase에서 제공하는 NoSQL 클라우드 데이터베이스로,실시간 데이터 동기화 및 확장성 높은 데이터 관리를 지원합니다.특히 Firebase Authentication, Firebase Functions, Firebase Hosting 등과 쉽게 연동할 수 있어,웹 & 모바일 앱 개발에 많이 사용됩니다.Firestore의 주요 특징1. NoSQL 문서 기반 데이터베이스테이블이 아닌 컬렉션(Collection)과 ..

로그인에 성공을 하면 user 객체를 돌려 받고 이것을 state의 user 변수에 저장합니다.이 user 변수가 null인지 확인을 하면 로그인 상태인지 로그아웃 상태인지 확인할 수 있습니다. 로그인 상태에 따라 Drawer의 메뉴 항목을 다르게 할 수 있습니다.또 AppBar의 로그인, 로그아웃 아이콘 버튼을 로그인 상태에 따라 나타낼 수 있습니다.로그인 창에 비밀번호 리셋 기능을 둡니다.비밀번호 리셋은 비밀번호를 잊었을 때 사용합니다.로그인로그인은 Firebase Authentication에서 제공하는 메서드 signInWithEmailAndPassword를 사용하며,로그인을 성공하면 UserCredential 객체를 받아 이것을 state의 user 변수에 저장합니다.  // --로그인 asy..

myBlog의 사용자 인증에 사용되는 Firebase Authentication의 메서드들 입니다.로그인 - signInWithEmailAndPassword로그아웃 - signOut자동 로그인 - onAuthStateChanged비밀번호 재설정 - sendPasswordResetEmail로그인 - signInWithEmailAndPasswordFirebase Authentication에서 제공하는 메서드 createUserWithEmailAndPassword로사용자의 이메일과 비밀번호를 기반으로 새로운 계정을 생성하였습니다.이렇게 생성된 계정에 대해 로그인은 signInWithEmailAndPassword를 사용합니다.signInWithEmailAndPassword는 Firebase Authenticat..

계정 만들기Firebase Authentication - createUserWithEmailAndPassword계정 만들기는 Firebase Authentication에서 제공하는 createUserWithEmailAndPassword를 사용합니다.createUserWithEmailAndPassword는 Firebase Authentication에서 제공하는 메서드로,이메일과 비밀번호를 기반으로 Firebase 프로젝트의 인증 시스템에 새로운 사용자 계정을 생성합니다.이 메서드를 호출하면 Firebase는 제공된 이메일과 비밀번호로 인증된 새 계정을 생성하고,이 데이터는 Firebase가 자체적으로 제공하는 Firebase Authentication 전용 데이터베이스에 저장하고,Firebase Authe..

App.vueVuetify를 사용하여 App Bar, Footer, Drawer가 포함된 기본 Layout을 구성하였습니다.이 UI는 모바일과 데스크톱 환경 모두에서 잘 작동하며,Drawer는 사이드 메뉴로, App Bar는 상단 헤더로, Footer는 하단에 고정된 레이아웃으로 구성됩니다. Drawer 메뉴 항목myBlog에서 Drawer 메뉴 항목은 Vue Router와 연결되어, 사용자가 메뉴를 클릭할 때 애플리케이션의 경로를 변경하고 새로운 페이지를 로드합니다..Drawer 메뉴와 Router의 연결 구조1. Vue Router 설정Vue Router는 애플리케이션의 경로(path)와 해당 경로에 렌더링할 컴포넌트를 매핑합니다.각 메뉴 항목은 특정 경로(path)와 연결됩니다.2. Drawer 메..

현대 웹 애플리케이션은 점점 더 복잡해지고 있으며, 사용자 경험을 향상시키기 위해 데이터와 상태를 효과적으로 관리하는 것이 필수적입니다. 상태 관리와 컴포넌트 간 데이터 공유는 이런 복잡성을 해결하는 핵심적인 개념입니다.myBlog의 상태 관리를 위하여 vuex를 사용합니다.Vuex는 Vue.js 애플리케이션에서 상태(state) 관리를 위한 공식 라이브러리입니다.앱 상태 관리의 중요성상태란?애플리케이션의 현재 상태를 나타내는 데이터입니다.예: 로그인 여부, 사용자 프로필, 글 목록, 필터 옵션 등.상태 관리의 필요성1. 애플리케이션의 일관성 유지:애플리케이션의 상태가 여러 컴포넌트에서 사용될 경우, 상태 관리 없이 각각 독립적으로 상태를 업데이트하면 일관성이 깨질 수 있습니다.예: 장바구니에 아이템을 ..