【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript
실습 코드
https://github.com/durumi99/tic-tac-toe
이미지 저장소 pubilc/ VS assets
public/ 폴더
이미지를 public 폴더에 저장하고 index.html 또는 index.css 파일 내에서 직접 참조할 수 있습니다.
이렇게 하는 이유는 public/ 에 저장된 이미지(또는 일반적으로: 파일)이 프로젝트 개벌 서버 및 빌드 프로세스에 의해 공개적으로 제공되기 떄문입니다. index.html 과 마찬가지로, 이 파일들은 브라우저 내에서 직접 방문할 수 있으며, 따라서 다른 파일에 의해 요청될 수도 있습니다.
예를 들어, http://localhost:5173/some-image.jpg 를 불러오면 해당 이미지를 볼 수 있습니다.
src/assets/ 폴더
이미지를 src/assets/ 폴더에 저장할 수도 있습니다.그렇다면 public/ 와 비교해 어떤 차이가 있을까요?
src 또는 src/assets/ 와 같은 하위 폴더에 저장된 모든 파일은 공개적으로 제공되지 않습니다. 웹사이트 방문자가 접근할 수 없습니다.
대신, src/에 저장된 파일은 코드 파일에서 사용할 수 있습니다. 코드 파일에 가져온 이미지는 빌드 프로세스에 의해 인식되어 최적화되며, 웹사이트에 제공하기 직전에 public/ 폴더에 삽입됩니다. 가져온 이미지는 참조한 위치에서 자동으로 링크가 생성되어 사용됩니다.
어떤 폴더를 사용해야 할까요?
빌드 프로세스에 의해 처리되지 않는 이미지는 public/ 폴더를 사용해야 하고 대체적으로 사용 가능 합니다. 옏를 들면 index.html 파일이나 파비콘과 같은 이미지가 좋은 후보입니다.
반면, 컴포넌트 내에서 사용되는 이미지는 일반적으로 src/ 폴더에 저장되어야 합니다.
