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

1. 디자인과 개발, 두 마리 토끼를 잡고 싶은 이유첫 만남: 직업전문학교 ‘프론트엔드 프로그래밍’ 과목에서 HTML5/CSS3를 배우며 즉각적인 반응에 매료되었다.JS의 매력: JavaScript로 페이지가 입체적으로 변하는 순간에 큰 흥미를 느꼈다.디자인 감각: 그림 그리기·꾸미기를 좋아하는 성향과, 공부할수록 확장되는 기능 구현의 재미가 시너지를 냈다.2. 학점은행제로 개발자의 길을 선택한 계기포지션 제안: 포트폴리오 덕분에 제안은 받았으니, “내 노력의 증빙”이 필요한 상황이었다.학력 한계 극복: 요구 학력 미충족 통보 후 “2025년 7월 졸업” 목표를 세워 학점은행제 학위 취득을 결심했다.3. 첫 포트폴리오에서 얻은 깨달음‘M-Archive’ 마리오 홍보 페이지: 마진·패딩 손수 조정하며 반응..

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