왜 리액트 배포하고 새로고침하면 404에러가 뜰까?

리액트는 SPA입니당. 

 

우리는 이것저것 클릭하면 주소가 /something , /something/1 뭐 이런식으로 바뀌는걸 보지만 사실은 그냥 하나의 index.html파일에 js로 동적으로 브라우저가 휘리릭 바꿔주고 있을 뿐이에요. 사실 우리는 계속 같은 놈을 보고 있습니더..

바로 루트에 있는 index.html 파일이요. 

 

그리고 브라우저가 페이지에 들어가는 것은 해당 url에 index.html 파일을 내놔라! 하는 GET 요청을 보내는 것이에요. 

그런데 말이죵

 

그럼 리액트로 빌드한 웹페이지에서 ~~~~~/testPage 에 들어가 있다고 쳐봅시당. 

근데 새로고침했어요.

그럼 우리는 어떤 url한테 index.html을 내놓으라고 GET 요청을 보내는 걸까요? 바로 ~~~~/testPage에요.

근데 루트 / testPage에는 index.html이 없답니다. 

정말 애석하게도 그 녀석은 아무것도 가지고 있지 않아요... 

 

 

때문에 ~~~/testPage에 있을 때 페이지를 새로고침해서 내놔라! 하면 아무것도 줄 수가 없어요 하고 404를 띄우는 겁니다..! 그 녀석은 정말 index.html 파일이 없거든요.

 

때문에 이를 극복하기 위해서 아파치 서버에서는 다음을 사용할 수 있어요. 바로 ReWriteUrl! 👌 👌 👌

달라고 했을 때 없으면 이거 내놔라! 하고 규칙을 미리 정하는 거에요. 

 

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

첫번째 줄부터 해석해볼까오

- MultiView 기능을 비활성화합니다. 이 기능이 켜져있으면 서버가 요청된 url과 일치하는 파일을 찾지 못했을 때 유사한 이름의 파일을 자동으로 찾으려고 시도합니다. 이걸 비활성화해야 url이 정확하게 매핑되겠죠..?

- ReWriteEngine을 켭니다. 그러면 우리는 이제 URL 재작성 규칙을 적용할 수 있어요.

- ReWriteCond라고 하는데요 재작성 조건입니다. 요청된 URL이 실제 파일이 아닌 경우에만 아래의 재작성 규칙을 적용하라는 것이에요. %{REQUEST_FILENAME}은 서버가 요청받은 파일의 경로이며 !-f는 파일이 존재하지 않는다는 조건을 말합니다.

- ReWriteRule은 요청된 URL이 실제파일이나 디렉토리가 아니면, 모든 요청을 index.html로 리다이렉트합니다. ^는 url의 시작이고 QSA는 기존의 쿼리 문자열을 유지해라! L은 이 규칙이 최종 규칙임을 나타내는 플래그 입니다.

 

 

자 그럼 위와 연관지어서 본다면 ~~~/testPage에 index.html을 요구해봐야 암것도 없겠쥬. 그러면 서버에 설정한 .htaccess 파일에 우리가 설정한 url 재작성 규칙에 따라서 index.html을 가져오게 되고, QSA는 기존 쿼리 문자열 유지하라고 했으니까 index.html에서 /testPage를 라우팅하게 될 겁니당. 그럼 새로고침해도 딹 나옵니다.! 🎉