문제점
- 사진을 로드 하는데 너무 많은 시간이 걸린다.
원인
- 프로젝트 내의 image 폴더를 만들어서 이미지를 저장했더니 로드가 오래 걸린다.
해결방법
AWS S3에 이미지를 저장해두고, 사진을 불러오는 방식을 사용해보자.
1. AWS S3 버킷 만들기
객체 소유권 => ACL 활성화 , 퍼블릭 액세스 차단 => 해제
왜?? 퍼블릭으로 접근할 수 있도록 해서 프로젝트에서 데이터를 불러오려고
2. 폴더 만들기 + 이미지 업로드 후 파일 퍼블릭 설정
3. image 를 가져오는 URL 변경
기존 Code : img src = "/image/사진이름.png" (로컬 Path)
변경 Code : img src = ( s3에 올린 사진 ) 객체 URL
결과
최대 10배 이상 시간을 단축했다.
** S3 프리티어에서 제공하는 용량 , 요청 횟수에 제한이 있다. => 이후에는 금액이 발생해서 다른 방법도 고민해봐야겠다.
React) image preload(이미지 미리 불러오기), netlify 배포 후 이미지가 느리게 load되는 문제 해결
문제) 이미지가 너무 느리게 로드 된다. 앞서서 이미지가 너무 느리게 로드되는 문제를 해결하고자 AWS S3를 사용했었다. 하지만, 프리티어 사용 이후에 요금이 나올 수도 있다고 생각해서 다른
time-to-study.tistory.com
'React > Project_MyFoodType' 카테고리의 다른 글
| React) image preload(이미지 미리 불러오기), netlify 배포 후 이미지가 느리게 load되는 문제 해결 (0) | 2024.02.29 |
|---|---|
| React) 뒤로 가기 막기, 현재 질문에서 이전 질문으로 (0) | 2024.02.29 |