본문 바로가기

firebase

 (20)
27. Deploy - API Key Security 트위터 프로젝트에서 API key를 사용자에게 제공하고 있는데이는 Firebase를 사용자들의 브라우저를 통해 호출해야 하기 때문이다.이것은 API key가 사용자들의 브라우저가 다운받는 코드에 포함됨을 뜻한다.사용자들이 웹사이트에 접속할 때 다운받아지는 코드이다.API key를 숨기는 것은 무가치한 일이다.이 글에서는 API를 사용할 수 있는 장소가 제한되도록 만든다.다시 말하자면, 사용자는 API key 코드를 받게 되는데이전 글을 보면 Firestore Database와 Storage에 대한 보안을 확보했고이를 통해 API key 사용에 대한 보안 역시 확보할 수 있다. nwitter-reloaded 프로젝트를 선택 후 사용자 인증 정보 탭을 클릭한 후 Browser Key를 클릭한다.Bro..
26. Deploy - Security Rules(Storage) request.auth 값이 null이 아닌 경우에 read와 write를 허용한다.쓰기(write) 권한을 설정할때 사용자는 로그인한 상태이며업로드 하려는 resource(파일)의 사이즈가 2mb이하일때만 쓰기를 허용한다. 이미지를 보려면 로그인을 해야하고 이미지를 업로드하거나 삭제하는 것도 로그인한 상태에만 가능하다.그리고 이미지의 용량은 2 mega byre 이하일때만 업로드 할 수 있으며업로드를 받는 파일의 종류를 contentType을 통해 체크할 수 있다.
23. Deploy - Firebase Hosting [2] 22. Deploy - Firebase Hosting [1]Visual Studio Code 툴 터미널에서 firebase login 명령어 실행 시 firebase : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\DEV-002\AppData\Roaming\npm\firebase.ps1 파일을 로드할 수 없습니다. 자세한 내용은bonsimony.tistory.com 위의 글에서는 Firebase 초기작업까지 완료된 상태이며 프로젝트 내 firebase.json 파일이 생성되는걸 확인할 수 있다. dist 폴더를 업로드를 해야 하는데dist 폴더는 Vite가 우리의 application을 빌드하면서 만들어주는 폴더이다. pakage.json 파일에서 "script"에 "depoy"라는 새 ..
22. Deploy - Firebase Hosting [1] Visual Studio Code 툴 터미널에서 firebase login 명령어 실행 시 firebase : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\DEV-002\AppData\Roaming\npm\firebase.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https: //go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + firebase login + ~~~~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess해당 오류가 발생할 수 있는데 이..
21. User's Timeline profile.tsximport styled from "styled-components";import { auth, db, storeage } from "./firebase"import { useEffect, useState } from "react";import { getDownloadURL, ref, uploadBytes } from "firebase/storage";import { updateProfile } from "firebase/auth";import { collection, getDocs, limit, orderBy, query, where } from "firebase/firestore";import { ITweet } from "../components/timeline";import T..
20. USER PROFILE - User Avartar profile.tsximport styled from "styled-components";import { auth, storeage } from "./firebase"import { useState } from "react";import { getDownloadURL, ref, uploadBytes } from "firebase/storage";import { updateProfile } from "firebase/auth";const Wrapper = styled.div` display: flex; align-items: center; flex-direction: column; gap: 20px;`;const AvatarUpload = styled.label` width: 8..
19. TWEETING - Deleting tweets 1. 기존의 데이터를 모두 삭제한다. 2. 코드를 수정한다.tweet.tsximport styled from "styled-components";import { ITweet } from "./timeline";import { auth, db, storeage } from "../routes/firebase";import { deleteDoc, doc } from "firebase/firestore";import { deleteObject, ref } from "firebase/storage";const Wrapper = styled.div` display: grid; grid-template-columns: 3fr 1fr; padding: 20px; border: 1px solid ..
18. TWEETING - Realtime [2] 사용자가 자리를 비우거나 별도의 화면으로 이동하면 이벤트 리스너에 대한 구독을 취소한다.계속 켜두면 그만큼 비용을 지불하게 되기 때문이다. Realtime 기능을 사용하게 되면 데이터베이스에서 데이터를 읽을 때마다 비용을 지불하게 된다.비용이 크지 않고 무료로 많이 사용할 수 있지만 사용자가 보고 있으면 굳이 리스너를 쓸 필요가 없다. timeline.tsximport { collection, getDocs, limit, onSnapshot, orderBy, query } from "firebase/firestore"; import { useEffect, useState } from "react"; import { styled } from "styled-components";import { db } fr..

티스토리툴바