본문 바로가기

트위터(React, TypeScript, Firebase, Vite)

 (26)
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을 통해 체크할 수 있다.
25. Deploy - Security Rules(Firestore Database) 트위터 프로젝트를 만들때 이론적으로 back-end가 없기 때문에front-end단에서 누군가가 Firebase function들을 호출할 수 있다.다시 말해서, back-end가 없기 때문에 모든 것이 front-end를 통해 실행되고 있다.그래서 누군가 코드를 보고 reverse-enginerring를 시도해서 font-end를 해킹할 수 있다.기본적으로, rule은 어떤 상태에 대해서 작성하는 것인데그 상태로 인해서 사용자가 database나 storage 파일을 읽고 쓰는것을 허용할지 차단할지 결정한다. allow read, write: 사용자의 읽기(read), 쓰기(write)를 허용하는 역할을 한다. if request.time : 만약 현재시각이 2023.5.16 보다 이르면 true 값을..
24. Deploy - Firebase Hosting [3] 22. Deploy - Firebase Hosting [1]Visual Studio Code 툴 터미널에서 firebase login 명령어 실행 시 firebase : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\DEV-002\AppData\Roaming\npm\firebase.ps1 파일을 로드할 수 없습니다. 자세한 내용은bonsimony.tistory.com 23. Deploy - Firebase Hosting [2]22. Deploy - Firebase Hosting [1]Visual Studio Code 툴 터미널에서 firebase login 명령어 실행 시 firebase : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\DEV-002\AppData\Roam..
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..

티스토리툴바