지연 로딩 추가하기

• Lazy Loading
  : 해당 코드가 필요할 때만 그 특정 코드를 로딩하는 것입니다.

• App.js

   const NewQuote = React.lazy(() => import("./pages/NewQuote"));
   const QuoteDetail = React.lazy(() => import("./pages/QuoteDetail"));
   const NotFound = React.lazy(() => import("./pages/NotFound"));
   const AllQuotes = React.lazy(() => import("./pages/AllQuotes"));

  기존 import 문에서 벗어나

  모드를 미리 다운로드하기 위해
  미리 실앻하지 않고 필요할 때만 실행하는 거죠.

  페이지가 많고 각 페이지에 많은 컴포넌트와
  많은 복잡한 로직이 있을 경우 레이지 로딩이 진가를 발휘합니다.

  웹사이트의 초기 로딩을 훨씬 빠르게 만들어주죠! 모든 코드가 한 번에 로딩되지 않고, 필요한 코드만 로딩되기 때문이죠.

  생산을 위한 코드 작성

npm run build 

배포 시작하기

아주 중요한 한 가지 바로 싱글 페이지 웹사이트 입니다.

호스팅 하기 위해서 파이어베이스를 써보도록 하겠습니다! 사용하기 쉽다는 것이죠!

Firebase에서 호스팅을 선택하여

터미널에 명령창에

npm install -g firebase-tools

firebase login

firebase init

를 순서대로 입력합니다!

라우팅 문제 탐색 및 배포 완료하기

클라이언트는 브라우저를 사용하는 사용자입니다. 서버는 원격 머신입니다.
사용자는 웹사이트에 대한 요청 Request를 합니다. 이 요청에 전체 uRL이 입려됩니다. 그리고 서버가 다시 응답을하고 응답에는 HTML CSS JS가 포합됩니다. 도메인 뒤의 url을 통해 알맞은 컴포넌트를 가져와 렌더링하여 스크린에 보여질 것입니다. 이것은 응답받았을 떄만 일어나는 일입니다.

현재 우리는 도메인 뒤에 url 입력을 통해서 다른 컴포넌트 페이지로 이동이 가능하지만 이것을 무시하겠습니다!

URL과 URL에 있는 경로가 서버에서 무시되도록요

하지만 여기서는 url을 무시하도록 하겠습니다!

파이어베이스가 해결할 수 있습니다!

 Configure as a single-page app (rewrite all urls to /index.html)?

Y를 선택하면 설정됩니다!

그리고

firebase deploy

를 입력하면 완성입니다!
https://react-prep-6658a.web.app
가 생성이 되고, 만약 페이지를 내리고싶다면

firebase hosting:disable 

을 입력하면 됩니다!