[개인 포트폴리오] [트위터 클론 SNS Deli] 분석 Part. 2 'App.tsx'

App.tsx

// React와 ReactDOM을 사용하여 React 컴포넌트를 DOM에 렌더링하기 위한 모듈을 가져옵니다.
import { RouterProvider, createBrowserRouter } from "react-router-dom";
// 페이지 레이아웃, 각 라우트에 해당하는 컴포넌트들을 가져옵니다.
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";
// 스타일링을 위해 styled-components를 가져옵니다.
import { createGlobalStyle, styled } from "styled-components";
// 전역 스타일을 정의하는 컴포넌트를 가져옵니다.
import GlobalStyle from './component/global-styles';
// CSS 리셋을 위한 styled-reset 모듈을 가져옵니다.
import reset from "styled-reset";
// React의 훅을 가져옵니다.
import { useEffect, useState } from "react";
// 로딩 화면 컴포넌트를 가져옵니다.
import LoadingScreen from "./component/loading-screen";
// Firebase 인증 모듈을 가져옵니다.
import { auth } from "./firebase";
// 보호된 라우트를 위한 컴포넌트를 가져옵니다.
import ProtectedRoute from "./component/protected-route";

// 브라우저 라우터를 생성하고, 각 경로에 대한 컴포넌트를 정의합니다.
//createBrowserRouter : 함수
const router = createBrowserRouter([
  {
    // 루트 경로, 로그인한 사용자만 접근할 수 있도록 ProtectedRoute로 감쌈.
    path: "/",
    element: <ProtectedRoute><Layout /></ProtectedRoute>,
    children: [
      {
        // 기본 경로로 이동 시 Home 컴포넌트를 렌더링합니다.
        path: "",
        element: <Home />,
      },
      {
        // 프로필 경로, 특정 사용자 ID를 포함하는 경로
        path: "profile/:userId",
        element: <Profile />,
      },
    ],
  },
  {
    // 로그인 경로
    path: "/login",
    element: <Login />,
  },
  {
    // 계정 생성 경로
    path: "/CreateAccount",
    element: <CreateAccount />,
  },
]);

// 전역 스타일 정의
const GlobalStyles = createGlobalStyle`
  ${reset}; // CSS 리셋을 적용하여 브라우저 간 일관성을 유지합니다.
  * {
    box-sizing: border-box;
  }
  body {
    background-color: white;
    color: white;
  }
`;

// 화면 중앙에 컨텐츠를 배치하기 위한 Wrapper 스타일 컴포넌트 정의
const Wrapper = styled.div`
  height: 100vh;
  display: flex;
  justify-content: center;
`;

function App() {
  // 로딩 상태를 관리하기 위한 상태 정의
  // useState를 사용하면 상태 변수와 해당 변수를 업데이트하는 함수를 쌍으로 반환합니다. 
  const [isLoading, setLoading] = useState(true);

  // Firebase 인증 상태 변화를 감지하여 로딩 상태를 업데이트
  // auth.onAuthStateChanged는 Firebase Authentication에서 제공하는 함수로, 사용자의 인증 상태가 변경될 때 호출되는 콜백 함수를 등록합니다.
  // init 함수는 일반적으로 초기화를 담당하는 함수로, 필요한 설정이나 준비 작업을 수행합니다. 특히 Firebase Authentication과 관련하여 init 함수는 보통 사용자의 인증 상태를 확인하고 초기 상태를 설정하는 역할을 합니다.
  // async 키워드는 JavaScript에서 비동기(독립적) 함수를 정의하는 데 사용됩니다. async 함수는 항상 Promise를 반환하며, 함수 내에서 await 키워드를 사용하여 Promise가 해결될 때까지 기다릴 수 있습니다. 이를 통해 비동기 코드를 보다 동기적인 방식으로 작성할 수 있게 해줍니다.
  const init = async () => {
    auth.onAuthStateChanged(() => {
      setLoading(false);
    });
  };

  // 컴포넌트가 마운트될 때 init 함수를 호출
  // init : 함수. 컴포넌트가 마운트될 때 필요한 초기화 작업을 수행합니다.
  // useEffect는 함수형 컴포넌트에서 사이드 이펙트를 처리하기 위해 사용됩니다. 예를 들어, 데이터를 가져오거나 DOM을 직접 조작하거나 구독을 설정할 때 사용할 수 있습니다. useEffect는 컴포넌트가 마운트될 때, 언마운트될 때, 또는 특정 상태나 속성이 변경될 때 실행될 수 있습니다.
  // 마운트란? : 마운트란 React에서 컴포넌트가 처음으로 DOM에 삽입되는 과정을 의미합니다.
  useEffect(() => {
    init();
  }, []);

  return (
    <Wrapper>
      <GlobalStyle />
      <GlobalStyles />
      {/* 로딩 중이면 로딩 화면을, 그렇지 않으면 라우터를 렌더링 */}
      {isLoading ? <LoadingScreen /> : <RouterProvider router={router} />}
    </Wrapper>
  )
}

