public 폴더와 src폴더의 이용에 있어서 간단한 시행착오를 겪어서 블로그에 메모해두기 위해서 이렇게 글을 작성하게 되었습니다 ㅎㅎ
목차
0. public 폴더가 왜..안돼지?
처음에는 모든 사진들을 public 폴더에서 관리하면 좋겠다라는 생각을 했었습니다.
그래서 여기다 사진 파일을 넣어둔 후에 src 내부에서 import해서 가져오려고 했습죠..
근데.. 막상 불러서 사용하려고 하니 실패..
왜냐.. 상대경로로 import해서 사용하기 위해서는 src 폴더 내에서 가져와야 합니다.
CRA 4.x버전부터 바뀌어버렸다는거..
https://github.com/facebook/create-react-app/issues/10022
CRA 4 fails to compile when css background-image ulr('url') not resolved · Issue #10022 · facebook/create-react-app
I have a css file that is imported in my react app, it is something like: styles.css .flag { ... background-image: url("/img/flags.png") !important; } It is imported in my react file ->...
github.com
1. 아 public폴더 쓸래 ;;
굳이 import해와야 하는 경우가 아니라면, img 태그의 src속성에서는 default가 public 폴더로 되어있기 때문에 바로 불러와서 사용하면 됩니다.
관련 내용은 아래 링크에서 확인하실 수 있습니다.
ReactJS and images in public folder
Im new in ReactJS and I want to import images in a component. These images are inside of the public folder and I do not know how to access the folder from the react component. Any ideas ? EDIT ...
stackoverflow.com
혹은 환경변수를 이용하는 방법도 가능합니다.
process.env.PUBLIC_URL, 혹은 %PUBLIC_URL%과 같이 환경변수를 만들어서 사용하면 기존 방식을 우회(?)해서 사용하실 수도 있습니다.
해당 내용은 무려 공식문서에 나와있습니다!!
Using the Public Folder | Create React App
Note: this feature is available with react-scripts@0.5.0 and higher.
create-react-app.dev
2. 그렇다면 무슨 차인데?
public폴더 내에 넣게 되면 webpack에 의해 관리되지 않고 원본이 build폴더에 복사됩니다.
따로 후처리나 경량화되지 않는다는 특징을 가지게 되죠.
또는 특정한 파일 이름이 필요한 경우 사용할 수도 있다고 합니다! (저는 이 경우는 아직 겪어보지 못했습니다!)
최근댓글