React 배포하기

학습 목표

• Deployment Steps & Pitfalls
• Server-side Routing vs Client-side Routing

Deploying React Apps: From Development To Production

Deployment Steps & Pitfalls

Deployment Steps

1. Test Code
2. Optimize Code
3. Build App for Production
4. Upload Production Code to Server
5. Configure Server

Optimize Code

예를 들어 memo 훅으로 최적화를 할 수 있겠다. 그러나 여기에선 Lazy Loading에 대해서 다루겠다. Lazy Loading은 필요할 때만 특정 코드를 로드하는 것이다.

처음에 react의 모든 것이 설치된다. 그래서 이를 줄이기 위해서 작게 코드를 나누는 것이다. 따라서 라우터별로 나눠볼 수 있겠다. 이를 React.lazy()를 이용해 필요할 때만 import한 후 <Suspense /> 컴포넌트로 감싸서 대체 UI를 보여주게 한다. 다운로드할 때 React 앱이 중단되므로 꼭 Suspense 컴포넌트로 대체 컴포넌트를 설정해주는 것을 잊지 말자.

const NewQuote = lazy(() => import("...")); // 기존의 import 구문 삭제

<Suspense fallback={<LoadingSpinner />}>
  <NewQuote />
</Suspense>;

Build App for Production

npm run build를 입력한다.

build 커멘드는 start 커맨드보다 최적화된 파일을 준다. build 폴더는 변경하지 말자.

Upload Production Code to Server

일단 React SPA는 “정적 웹사이트”이다. 오직 HTML, CSS, JS로 이루어져 있기 때문이다. 즉, 다른 server-side 코드가 없다.

호스트 제공자를 선택하면 된다. AWS에서도 사용할 수 있지만 Firebase에서도 사용할 수 있다.

Firebase에서 Hosting 기능을 사용한다면 다음과 같은 과정을 따른다.

1. Firebase CLI 설치를 위해 npm install -g firebase-tools를 입력한다.
2. 프로젝트 초기화 -> 프로젝트 폴더에서 실행하자
   • Google에 로그인 firebase login
   • 프로젝트 시작 firebase init
     • public directory를 물어보면 기본값 대신 build로 한다. public 폴더는 이미지가 변경될 가능성이 있기 때문이다.
     • 모든 url을 index.html으로 다시 쓸거냐고 물어보면 yes로 대답한다. url과 상관없이 같은 코드를 요청해야 하기 때문이다.
     • Github과 자동 build, deploy를 할거냐고 물을 때 필요없으면 no로 대답한다.
     • build/index.html이 이미 있다고 덮어쓸거냐고 물으면 이용할거기에 n라고 말한다.
3. Firebase 호스팅에 배포하기 위해 firebase deploy를 입력한다.
   • 커스텀 도메인을 추가할 수 있다.

만약 서비스를 닫고 싶다면 firebase hosting:disable를 입력하면 된다. 삭제할 수도 있다.

Server-side Routing vs Client-side Routing

일단 우리가 쓴 코드는 Client-side Routing이다.

처음에 Client가 Server에 전체 url로 요청을 보낸다. 그러면 Server는 Html, css, js react 코드를 응답한다. 우리는 이 url 경로를 무시하고 싶다. 그러면 사용자가 어떤 경로를 타겟하든 같은 파일로 응답을 할것이다.

---

강의명

• Udemy : React 완벽 가이드