firebase(3)
-
[개인 포트폴리오] [트위터 클론 SNS Deli] 분석 Part. 13 'timeline.tsx'
timeline.tsximport styled from "styled-components";import { Timestamp, collection, deleteDoc, doc, limit, onSnapshot, orderBy, query } from "firebase/firestore";import { db, storage } from '../firebase';import Tweet from "./post"; // 트윗 컴포넌트 가져오기import { Unsubscribe } from "firebase/auth";import { useEffect, useState } from "react";import { getDownloadURL, ref } from "firebase/storage";import { ..
2024.07.08 -
[개인 포트폴리오] [트위터 클론 SNS Deli] 분석 Part. 12 'post-tweet-form.tsx'
post-tweet--form.tsximport { addDoc, collection, updateDoc } from "firebase/firestore";import { useState } from "react";import styled from "styled-components";import { auth, db, storage } from "../firebase";import { getDownloadURL, ref, uploadBytes } from "firebase/storage";// 폼 스타일 정의const Form = styled.form` display: flex; flex-direction: column; gap: 10px;`;// 텍스트 에어리어 스타일 정의const TextArea..
2024.07.08 -
[개인 포트폴리오] [트위터 클론 SNS Deli] 분석 Part. 11 'post.tsx'
post.tsximport React, { useState, useEffect } from 'react';import styled from 'styled-components';import { auth, db } from '../firebase';import { doc, getDoc, updateDoc } from 'firebase/firestore';import { Timestamp } from "@firebase/firestore";import { Link } from 'react-router-dom';import Modal, { Styles } from "react-modal";import { media } from '../media-query-file';// 날짜를 표시하는 스타일드 컴포넌트cons..
2024.07.08