[React] vite로 프로젝트 생성후 이미지 배포 오류 (vite에서 정적파일 가져오기, asset, public assets 차이)

 

 

- public
    - /*로고 이미지 파일*/
- src
    - assets
        - /*.svg, .png 파일들*/

일반적인 프로젝트 디렉토리 구조이다.

 

Vite는 모듈 시스템을 이용하는 경우 자동으로 상대경로를 절대경로로 변환한다.
그래서 import a from "../../../assets/a.png" 와 같은 상대 경로를 사용하는 코드는 Vite로 빌드시 자동으로 절대경로로 변환된다.

하지만!!! HTML 파일의 <a> 태그에서는 이러한 자동 변환이 일어나지 않는다. 🥹
이러한 이유로 에셋을 사용할때 상대경로르 입려했지만 로고이미지 다운에서만 문제가 발행하였다.

모듈로 import 되지 않는 에셋을 사용하가 위헤서는 절대 경로를 사용하는 것이 더 안전하다!

profile

넴 이미지 파일명을 그대로 보존하고 싶으면 public폴더 

그게 아니면 src폴더에 넣습니다 

 

이때 정적파일들은 public 폴더와 src/assets폴더 두 곳에 저장할 수 있는데 

public 폴더는 캐싱되고, assets폴더는 캐싱되지 않는다는 것이 가장 큰 차이이며,

두 폴더는 빌드될때 서로 다른 경로에 위치하게 된다.

 

 

public

(개발시 `/` 프로덕션시 `dist/`에 위치 )

 

데이터 빌드 과정에서 공개적으로 제공된다. 

~URL~/image.png 와 같이 접근이 가능하다.

빌드과정에서 최적화가 되지않는다. 

캐시의 영향을 받는다  = 파일명이 그대로 보존된다 = 빠른 업데이트가 어려워서 파일의 수정에 따른 처리를 해줘야한다.

 

따라서.. 

 

robots.txt와 같이 소스 코드에서 참조되지 않는 에셋

( ** `robots.txt` : 보안과 관련된 파일으로 검색엔진의 검색수집 제한범위를 설정할 수 있다 반드시 홈페이지 루트위치에 존재해야함.)

해싱 없이 항상 같은 이름을 갖는, 가져야하는 에셋 (파일명을 그대로 보존하고 싶을때) 

또는 URL을 얻기 위해 굳이 import 할 필요 없는 에셋

 

들의 경우에는 public폴더에 위치시키는게 맞다고 볼 수 있다.

 

** 경로 작성시에는 절대경로로 작성해줘야한다. `/`기준

`<img src={ 환경변수(배포URL) + 이미지 경로 }/>` 와 같이 작성해주면 안전하게 사용가능하다.

 

 

src/assets

 

캐시의 영향을 받지 않는다 = 빌드시 파일 이름에 자동으로 해시가 붙고, 파일업데이트시에는 해시가 변경되는 방식 = 업데이트 👍

(이미지파일 경우는 제외로, 수정시에도 해시값이 변경되지않는다고한다!)

번들링 과정에서 모듈형태로 가져오고 최적화가 일어난다. ->  제공하기 직전에 public 폴더에 '삽입'된다.

 

TypeScript의 경우, 기본적으로 import로 정적 에셋 가져오기를 유효한 모듈로 인식하지 않는다 -> `vite/client`를 포함시켜 해결가능.

 

 

import imgUrl from './img.png'  // import 방식으로 이미지 가져오기

imgUrl = "/img.png" // dev
imgUrl = "/assets/img.2d8efhg.png" // production (2d8efhg는 해시 값을 의미)

 

 

 

참고 

https://ko.vitejs.dev/guide/assets.html#the-public-directory