일단 해보자

문제) 이미지가 너무 느리게 로드 된다. 앞서서 이미지가 너무 느리게 로드되는 문제를 해결하고자 AWS S3를 사용했었다. 하지만, 프리티어 사용 이후에 요금이 나올 수도 있다고 생각해서 다른 해결책을 고민해보기로 했다. React) AWS S3 사용, netlify 배포 후 이미지가 느리게 load되는 문제 문제점 - 사진을 로드 하는데 너무 많은 시간이 걸린다. 원인 - 프로젝트 내의 image 폴더를 만들어서 이미지를 저장했더니 로드가 오래 걸린다. 해결방법 AWS S3에 이미지를 저장해두고, 사진을 불 time-to-study.tistory.com 해결 방법) 이미지 preload를 사용해보려고 한다. preload는 웹 페이지에 필요한 이미지 파일을 사전에 미리 로드하고, 사용자가 이미지가 필요..

문제) Component 간의 화면 전환을 원하지 않아서, 뒤로가기를 막고싶다. 원하는 동작 현재 동작 2번 질문에서 뒤로가기 => 1번 질문 2번 질문에서 뒤로가기 => 시작화면 현재 동작) 뒤로가기 이동 원리) 'history State' 에 현재까지 이동해온 페이지 정보가 Stack으로 담겨있다. 그때, 뒤로가기가 발생하면 stack에 가장 위의 있는 페이지로 이동하게 된다. 문제 해결 방법) 1. 뒤로가기를 막는다. history.pushState(null,"",window.location.href); 사용 위의 코드를 통해서 지금까지 이동해온 페이지가 담긴 history에 현재 페이지를 최상위에 넣어두고 뒤로가기 발생 시 history 중 다시 한 번 현재페이지가 나오도록 한다. => 현재 페이..

문제점 - 사진을 로드 하는데 너무 많은 시간이 걸린다. 원인 - 프로젝트 내의 image 폴더를 만들어서 이미지를 저장했더니 로드가 오래 걸린다. 해결방법 AWS S3에 이미지를 저장해두고, 사진을 불러오는 방식을 사용해보자. 1. AWS S3 버킷 만들기 객체 소유권 => ACL 활성화 , 퍼블릭 액세스 차단 => 해제 왜?? 퍼블릭으로 접근할 수 있도록 해서 프로젝트에서 데이터를 불러오려고 2. 폴더 만들기 + 이미지 업로드 후 파일 퍼블릭 설정 3. image 를 가져오는 URL 변경 기존 Code : img src = "/image/사진이름.png" (로컬 Path) 변경 Code : img src = ( s3에 올린 사진 ) 객체 URL 결과 최대 10배 이상 시간을 단축했다. ** S3 프리..