[React] netlify 프로젝트 배포 후 새로고침시 NotFound 에러

리액트 서버를 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 파일을 렌더링 하겠다는 의미이다.

이렇게 설정하고 배포한뒤 다시 테스트를 해보면 새로고침을 하여도 NotFound 에러가 안나타나는 것을 확인할 수 있다.