9. [리액트- 라우터 - 배포시 주의사항] SPA 의 장점을 잃어버리지 말 것

리액트는 결국 정적 앱이다.

** 리액트앱은 어쨌든 서버측 코드가 없는, "정적 앱" 이라는 것을 반드시 인지하자.
** Nextjs 나, Nodejs 처럼 "서버측 코드가 존재하는 앱이 아니다."

React를 만들 때 "서버에 요청"만 할뿐, 우리가 직접 "서버가 되어, 그 요청을 응답" 하는 코드는 없었다.
반면, Nextjs 나, Nodejs 를 만들 때에는, (req,res) 를 통해서, 받은 응답을 검사하고, 응답하는 코드를 작성 할 수 있었다.

그게 REST API 의 핵심이자, "서버측 코드를 보유" 하고 있는 상태이다.

 

라우터가 있는 앱을 배포할 때 주의 할 것  

 

클라이언트 사이드와 서버사이드에서의 인식 차이를 알아보자.

 [클라이언트측]
        1) 리액트는 SPA 를 만들때 유용한 라이브러리 이다.
        2) 나는 SPA 로 만들고 배포를 시작했다.
        3) 만들 앱에는 ROUTER 가 포함되어 있다.
        4) ROUTER 는, "URL" 을 보고 "다른 페이지를 로드 시킨다".
        5) 클라이언트는 서버로 "요청"을 보내고, 서버는 "URL"을 보고 해당 "URL 에 적절한 응답을 보낸다."

    [서버측]
        1) 앱 이름을 MS 로 하여 배포했다고 가정하자.
        2) https://MS.com 이 배포 주소가 될것이다.
        3) "다른 URL" 은 서버로부터 "다른 응답" 을 받는다.
        4) http://localhost:3000/quotes 로 요청을 받는다면? "다른 응답"을 받을 것이다.
        5) "다른 응답?" 그러면, "SPA 의 장점은 어디로 간거지?"

그러니까,

  => 우리는 "하나의 파일"로 존재하는 "SPA" 를 만들었다.
    서버에서 받을 응답은 "단 하나의 리액트 앱" 이지, "여러 페이지를 각각 가진 앱" 이 아니다.

    그러므로, 서버로부터, "어떤 주소를 요청하던, 같은 응답을 받게 해야한다".
    그렇게 되면, "리액트 앱" 이 실행되고, "실행된 리액트 앱이 라우트 기능을 실현시킬 것이다."
    
=> 서버가 "/SOMETHING" 처럼 뒤에 붙는 url 주소로 가는 요청을 "무시" 하고 "하나의 응답만을 보내게 설정해야한다"
    어떠한 종류의 "URL" 이든 같은 "메인 HTML 파일 을 보내주게 해야 한다"

결론적으로 그 행위를 실행하기 위해서는 배포사이트에서 설정을 해주어야한다.

대부분의 배포 사이트에는 SPA 임을 물어보는 탭이 있다. 꼭 YES 를 누르자.