react s3 배포 이슈... 도와주세요 ㅠㅠ

React 앱의 경우, Single Page App으로 동작하기 때문에 모든 요청이 `index.html`로 이동해야 합니다. AWS S3 및 CloudFront에서 이를 구현하는 방법은 두 가지입니다: 1. **S3** - Amazon S3 Bucket의 "Static Website Hosting" 설정에서 'Index Document'와 'Error Document' 모두를 `index.html`으로 설정합니다. 2. **CloudFront** - Distribution을 생성할 때 default root object(기본 루트 객체)를 `index.html`로 설정합니다. - Error Pages: HTTP 오류 코드(`4xx`, `5xx`)가 발생하면, 응답 페이지를 지정한 객체(URL 경로)로 대체할 수 있는 기능입니다. 여기서도 403/404 오류를 잡아서 Custom Error Response로 `index.html`을 서빙하도록 설정할 수 있습니다. 이렇게 하면, 우리의 리액트 라우터가 URL을 보고 적절한 컴포넌트를 사용자에게 제공하게 됩니다. 그럼에도 불구하고 문제가 계속된다면, 가능한 오류 원인은 다음과 같습니다: - **MIME Type**: S3는 옳바른 MIME 타입으로 파일을 제공하지 않으면, 브라우저는 그 파일을 처리하는 방법을 알아내지 못할 수 있습니다. 이 문제를 해결하려면 특정 확장자에 대해 옳바른 MIME 타입을 설정하는 Content-Type 메타데이터를 S3에 추가해야 합니다. - **CORS**: React 앱이 다른 도메인에서 리소스를 요청하려고 시도하면 CORS 오류가 발생할 수 있습니다. 이 문제를 해결하려면, AWS S3 CORS 설정을 업데이트하여 리액트 앱의 도메인에서 오는 요청들을 허용해야 합니다. 모든 설정이 제자리에 있는지 확인해 보세요. 그래도 문제가 계속된다면, CloudFront 배포를 무효화(invalidate)하거나 새로 고침하여 변경사항이 반영되었는지 확인하세요.