[TIL] static assets을 한 방에 불러와보자!

React에서 종종 있는 일일 수도 있고, 누군가는 당연히 알고 있을 수도 있지만..

assets에 있는 static 이미지를 한 10개 가져와야한다고 하면, 어떻게 가져올 것인가?

 

import IMAGE1 from "@asssets/image1"; 
import IMAGE1 from "@asssets/image1"; 
import IMAGE1 from "@asssets/image1";
import IMAGE1 from "@asssets/image1"; 
import IMAGE1 from "@asssets/image1"; 
import IMAGE1 from "@asssets/image1"; 
import IMAGE1 from "@asssets/image1"; 
...

 

설마 이렇게..?

(사실 내 첫 리액트 프로젝트에선 저렇게 불러왔다.😅 휴먼 리소스의 힘)

 

과거의 나와 같은 휴먼 리소스파 사람들을 위해 얼마 전 lazyloading을 파다가 알게된 작은 꿀팁으로 한 번에 가져올 수 있다는 사실을 공유하려고 한다.

 

imageLoader.ts

export const ImageLoader = async () => {
  const images = [];
  for (let i = 1; i <= 3; i++) {
    const { default: path } = await import(`../assets/png/portfolio${i}.png`);
    images.push(path);
  }
  return images;
}

 

import를 꼭 상단에서만 할 필요가 없다. 큰 모듈같은 경우는 쓰기 전에 import() 이런 식으로 가져올 수 있다.

directory로 접근해서 파일 갯수를 세서 가져오면 정말 좋을 것 같은데 그런건 nodejs에서만 되는 것 같다. 클라이언트에선 안되는 걸로..!

 

images에는 이런내용이 담겨잇다.

["/static/src/png/portfolio1_ec6dhfgags8c3gc", ...]

 

localhost:3000뒤에 저 주소를 그대로 붙혀넣으면 static 이미지 파일이 나온다!

webpack서버의 저런 경로에 static 이미지를 넣어놓는걸로 추측된다.

그 뒤엔 이제 당연히..! src 경로에 index로 넣어주던가.. 하면 쉽게 끝이다.

 

bracket 뺀 코드가 6줄 있으니 6개 이상 이미지를 import할 때 쓰면 유용하지 않을까 싶은 생각이든다.