vite로 번들링해 cdn에 배포하기

문제

js, css를 인식하는데 not found가 뜸. (preview에서는 정상 작동)

js번들링시의 문제라는 말을 봤다.

1차시도

-> vite.config.js에 base추가

→ 실패.

2차시도.

리액트 라우터 돔을 사용한 것이 원인일 수 있다는 의견 봄.
초기 리액트 라우더 미들웨어 설정을 빼줬다.

→ 라우터를 빼줬더니 돌아간다!!!!!!!

→ 근데 어째서…????? vite에서 react router dom을 못 쓰는 걸까? preview로 열었을 때는 돌아갔는데..

broswer router dom이 아닌, hash router dom을 사용해야 한다는 글을 봐서 수정

→ 정상 작동했다!!!

무슨 차이지..?!?!

BrowserRouter

• 동작 방식: HTML5 History API를 사용하여 브라우저의 주소를 변경합니다.
• URL 구조: 깨끗한 URL을 사용합니다. 예를 들어, /about 같은 경로를 사용합니다.
• 서버 설정 필요: 새로고침이나 직접 URL 접근 시 서버가 해당 경로를 처리하도록 설정해야 합니다. 그렇지 않으면 404 에러가 발생할 수 있습니다.

1. 서버 설정이 필요합니다.
2. CDN에 배포할 때 라우팅 문제를 해결하기 어려울 수 있습니다.

HashRouter

• 동작 방식: URL의 해시(#) 부분을 사용하여 브라우저의 주소를 변경합니다.
• URL 구조: 해시 기반 URL을 사용합니다. 예를 들어, /#/about 같은 경로를 사용합니다.
• 서버 설정 불필요: 해시 부분은 서버에 전송되지 않기 때문에 별도의 서버 설정 없이도 클라이언트 측 라우팅이 가능합니다.

1. 서버 설정이 필요 없습니다.
2. 모든 환경에서 동작이 보장됩니다.

→ 애초에 browser router는 csr에서 사용이 불가능했다!!!!!!!!!

공식문서를 잘 읽자…공식문서를 잘 읽자….