react ( Udemy강의 ) - 9. Deployment

Deployment Steps

1. Test Code

2. Optimize Code

     - 레이지로딩 : 코드를 실제로 어디론가 보내기 전에 해야할 최적화

3. Build App for Production

4. Upload Production Code to Server

5. Configure Server

---

Optimize Code

Lazy Loading : 해당 코드가 필요할 때만 특정 코드를 로딩하는 것

     코드를 여러 번들로 나누고 각각 필요할 떄만 다운로드하는 것

const NewQuote = React.lazy(() => import('./pages/NewQuote));

NewQuote가 필요할 때 React에 의해 실행, 하지만 다운로드가 몇초 걸릴 수도 있기에 리액트는 다운로드동안 중단

그러기에 React에서 다른 것을 가지고 와야함 -> Suspense 컴포넌트

<Suspense fallback={<p>Loading...</p>}>
</Suspense>

* 코드를 분할하기 위해 레이지 로딩을 사용 - 초기 코드 번들을 더 작게 만듬

  -> 페이지와 컴포넌트가 많고 복잡한 로직이 붙어있는 애플리케이션에서는 레이지 로딩이 진가를 발휘!

  -> 웹사이트의 초기 로딩을 훨씬 빠르게 만들어 준다.

 

---

Build App for Production

npm run build

: 빌드 스크립트를 실행하는 방법

 

---

Upload Production code to Server

     - 정적 웹사이트 호스트 필요

 

---

Configure Server

Server-side Routing VS Client-side Routing

 

- 싱글 페이지 앱을 호스트할 때는 경로는 무시하고 싶다 > 서버는 /some-route 라는 경로를 무시해야함 ( 설정 )