시작

포켓몬 도감 검색 페이지기능 구현이 잘되고 vercel로 배포를 하려고하니
404에러를 표시했다.

문제 확인하기

404문제 해결을 위해 여러 방안을 제시해 줬다.

처음에는 컴포넌트 대/소문자 구분을 제대로 안해줘서 그런가 싶었는데
그건 아니였다.

구글링을 해봤을 때 최상단 경로에 vercel.json에 경로를 연결해주면 된다고 해서 시도해 봤다.

{
  "rewrites": [
    {
      "source": "/search/:path*",
      "destination": "/search"
    }
  ],
  "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]
}

push를 하니 vercel에서 해당 상태에서는 배포가 힘들다는 표시를 보내왔다.

rewrites, redirects, headers, cleanUrls 또는 trailingSlash를 사용하는 경우 routes가 존재할 수 없습니다.

routes를 사용해서 그런 듯 싶었다.

해결

[Vercel Vite Error 404] Vercel Vite 배포시 라우터 새로고침 404 에러 - by G E Lee님

그러다 해당 게시물을 보고 수정 후 다시 배포하니 성공했다!

{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}

그래서 왜 이러한 오류가 났는지 궁금했다.

Vercel의 vercel.json 파일을 사용하여 리디렉션(rewrites) 설정을 하는 이유는 클라이언트 사이드 라우팅과 관련이 있습니다. React에서 사용하는 React Router와 같은 라우팅 라이브러리는 기본적으로 클라이언트 사이드에서 라우팅을 처리합니다.

문제는 서버 측에서는 이러한 클라이언트 사이드 라우팅에 대한 경로를 인식하지 못한다는 것입니다. 즉, 사용자가 직접 페이지에 접근하면 서버는 해당 경로에 대한 처리를 찾지 못해 404 에러가 발생할 수 있습니다.

vercel.json 파일에 작성한 리디렉션 설정은 모든 요청에 대해 인덱스 페이지('/')로 리디렉션하도록 하는 것입니다. 이렇게 하면 클라이언트 사이드 라우팅이 올바르게 작동하게 됩니다.

-gpt답변

그렇다고 한다.
만약 이후 비슷한 문제가 발생하면 해당 게시글을 참고해서 수정해 봐야겠다.