문제 인식
- Image 를 가져올 때 버퍼링이 걸린 것처럼 0.5초-1초정도 딜레이가 발생
기존 코드 방식
- Img 태그를 사용해 사진을 띄우고, src 에 웹 Url 을 입력해 가져오는 방식
아마도 url 을 통해 가져오면서 걸리는 시간이 딜레이로 느껴지는 것 같다
개선 방향
- Image 파일을 프로젝트 폴더에 포함시켜 로딩 시간을 단축하도록 변경할 예정
- 다만, 동적으로 Image 파일을 가져오는 구조라는 것을 고려해야 한다.
첫번째 시도 (실패)
require 사용하기
client - components, src, public, images
- client 바로 아래에 images 폴더를 생성해 Image 파일들을 저장했다.
- 동적으로 받아오기 위해서 require 을 사용했다.
const result = await require('...')
- 하지만 result 값이 제대로 읽히지 않았다. file 명이 제대로 오는 것로 봐서는 가져오는 것은 성공적인데, file 내용이 읽히지 않는 듯??
두번째 시도 (실패)
webpack 사용하기
- webpack 을 사용하면 번들링, 에러, 코드 최적화를 도와준다고 한다.
- webpack -> file-loader 를 사용해서 제대로 file 을 가져오려고 했다.
- 하지만 실패.... 이유는 알 수 없지만..? ㅜㅜ
세번째 시도 (성공)
image 폴더 위치 변경 & import() 함수 사용하기
- 자료를 찾다보니 React 프로젝트에서 Image 를 가져오는 방법은 2개
1. public 폴더에 저장후 상대경로 사용
2. src 폴더에 저장후 import 하기
- 이 중 2번째 방법을 사용!!
src/images를 저장하고
상대 경로 & import() 를 이용해 image 파일을 가져오는 방식을 사용했다.
const [importImageModule, storeImportImageModule] = useState(null);
useEffect(() => {
const importImage = async () => {
try {
const ImageModule = await import(`../../images/${imageAllInfo[displayImageInfo[imageIdRef.current]].IMAGEURL}.jpeg`);
storeImportImageModule(ImageModule.default);
} catch (err) {
console.log(err)
}
}
impoortImage();
}, [displayImageInfo, imageAllInfo, imageIdRef.current])
- 중요한 점
1. useState 로 관리해서 component 형태로 저장을 한다.
2. store 함수를 return 해서 외부에서 사용하면 promise 객체가 도착하지 않아서 importImage() 내부에서 store 함수를 실행시켜야 제대로 저장이 된다.
후기
frontend 는 어렵다...
Backend-Developer