React 이미지 저장 public vs assets

2024. 1. 4. 21:57·React
반응형

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/ 폴더는 주로 코드 파일에서 사용되는 이미지 ( 컴포넌트 내에서 사용되는 이미지 )에 적합합니다.
 

 

반응형

'React' 카테고리의 다른 글

[react] useRef, forwardRef 사용방법  (0) 2024.01.08
react 양방향 바인딩 (2way data binding)  (1) 2024.01.05
'React' 카테고리의 다른 글
  • [react] useRef, forwardRef 사용방법
  • react 양방향 바인딩 (2way data binding)
jjikky
jjikky
  • jjikky
    jikky.env
    jjikky
  • 전체
    오늘
    어제
    • 분류 전체보기
      • React
      • Node.js
        • TDD
        • Node.js
        • mern
        • OAuth
        • js_facebook login
      • Coding Test
        • 백준 알고리즘
        • CodeUp
        • 코테 이론
      • Js
        • Javascript
      • study
        • python
        • android
        • Big data analysis
        • Logic Circuit
      • git
      • 개발일지
      • 게임기획
      • Docker
      • IPFS
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    nft
    Ipfs
    파이썬 완전탐색
    NFT Marketplace
    파이썬 그리디
    verilog할당문
    파이썬
    ipfs add
    파이썬 딕셔너리
    코딩테스트
    git 유용한 명령어
    그리디 알고리즘
    ifps 네트워크 지연
    verilog
    UI
    Python
    빅데이터
    범주형 자료
    안드로이드
    NFT IPFS
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
jjikky
React 이미지 저장 public vs assets
상단으로

티스토리툴바