트위터 클론 ‘Deli’ 회고 — React + Firebase (2. App.tsx)

 

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 Layout from "./component/layout";
import Home from "./routes/home";
import Profile from "./routes/profile";
import Login from "./routes/login";
import CreateAccount from "./routes/create-account";
import LoadingScreen from "./component/loading-screen";
import ProtectedRoute from "./component/protected-route";
import GlobalStyle from './component/global-styles';

• react-router-dom: SPA 라우팅
• styled-components & reset: 전역·기본 스타일
• firebase.auth: 인증 상태 확인

---

3. 라우터 설정

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <ProtectedRoute>
        <Layout />
      </ProtectedRoute>
    ),
    children: [
      { path: "", element: <Home /> },
      { path: "profile/:userId", element: <Profile /> },
    ],
  },
  { path: "/login", element: <Login /> },
  { path: "/create-account", element: <CreateAccount /> },
]);

• ProtectedRoute로 인증된 사용자만 접근 가능
• 기본 홈, 프로필, 로그인·계정 생성 페이지 등록

---

4. 전역 스타일 정의

const GlobalStyles = createGlobalStyle`
  ${reset};
  * { box-sizing: border-box; }
  body {
    background-color: #fff;
    color: #000;
  }
`;

const Wrapper = styled.div`
  height: 100vh;
  display: flex;
  justify-content: center;
`;

• reset + box-sizing으로 브라우저 간 일관성 확보
• Wrapper로 로딩·앱 화면 중앙 정렬

---

5. App 컴포넌트 & 로딩 처리

function App() {
  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    auth.onAuthStateChanged(() => setLoading(false));
  }, []);

  return (
    <Wrapper>
      <GlobalStyle />
      <GlobalStyles />
      {isLoading ? <LoadingScreen /> : <RouterProvider router={router} />}
    </Wrapper>
  );
}

• isLoading: 인증 체크 전 로딩 스크린
• onAuthStateChanged 콜백에서 로딩 해제

 

 

“다음 회차에서는 회원가입 로직과 로그인 코드를 분석해볼게요. 기대해주세요!