210918 개발기록: netlify - 새로고침 에러

📌  React - Netlify, Redirection 에러

리액트 서버를 netlify 를 통해 정상 배포했다.

이 때 새로고침을 하면 아래와 같은 에러메시지가 나타난다.

page not found 는 404 에러로, 현재 url 에서 찾고자 하는 자원을 못찾았을 때 발생한다.

이전 까진 정상적으로 보이던 화면이 왜 새로고침 이후엔 보이지 않을까?

 

✏️  원인

내 설정에서 리액트가 최초 접속할 때의 url 은   /   이다.

그리고 이 때 index.html 을 읽는다. 즉 해당 url 에 대한 자원은 index.html 로 정해져 있다.

 

하지만 화면을 넘기면서 라우팅된 url 이 예를 들어 /a 혹은 /b 가 됐을 땐, 각 url 에 맞는  자원이 존재하는가? 그렇지 않다.

index.html 처럼 정해진 자원이 없다. (react 는 single page application 이기 때문이다)

 

즉 /a , /b 라는 url 에서 새로고침을 하면, / 와 달리 곧바로 내려줄 자원이 존재하지 않기 때문에 404 에러가 발생하는 것이다.

 

🍋  해결 

그렇다면 각 /a, /b 이란 url 에 곧바로 접근하더라도, 보여줄 자원만 있으면 404 에러를 피할 수 있다. 

바로 index.html 을 보여주면 된다. 

우선 public 폴더 내부에 _redirects 파일을 생성한다. 확장자는 따로 없다.

그리고 해당 파일 내부에 아래 코드를 작성한다.

/* /index.html 200

이는 어떠한 경로로 들어와도 ( /* ) , 

200 상태코드를 내려주며, index.html 파일을 렌더링 하겠다는 의미이다. 

해당 내용을 작성 후 빌드하여 배포하면 새로고침 에러가 잘 해결 된 것을 확인할 수 있다.