트위터(React, TypeScript, Firebase, Vite) (26) 썸네일형 리스트형 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.. 17. TWEETING - Realtime [1] Firestore Database에서 실시간으로 쿼리의 변경 사항을 수신한다. onSnapshot 함수는 데이터베이스 및 쿼리와 실시간 연결을 생성하고해당 쿼리에 새 요소가 생성되거나 요소가 삭제되었거나또는 업데이트 됐을 때 쿼리에 알려준다. 문서를 한번 가져오는 것이 아닌 쿼리에 리스너를 추가한다.그리고 삭제,편집 또는 생성되었다는 알림을 받으면 해당 쿼리의 문서를 쭉 보면서 필요한 데이터를 추출한다. map을 통해 배열로 만들고 데이터를 추출한 후 tweet 객체를 생성하고tweet 객체 배열을 tweets 변수에 넣은 다음에 이 상태를 저장한다. timeline.tsximport { collection, getDocs, onSnapshot, orderBy, query } from "firebase/.. 16. TWEETING - Fetching Timeline 15. Uploading Images최종 완료된걸 정리한 글은 제일 아래에 있습니다 ^.^ Firebase Storage도 Firebase Database처럼 "Collection/Document/Collection/..."와 같은 폴더 구조와 비슷하다. post-tweet-form.tsximport { addDoc, collection } from "firebasebonsimony.tistory.com이전 글에서는 데이터를 어떻게 저장하고 업데이트를 해보았다. Firestore Database에서 어떻게 데이터를 쿼리를 통해 찾아오도록 한다. home.tsximport styled from "styled-components";import PostTweetForm from "../component.. 15. TWEETING - Uploading Images 최종 완료된걸 정리한 글은 제일 아래에 있습니다 ^.^ Firebase Storage도 Firebase Database처럼 "Collection/Document/Collection/..."와 같은 폴더 구조와 비슷하다. post-tweet-form.tsximport { addDoc, collection } from "firebase/firestore";import { useState } from "react";import styled from "styled-components"import { auth, db, storeage } from "../routes/firebase";import { ref, uploadBytes } from "firebase/storage";const Form = styled... 14. Tweeting to Firestore Cloud Firestore은 사용할 NoSQL 데이터베이스이다. 1. Firebase 사이트 내 Console에서 Colud Firestore와 Storage를 세팅한다. 2. Firebase 데이터베이스와 스토리지에 대한 엑세스 권한을 얻는다.import { initializeApp } from "firebase/app";import { getAnalytics } from "firebase/analytics";import {getAuth} from "firebase/auth";import { getStorage } from "firebase/storage";import { getFirestore } from "firebase/firestore";/* 도메인, api ket 등 여러가지 키 값.. 13. TWEEING - Post Tweet Form App.tsximport { useEffect, useState } from 'react'import { createBrowserRouter, RouterProvider} from 'react-router-dom';import Layout from './components/layout';import Home from './routes/home';import Profile from './routes/profile';import Login from './routes/login';import CreateAccount from './routes/create-account';import styled, { createGlobalStyle } from 'styled-components';import reset fro.. 12. TWEETING - Navigation Bar HeroiconsHeroicons is a collection of MIT open source interface icons for web and app development. Icons are free, no attribution required. Icons by @steveschoger. Website by @username_ZAYDEK.heroicons.devSVG vector icon 찾을 수 있는 웹사이트(리액트 프로젝트에서 바로 쓸 수 있는 아이콘 찾기 가능) layout.tsximport { Link, Outlet, useNavigate } from "react-router-dom";import styled from "styled-components";import { aut.. 이전 1 2 3 4 다음
