틀린 내용이 있다면 댓글로 알려주세요 :)
npx create-react-app my-app을 터미널에 입력하면 자동으로 public 폴더와 src 폴더가 생성된다.
각 폴더에 넣는 파일에 차이가 있는데!
두 폴더에 무슨 차이가 있을까?
📁 public : 앱이 컴파일될 때 사용하지 않는 모든 것
- 앱을 컴파일하는 데 필요하지 않은 요소들.
- 절대경로 사용이 가능해진다!
- import 해올 일이 있을 때,
../../이렇게 상대경로로 써주지 않아도 되고, 그냥 파일명 써주면 가능하다! - 정적파일을 담는 곳. 사용자가 직접 웹브라우저상으로 볼 수 있는 index.html같은 파일들, image 파일들이 담긴다.
- 경로를 동적으로 참조해야 할 때 퍼블릭 폴더를 쓴다
(You have thousands of images and need to dynamically reference their paths. 상대경로로 쓰면 경로가 하나 바뀔 때마다 다 수정되기 때문에인가?)
📁 src : 앱이 컴파일 될 때 사용하는 모든 것
- 개발하면서 작업하는 파일 대부분을 넣는 폴더(index.js, 그 외 컴포넌트 같은 js파일, css파일 등)
예를 들어, 컴포넌트 안에서 사용하는 이미지는 src폴더에 있어야 하지만 파비콘과 같이 앱 밖에서 사용하는 이미지는 public 폴더에 있어야 한다.
public내 파일 가져올 때 절대경로 사용예시
const [data, setData] = useState([]); useEffect(() => { const fetchData = () => { fetch('/data.json') .then(res => res.json()) .then(resData => { setData(resData.posts) }) } fetchData(); }, [])
- src폴더안에 있는 jsx파일에서 public/data.json파일을 가져오기 위해 썼던 코드다.
fetch 안에 원래 데이터를 받아올 url을 적어줘야 하는데 test 용이기 때문에 파일을 받아오게 됐는데!
저렇게 파일 이름이름만 써줘도 받아와진다!
왜냐? public 폴더를 기준으로 경로를 써주면 되기 때문에~!
이미지 파일 가져오기
만약 이미지파일을 두 폴더에서 가져오려면
📁 public
<img src="/image.jpg" />
📁 src
<img src={require('../../assets/image.jpg')} />
src폴더에 있는 이미지는 require를 통해 가져올 수 있다.
src폴더에서 require를 통해서 가져 온 이미지가 갖는 장점이 있다는데!
- Scripts and stylesheets get minified and bundled together to avoid extra network requests.
추가 네트워크 요청을 피하기 위해 스크립트와 스타일시트가 축소되고 함께 번들됩니다.
-
Missing files cause compilation errors instead of 404 errors for your users.
파일이 없으면 사용자에게 404 오류 대신 컴파일 오류가 발생합니다. -
Result filenames include content hashes so you don’t need to worry about browsers caching their old versions.
결과 파일 이름에는 콘텐츠 해시가 포함되므로 브라우저가 이전 버전을 캐싱하는 것에 대해 걱정할 필요가 없습니다.
또, webpack's asset bundling을 사용하면 /src내의 파일들이 rebuilt된다!
-> rebuild를 빠르게 하기 src내부의 파일만 webpack에서 처리되므로 /src안에 모든 JS, CSS 파일을 넣어야 한다. 안그럼 webpack에서 볼 수 없음!
아하 ! js, css파일들이 src에 들어있었던 이유!
그렇다면 반대로 public 폴더로 가져온다면?
-
파일이 후처리(post-process)되거나 경량화(minify)되지 않음
-
파일 경로를 잘못 입력하거나 해당파일이 존재하지 않을 경우 컴파일 단계가 아닌 사용자가 접근할 때 404 오류를 응답받음
-
결과 파일명에 content hash가 포함되지 않기 때문에, 파일이 수정될 때마다 직접 파일명을 수정하거나 매개변수 쿼리를 추가해야 한다.
혹시 import를 안하고 인라인으로 src 내의 이미지 파일을 불러오고 싶다면!
<img src={require("../../../assets/Logo.svg").default}/>이런식으로 상대경로를 안에 써줘야 한다!
.default를 안쓰면 객체가 return 되기 때문에
defult까지 꼭 붙여주기!
(참고한 사이트:
https://stackoverflow.com/questions/44643041/do-i-store-image-assets-in-public-or-src-in-reactjs
https://create-react-app.dev/docs/using-the-public-folder/#when-to-use-the-public-folder
https://bokjiho.medium.com/react-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EA%B2%BD%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-public-src-%EB%94%94%EB%A0%89%ED%86%A0%EB%A6%AC-%EC%B0%A8%EC%9D%B4-fddb4f455c2a
)
