배포 후 실행을 했더니 파일이 실행되지 않았다. 링크를 찾지 못하는 것을 보아 router에 문제가 있는 것 같은데 코드를 수정해도 페이지를 계속 찾지 못해 원인이 무엇인지 알아보니 파일 하나를 설정하지 못해 발생한 것이었다.

바로 _redirects 파일이다.
라우팅 설정에서 문제가 발생한 것인데 Netlify와 같은 호스팅 플랫폼에서는 기본적으로 클라이언트 측 라우팅을 지원하지 않을 수 있다. 그래서 router을 사용할 경우에는 Netlify 설정에서 "rewrite" 규칙을 추가해야 한다.

왜 rewrite 규칙을 추가해야 하나?

바로 클라이언트 사이드 라우팅 때문이다. 클라이언트 사이드 라우팅은 브라우저에서 페이지 전환이 발생할 때 페이지 전체를 새로고침 하지 않고도 동적으로 콘텐츠를 갱신하는 기술이다.
사용자가 직접 주소 표시줄에 URL을 입력하거나 새로고침할 때 서버에는 해당 경로에 대한 정적 파일이나 페이지가 없을 수 있다. 이로 인해 Netlify와 같은 정적 사이트를 배포하는 서비스의 경우 404 오류가 발생할 수 있다.

해결 방법으로는 클라이언트 사이드 라우팅 경로에 대해 서버에서 정적 파일이 아니라 항상 기본 페이지로 리디렉션 하는 설정이 필요하다.
Netlify에서는 _redirects 파일을 사용해서 rewrite 규칙을 설정하는 것이다.

공식 문서에서 제시한 설정 방법이다.

# Redirects from what the browser requests to what we serve
/home                /
/blog/my-post.php    /blog/my-post
/news                /blog
/cuties              https://www.petsofnetlify.com
/authors/c%C3%A9line /authors/about-c%C3%A9line

프로젝트에 적용한 방법은 다음과 같다.

_redirects
/*    /index.html   200

모든 경로에 대해 항상 index.html 파일을 제공하도록 설정을 했다.

---

회고를 하며

팀 프로젝트 당시에는 배포를 내가 아닌 다른 팀원이 해주었다. 개인 프로젝트를 하면서 배포에 대한 새로운 지식을 쌓을 수 있었다. 직접 경험하지 않으면 어떤 문제에 직면하였을 때 여러 시행착오를 겪게 된다는 것을 다시 한 번 느끼게 되었다.
단순히 배포하는 것이 아닌 배포를 위해서 필요한 파일이 있다는 것을 알게 되었다.