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. 기술 스택..

App.css@font-face { font-family: 'Pretendard-Regular'; src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); font-weight: 400; font-style: normal;}/* 레이아웃 전체 */body, html, #root { margin: 0; padding: 0; width: 100vw; height: 100vh; font-family: 'Pretendard-Regular'; display: flex; overflow-y: scroll; /* 세로 스크롤 가능 */ ::-we..

import styled from "styled-components";import { collection, getDoc, limit, onSnapshot, orderBy, query,} from "firebase/firestore";import React, { useState, useEffect } from "react";import Modal from "react-modal";import Post from "./post";import { auth, db } from "../firebase";Modal.setAppElement("#root");const Wrapper = styled.div` @media (max-width: 600px) { flex-direction: column; /..

import { addDoc, collection, updateDoc, serverTimestamp } from "firebase/firestore";import React, { useState } from "react";import styled from "styled-components";import { auth, db, storage } from "../firebase";import { getDownloadURL, ref, uploadBytes } from "firebase/storage";import ReactQuill from 'react-quill';import { useNavigate } from "react-router-dom";import 'react-quill/dist/quill.snow..

import React, { useState, useEffect, useCallback } from "react";import styled from "styled-components";import { auth } from "../firebase";import { updateDoc, doc, getDoc, deleteDoc } from "firebase/firestore";import { getDownloadURL, ref } from "firebase/storage";import { db, storage } from "../firebase";import { onAuthStateChanged } from "firebase/auth";// 스타일 컴포넌트 정의const Wrapper = styled.div`..