[Fix] 메인이미지 경로 변경

[LEEJW1953]

설명

• npm run build으로 배포 시 메인이미지가 깨지는 현상이 발생하였습니다.
  • 로컬에서도 npm run build 후 npm run preview 실행 시 메인이미지 깨짐
• src/assets에서 관리하던 정적 에셋을 public 하위에서 관리하도록 이동하고, @/assets 절대경로를 추가하였습니다.
• 로컬에서 build후 preview 실행 시 이미지 정상적으로 보입니다.

정적 에셋 파일 관리

• Vite에서는 정적 에셋을 public폴더 내에서 관리하는 것을 권장합니다.

• 따라서 src/assets 에서 관리하던 이미지 파일과 svg 파일을 public/assets 로 이동하였습니다.

• svg파일의 경우 import 해서 사용하는 방식을 사용하는데, public폴더 내의 파일을 import할 경우 npm run dev 실행 시 아래와 같은 경고가 발생합니다.

  

• Vite 공식 문서에 따르면 public 디렉터리에 위치한 에셋은 JavaScript 코드로 가져올 수 없습니다. 라고 합니다.

  • 작동이 잘 되긴 합니다.

• 가장 권장하는 방식은 public 폴더에서 이미지 파일을, src/assets 폴더에서 import 해 사용할 svg 파일을 관리하는 방식인 것 같습니다.

• 우선 정적 파일을 public과 src/assets 두 위치에서 관리하기는 분산되어 public 폴더 내에서 모두 관리하기로 결정하였습니다.

완료한 기능 명세

• src/assets에서 관리하던 정적 에셋을 public 하위에서 관리하도록 이동
• @/assets 절대경로 추가

스크린샷

기능 작업에 대한 스크린샷/화면 녹화 있을 경우 첨부하기

리뷰 요청 사항

[ttaerrim]

p-2;

src/assets와 public에서 정적 에셋을 관리하는 장단점을 찾아보았어요.

아래는 src에서 관리할 때의 장점입니다.

• 타입 안정성: src 안에 있는 사진을 실수로 지우면 빌드가 깨져서 실수로 지웠단 걸 알 수 있는데, public 폴더는 그게 불가능해서 위험함

• 캐싱: public 폴더에 둔 이미지를 파일명 그대로 에셋만 바꿨을 때, 이미지가 캐시되어서 업데이트되지 않을 위험이 있음

이런 점들이 있다고 해요! vite의 공식 문서에서 빌드 시 정적 에셋 관련 설정을 해 줄 수 있는 부분이 있을 것 같은데, 그 방식도 알아보면 좋을 것 같습니다.

현재 PR은 public에서도, src에서도 정적 에셋을 관리하게 되어 좋은 방향은 아닌 것 같아요.

[ccxz84]

에셋을 소스에 포함시켰을 때 빌드 퍼포먼스나 다른 영향은 없나요?

[LEEJW1953]

@ttaerrim
2f8e8b6
정적 에셋 파일을 수정하지 않고 vite.config.ts의 publicDir경로를 수정하여 사용하도록 하였습니다.

[ttaerrim]

현 상황에서는 src/assets → public/assets로 옮기는 게 제일 간편할 것 같네요. 근데 이렇게 하면 다음처럼 못 쓰게 되나요? 그럼 또 생각해 봐야 할 것 같은데...

import { ReactComponent as Icon } from "./";
import Image from "./";

<img src={Image} />

[LEEJW1953]

현 상황에서는 src/assets → public/assets로 옮기는 게 제일 간편할 것 같네요. 근데 이렇게 하면 다음처럼 못 쓰게 되나요? 그럼 또 생각해 봐야 할 것 같은데...

import { ReactComponent as Icon } from "./";
import Image from "./";

<img src={Image} />

publicDir을 수정하지 않고 이미지와 svg파일을 따로 저장하여 사용하면

• svg 파일의 경우 수정할 필요 없이 지금과 같이 사용하면 되고
• 이미지의 경우 public/assets/images폴더에 저장하여 /assets/images/image.png 와 같은 절대경로로 사용할 수 있습니다.

[ttaerrim]

흠.. 근데 src/assets와 public 모두 쓰는 건 에셋이 너무 분산되어 관리되는 것 같아서요.

[LEEJW1953]

에셋을 소스에 포함시켰을 때 빌드 퍼포먼스나 다른 영향은 없나요?

@ccxz84 챗지피티에게 물어본 결과

Vite에서 정적 에셋을 관리하는 두 가지 주요 방법은 src/assets 폴더에 포함시키는 방법과 public 폴더를 사용하는 방법입니다. 각각의 방법에는 장단점이 있습니다.

