[리액트] 이미지 저장하기 : public vs assets

리액트에서 이미지 파일을 저장하는 경로는 크게 두 개로 나뉩니다. 바로 public 폴더와 src/assets 폴더인데요! 각각 어떤 특징을 가지고 있는지 알아보겠습니다.

public/폴더

• public 폴더에 저장된 이미지는 index.html 또는 index.css 파일 내에서 직접 참조할 수 있습니다.
• public/에 저장된 이미지 및 파일은 프로젝트 개발 서버 및 빌드 프로세스에 의해 공개적으로 제공됩니다.
• 이 파일들은 index.html처럼 브라우저 내에서 직접 방문 및 요청이 가능합니다.

public 폴더에 있는 파일은 localhost:5173/파일이름.확장자로 접근하면 볼 수 있습니다.

src/assets/폴더

• src 또는 src/assets/와 같은 하위 폴더에 저장된 모든 파일은 공개적으로 제공되지 않습니다. 웹사이트 방문자가 접근할 수 없습니다.
• localhost:5173/파일이름.확장자로 접근하면 오류가 발생합니다.
• src/ 에 저장된 파일은 코드 파일에서 사용할 수 있습니다.
• 코드 파일에서 가져온 이미지는 빌드 프로세스에 의해 인식되어 최적화됩니다.
• 웹사이트 제공 직전에 public/ 폴더에 삽입됩니다.
• 참조한 위치에서 자동으로 링크가 생성되어 사용됩니다.

언제, 어떤 폴더를 사용해야 할까? 🤔

• 빌드 프로세스에 의해 처리되지 않는 이미지 ➡️ public/
• 컴포넌트 내에서 사용되는 이미지 ➡️ src/assets/

즉, public 에는 앱이 컴파일될 때 사용되지 않는 모든 것, src에는 앱이 컴파일될 때 사용되는 모든 것을 넣습니다.

참고할 만 한 글

Public / Src 폴더 선택