프로그래밍 잡동사니

Cleaning JS Home과 Auth 페이지를 리팩토링해보자 [src/components/PostFactory.js] import React, { useState } from "react"; import { v4 as uuidv4 } from "uuid"; import { storageService, dbService } from "fbase"; const PostFactory = (props) => { const [post, setPost] = useState(""); const [attachment, setAttachment] = useState(null); const onSubmit = async (event) => { event.preventDefault(); let attachmentUrl ..

Get My Own Posts 프로필 페이지에 내가 쓴 글 목록을 구현해보자 [src/components/Router.js] ... ... 사용자를 식별하기 위해 Profile에 userObj를 props로 넘겨준다 [src/routes/Profile.js] ... const getMyPosts = async () => { const posts = await dbService .collection("posts") .where("creatorId", "==", `${props.userObj.uid}`) .orderBy("createdAt", "desc") .get(); console.log(posts.docs.map((doc) => doc.data())); }; useEffect(() => { getMyP..

Preview Images 파일 저장을 위해 Firebase 콘솔에서 Storage를 활성화시켜주자 글에 이미지를 함께 올릴 때, FileReader API로 이미지 미리보기를 구현해보자 [src/routes/Home.js] ... const onFileChange = (event) => { const { target: { files }, } = event; const theFile = files[0]; const reader = new FileReader(); // 파일이 읽어지면 실행 reader.onloadend = (finishedEvent) => { console.log(finishedEvent); }; reader.readAsDataURL(theFile); // 파일을 읽기 시작 }; ... ..

Posting Firebase에서 Firestore Database를 테스트 모드로 생성해준다 Firebase Cloud Firestore 문서🔽 Cloud Firestore | Firebase Documentation 유연하고 확장 가능한 NoSQL 클라우드 데이터베이스를 사용해 클라이언트 측 개발 및 서버 측 개발에 사용되는 데이터를 저장하고 동기화하세요. firebase.google.com Firestore Database는 NoSQL 형태로, collection(폴더)과 document(문서)로 구성된다 [src/fbase.js] ... firebase.initializeApp(firebaseConfig); export const firebaseInstance = firebase; export c..

Using Firebase Auth [jsconfig.json] { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } 최상단에 해당 파일을 추가하면 모든 파일 경로를 src 폴더 기준 절대 경로로 입력할 수 있다 import firebase from "fbase"; * 이름이 겹치면 import가 꼬일 수 있기 때문에 firebase.js -> fbase.js로 변경 [src/fbase.js] import firebase from "firebase/compat/app"; import "firebase/compat/auth"; ... firebase.initializeApp(firebaseConfig); export const authServic..

Firebase Firebase를 활용해 React 환경에서 Realtime CRUD와 Authentication System을 구현해보자! Firebase의 다음 4가지 기능을 활용할 것이다 Cloud Firestore / Cloud Storage / Authentication / Hosting * Google의 Firebase나 AWS의 Amplify 등 Backend as a Service는 어디까지나 플랫폼의 서버를 빌려서 쓰는 것이기 때문에, 간단한 토이 프로젝트나 실제 서비스의 데모 버전에만 적합하다 Firebase Pricing🔽 Firebase Pricing 무료로 Firebase를 시작하고 전 세계 수백만 명의 사용자로 확장하세요. 무료 할당량 소진 후 사용한 만큼만 비용을 지불하면 됩니..

Firebase 쓰는 이유 Firebase는 서버를 대신 만들어주는 서비스로 개발 시간을 대폭 단축시킨다 정형화된 작업을 생략해 서버 코드 없이 풀스택 개발이 가능하다! 장점 프론트엔드 지식만 있어도 바로 서비스 제작 가능 (AWS에 비해서) DB콘솔을 다루기 용이하다 프로젝트 규모에 따른 서버/DB 스케일업이 자동 DB데이터가 기본적으로 리얼타임 싱크 (실시간 동기화) 단점 일정 사용량을 넘을 경우, 대충 AWS보다 20% 비쌈 Setting 1. Firebase Console에 구글 아이디로 로그인하고 프로젝트를 생성해준다 Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 2. 좌..