vue 프로젝트에서 마이페이지 프로필 기본이미지를 넣다가 오류 발생
팀 컨벤션에 따라 이미지 파일은 assets - image 폴더에 넣기로 했는데,
검색해보니 public 폴더 아래에 image 폴더 생성해서 많이 넣기도 한다고 되어있었다
궁금해서 gpt한테 물어봄 !
<답변>
vue 프로젝트에서 이미지 파일을 어디에 저장할지는 목적에 따라 달라진다
1. public 폴더
용도
- 정적 파일 저장
- 빌드 시점에 별도로 처리되지 않고, 그대로 출력 폴더(dist)로 복사
접근 방식
- public 폴더에 있는 파일은 절대경로로 접근 X
ex. public/logo.png
<img src='/logo.png'>example
- 웹사이트 로고, 파비콘(favicon), 메타 태그에 사용되는 이미지 등
- 프로젝트 구조와 무관하게 고정된 위치에서 접근해야 하는 파일
2. src/assets 폴더
용도
- 웹팩(webpack)으로 처리되는 파일 저장
- 빌드 과정에서 웹팩에 의해 처리되고, 필요에 따라 최적화
접근 방식
- JavaScript나 Vue 컴포넌트 내에서 import 구문 사용해 접근
ex. src/assets/logo.png
import logo from '@/assets/logo.png';example
- 컴포넌트 내에서 사용되는 이미지, 동적으로 불러오는 이미지 등
- 빌드 프로세스의 일부로 처리되어야 하는 파일
wrap-up
정적파일(고정된 경로에서 접근해야 하는 이미지) -> public
컴포넌트/자바스크립트 파일 내에서 사용되는 이미지 -> src/assets
➰ 프로젝트의 유지보수성과 효율적인 파일 관리 가능
➰ 프로젝트의 요구사항에 맞게 두 폴더를 적절히 활용
Hello, World!