코딩 정보/React

[React] 배포 과정에 대해서 알아보자

꽁이꽁설꽁돌 2024. 8. 24. 18:51
728x90
반응형

목차

     

    배포 과정

    배포 과정은 크게 다음과 같다.

     

    1. 테스트 코딩하기

     

    2. 코드 최적화하기

     

    3. 서버에 업로드할 파일 생성하기

     

    4. 서버에 파일 업로드하기

     

     

    지연 로딩

    배포하기 전 최적화 방법 중 하나인 지연 로딩에 대해 알아보자

     

    초기에 모든 페이지의 코드를 로딩하면 첫 페이지의 로딩이 느려진다.

    따라서 이를 위해서 페이지에 접근했을 때 동적으로 컴포넌트를 로딩하는 것이다.

    import { createBrowserRouter, RouterProvider } from "react-router-dom";
    
    //import BlogPage, { loader as postsLoader } from "./pages/Blog";
    import HomePage from "./pages/Home";
    // import PostPage, { loader as postLoader } from "./pages/Post";
    import RootLayout from "./pages/Root";
    import { lazy, Suspense } from "react";
    
    //동적으로 import하는 함수를 인자로 받음 그후 컴포넌트로 사용 가능
    const BlogPage = lazy(() => import("./pages/Blog"));
    const PostPage = lazy(() => import("./pages/Post"));
    
    const router = createBrowserRouter([
      {
        path: "/",
        element: <RootLayout />,
        children: [
          {
            index: true,
            element: <HomePage />,
          },
          {
            path: "posts",
            children: [
              {
                index: true,
                element: (
                  <Suspense fallback={<p>Loading...</p>}>
                    <BlogPage />
                  </Suspense>
                ),
                loader: () =>
                  import("./pages/Blog").then((module) => module.loader()),
              },
              {
                path: ":id",
                element: (
                  <Suspense fallback={<p>Loading...</p>}>
                    <PostPage />
                  </Suspense>
                ),
                loader: ({ params }) =>
                  import("./pages/Post").then((module) =>
                    module.loader({ params })
                  ),
              },
            ],
          },
        ],
      },
    ]);
    
    function App() {
      return <RouterProvider router={router} />;
    }
    
    export default App;

     

    블로그 페이지에 들어온 후 script파일이 불러진 것을 볼 수 있다.

     

    서버에 업로드할 파일 생성하기

    $  npm run build

     

    이런식으로 최적화된 코드들이 생성된다.

     

    웹사이트 배포하기

    파이어베이스로 진행을 해보고자 한다.

     

    1. 아래 링크를 들어가 로그인한다.

    https://firebase.google.com/?hl=ko

     

    Firebase | Google's Mobile and Web App Development Platform

    개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요.

    firebase.google.com

     

    2. 새 프로젝트를 만들어 준다.

     

    3. firebase hoisting에 들어가 준다.

     

    4. 배포하고자 하는 파일에서 명령어를 써주자

    npm install -g firebase-tools
    //yarn을 쓴다면
    yarn add firebase-tools

     

    그 후 다음 명령어를 이용해 로그인해 준다.

    firebase login

     

    혹시 yarn을 쓴다면 앞에 yarn만 붙여주면 된다.

    firebase init

     

    다음과 같이 답해주자

     

    다음과 같이 두개의 파일이 생긴 것을 볼 수 있다.

     

    그 후에 다음 명령어로 firebase에 올려주면 된다.

    firebase deploy

     

    url을 통해 잘 들어가지는 것을 볼 수 있다.

     

     

    만약 호스팅 멈추고 싶다면 다음 명령어를 입력해 주자

    firebase hosting:disable

     

    반응형