1. App.tsx 파일 개요 이 글에서는 ‘Deli’ 앱의 진입점인 `App.tsx` 파일을 살펴봅니다. - 전역 스타일 정의 - 라우터(ProtectedRoute 포함) 설정 - 로딩 화면 처리 2. 모듈 임포트import { RouterProvider, createBrowserRouter } from "react-router-dom";import { createGlobalStyle, styled } from "styled-components";import reset from "styled-reset";import { useEffect, useState } from "react";import { auth } from "./firebase";// 레이아웃·페이지·컴포넌트import Layou..

1. 프로젝트 개요서비스명: Deli (트위터 클론)주요 기능:게시글 작성·삭제좋아요(‘함께하고 싶어요’)프로필 편집실시간 타임라인Live Demo: https://nwitter-reloaded-ad7cb.web.app/2. 개발 동기 & 목표사용자 경험 향상을 목표로 React + TypeScript 실전 연습Nomad Coders 강의(React Firebase for Beginners) 수강 후,강사 스타일과 커리큘럼이 잘 맞아 바로 착수https://nomadcoders.co/nwitter/lobby 트위터 클론코딩 – 노마드 코더 Nomad CodersReact Firebase for Beginnersnomadcoders.co Firebase를 처음 써보며 “간편하다!”는 첫 인상3. 기술 스택..

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 { ..

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..

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..