export default App;

 

1. 모듈 임포트:
   • react-router-dom: React Router를 사용하여 SPA(Single Page Application)의 라우팅을 처리합니다.
   • styled-components: CSS-in-JS 라이브러리로 컴포넌트별 스타일링을 제공합니다.
   • firebase: Firebase를 사용하여 인증 및 데이터베이스 기능을 통합합니다.
2. 라우터 설정:
   • createBrowserRouter: 브라우저 기반의 라우터를 생성합니다.
   • 각 경로에 해당하는 컴포넌트를 정의하여 페이지를 구성합니다.
3. 전역 스타일 설정:
   • createGlobalStyle: 전역 스타일을 정의합니다. 여기에는 CSS 리셋과 기본 스타일 설정이 포함됩니다.
4. Wrapper 컴포넌트:
   • 화면 중앙에 컨텐츠를 배치하기 위한 스타일 컴포넌트입니다.
5. App 컴포넌트:
   • isLoading 상태를 사용하여 로딩 중인지 아닌지를 관리합니다.
   • init 함수는 Firebase 인증 상태 변화를 감지하여 로딩 상태를 업데이트합니다.
   • useEffect 훅을 사용하여 컴포넌트가 마운트될 때 init 함수를 호출합니다.
   • isLoading 상태에 따라 로딩 화면 또는 라우터를 렌더링합니다.

이 코드는 React와 Firebase를 사용하여 SPA를 구축합니다. 인증 상태에 따라 보호된 라우트를 설정하고 전역 스타일을 적용합니다.

 

Q. 컴포넌트란?

컴포넌트(Component)는 사용자 인터페이스(UI)의 독립적이고 재사용 가능한 단위입니다. 컴포넌트는 일반적으로 웹 애플리케이션에서 하나의 기능적 요소를 나타내며, 복잡한 UI를 작은 부분들로 나눌 수 있게 해줍니다.

컴포넌트의 주요 특징은 다음과 같습니다:

1. 재사용성: 동일한 컴포넌트를 여러 곳에서 재사용할 수 있습니다.
2. 독립성: 다른 컴포넌트와 독립적으로 동작하며, 개별적으로 관리할 수 있습니다.
3. 구조화: 복잡한 UI를 작은 단위로 나눠서 쉽게 관리하고 유지보수할 수 있습니다.

Q. 렌더링이란?

웹 개발에서는 브라우저가 HTML, CSS, JavaScript 코드를 해석하여 사용자에게 보이는 웹 페이지를 생성하는 과정을 의미합니다. 이 과정은 크게 두 가지로 나뉩니다:

1. 서버 사이드 렌더링(SSR, Server-Side Rendering): 서버에서 HTML을 생성하여 클라이언트(브라우저)에 전달하는 방식입니다. 초기 로딩 속도가 빠르며, 검색 엔진 최적화(SEO)에 유리합니다.
2. 클라이언트 사이드 렌더링(CSR, Client-Side Rendering): 클라이언트 측에서 JavaScript를 사용하여 HTML을 동적으로 생성하는 방식입니다. SPA(Single Page Application)에 자주 사용되며, 페이지 전환이 빠릅니다.