1. src/assets 폴더 사용
   장점:
   모듈 시스템 활용: src/assets에 포함된 에셋은 모듈 시스템을 활용하여 import할 수 있습니다. 이는 코드에서 더 직관적이고 편리한 사용을 가능케 합니다.
   Vite의 자동 모듈 탐지: Vite는 자동으로 모듈을 탐지하여 필요한 경우 해당 모듈을 번들에 추가합니다.
   단점:
   번들 크기 증가: 모든 에셋이 번들에 포함되므로 큰 파일이나 많은 수의 작은 파일을 사용하면 번들 크기가 증가할 수 있습니다.
   빌드 시간 증가: 큰 양의 에셋을 처리하는 데 시간이 오래 걸릴 수 있습니다.
2. public 폴더 사용
   장점:
   번들 크기 감소: public 폴더의 에셋은 번들에 포함되지 않으므로 번들 크기가 작아집니다.
   빠른 빌드 시간: 번들에 포함되지 않기 때문에 빌드 시간이 단축될 수 있습니다.
   단점:
   모듈 시스템 미사용: public 폴더의 에셋은 모듈 시스템을 사용할 수 없으며, 전역적으로 접근해야 합니다.
   수동 관리 필요: 에셋을 수동으로 관리해야 하므로, 에셋의 변경이 자동으로 감지되지 않습니다.
   어떤 방법을 선택해야 할까요?
   선택은 프로젝트의 특정 요구사항과 성능 목표에 따라 달라집니다. 작은 프로젝트나 초기 단계에서는 src/assets를 사용하여 편리하게 모듈 시스템을 활용할 수 있습니다. 그러나 프로젝트가 커지고 성능 최적화가 필요할 때는 public 폴더를 사용하여 번들 크기를 줄이고 빌드 시간을 최적화할 수 있습니다.

또한, 빌드된 파일이 캐싱되고 변경이 적은 경우에는 public 폴더를 사용하여 빌드 속도를 향상시킬 수 있습니다.

라는 답변을 받았습니다.

[js43o]

분산되는 게 별로라면 src/assets에서 모두 관리하되, 이미지처럼 JS 연동이 필요없는 파일에만 publicDir을 지정하는 건 어떨까요?

└─ assets
    ├─ images
    └─ icons
// publicDir: 'src/assets/images',

이러면 images는 public하게, icons는 기존 asset 형식으로 다룰 수 있지 않을까요?

[ttaerrim]

vite는 정적 에셋을 public에서 관리하는 걸 권장하더라고요. 그래서 제가 생각한 해결 방안은 이건데, 보시고 의견 알려 주세요!

1. src/assets에서 관리하던 정적 에셋을 public에서 관리한다. (추가했던 publicDir은 뺌)
2. js에서도 사용할 수 있게 하기 위해 다음과 같은 vite.config.ts를 적용한다.

export default defineConfig({
  plugins: [react(), vanillaExtractPlugin(), svgr()],
  resolve: {
    alias: [
      { find: '@/assets', replacement: path.resolve(__dirname, 'public/assets') },
      { find: '@', replacement: path.resolve(__dirname, 'src') },
    ],

    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.css.ts'],
  },
  publicDir: 'src/assets',
});

[js43o]

vite는 정적 에셋을 public에서 관리하는 걸 권장하더라고요. 그래서 제가 생각한 해결 방안은 이건데, 보시고 의견 알려 주세요!

해봤더니 잘 되네요..! 좋습니다.
/public/assets/icons보다는 바로 /public/icons로 접근하게 하는 것도 좋아보여요. (public이랑 assets이랑 비슷한 느낌이어서..)

alias: [
      { find: '@/assets', replacement: path.resolve(__dirname, 'public') },
      ...

[LEEJW1953]

vite는 정적 에셋을 public에서 관리하는 걸 권장하더라고요. 그래서 제가 생각한 해결 방안은 이건데, 보시고 의견 알려 주세요!

잘 되는 것 같습니다!
절대경로를 @/assets로 사용하고 있어서 /public/assets로 사용하거나, 절대경로를 @/public으로 모두 수정하는 건 어떻게 생각하시나요?

[LEEJW1953]

4cf7b42
수정완료하였습니다

[ttaerrim]

얘는 public/morak.ico에 관리하자는 말이었습니다! 사실 사용하는 icon이라고 볼 수는 없으니까요

[LEEJW1953]

해당 경로로 파일을 옮기고 적용해봤는데, npm run dev에서는 파비콘이 보이지 않고 npm run build후 preview를 하면 파비콘이 보이네요? 이유는 잘 모르겠습니다...

[ttaerrim]

아까 svg 관련 오류난다고 했던 부분은 해결된 걸까요? 이 PR에 적어 두면 좋을 것 같습니다.

[LEEJW1953]

svg 오류 관련하여 정리하였습니다

[ttaerrim]

나중에 바꿀 수도 있겠다는 생각이 잠시 스쳐갔지만.. 🫨 approve~~