React 이미지 저장 public vs assets

public/ 폴더

이미지를 public/ 폴더에 저장하 index.html 또는 index.css 파일 내에서 직접 참조할 수 있습니다.

이미지를 public/ 폴더에 저장하면 해당 이미지가 개발 서버 및 빌드 프로세스에서 공개적으로 제공됩니다. 이 폴더 내의 파일들은 브라우저에서 직접 참조할 수 있으며, 다른 파일에서도 요청할 수 있습니다.

 index.html과 마찬가지로, 이 파일들은 브라우저 내에서 직접 방문할 수 있으며, 따라서 다른 파일에 의해 요청될 수도 있습니다.

예를 들어, localhost:3000/image.jpg를 불러오면 해당 이미지를 볼 수 있습니다.

 

이 방법의 장점은 이미지가 빌드 프로세스에 의해 처리되지 않고 직접 공개되기 때문에 일부 정적 파일이나 외부에서 직접 접근해야 하는 파일에 적합합니다.

src/assets/ 폴더

반면에 이미지를 src/assets/ 폴더에 저장하면 해당 파일들은 공개적으로 제공되지 않습니다. 즉, 웹사이트 방문자가 접근할 수 없습니다. 예를 들어, localhost:3000/src/assets/image.jpg를 불러오려고 하면 오류가 발생합니다.

 

대신,src/ (및 하위 폴더)에 저장된 파일은 코드 파일에서 사용할 수 있습니다.

이 방법은 주로 컴포넌트 내에서 사용되는 이미지와 같이 코드 파일에서만 사용될 예정인 경우에 적합합니다. 이 폴더 내의 이미지는 빌드 프로세스에 의해 최적화되고, public/ 폴더에 배치된 후 웹사이트에서 사용 가능한 위치에 링크됩니다.

 

결론

 public/ 폴더는 정적인 파일이나 외부에서 직접 접근이 필요한 파일에 사용되며, src/assets/ 폴더는 주로 코드 파일에서 사용되는 이미지 ( 컴포넌트 내에서 사용되는 이미지 )에 적합합니다.