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

목차

 

배포 과정

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

 

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

 

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