spa 배포시 주소창에 url 직접 입력 에러 !

룰루랄라 배포 브랜치에 적용 후 테스트를 해보는데
분명 배포 전에는 주소창에 직접 /login 이렇게 쳐도 에러가 안났는데.. 배포하니까 에러가 나는게 아닌가 ..?
like this...

(너가 .. 먼데 ..)

왜 이런 일이 발생했는가 ??

바로 내가 spa로 개발했기 때문이다 !!
spa는 index.html에 대한 자원만 존재하고 다른 주소를 입력시엔 그 주소에 대한 자원이 없기 때문이다.
로컬 환경에서는 경로가 제대로 작동하지만, 실제 배포된 환경에서는 경로에 대한 처리가 제대로 이루어지지 않아서 오류가 발생할 수 있다고 한다..

찾아보니 백엔드에서 배포된 환경에서도 SPA의 라우팅을 제대로 처리할 수 있도록 서버 설정을 수정해야 한다고 하는데 프론트단에서도 분명히 처리할 수 있을 것 같아 .. 이것저것 시도해보았다..

1. vite에서 기본 경로 설정 (실패)

vite.config.ts를 수정하는 방법으로, base: '/' 를 추가해준다.
vite의 설정에서 base 옵션을 사용하여 애플리케이션이 상대 경로를 기준으로 동작하도록 설정하는 것이다.

export default defineConfig({
  base: '/',
  plugins: [react()],
  resolve: {
    alias: {

but.. 실패 ...

2. public 폴더에서 _redirects 생성 (실패)

public 폴더에서 확장자 없이 _redirects를 생성해

/* /index.html 200

이 값을 넣어준다!

BUT 실패 ...
난 vercel로 배포했기 때문 ... 아마 netlify로 배포했으면 가능했을지도?

3.vercel.json 생성 (성공)

최상단에 vercel.json파일을 생성하고 다음과 같은 코드를 추가한다.

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

(엉엉 사랑해요 stackoverflow)