public folder, 그리고 React

public/images/hyunjungkoo

public 폴더에 images폴더를 하나 만들고, 그 안에 이미지들을 저장한 뒤, 다른 리액트 컴포넌트에서 이미지를 부를 경우

<img src="images/hyunjung/thumbnail.jpg />

와 같은 방식으로 이미지를 불러 사용했었다. 그런데!!!!
어째서인지 맨 첫 화면인 로그인 페이지 말고는 이미지들이 보이지 않는 것이다..! (뚜둔

엄청난 엑박과 alt에 작성한 문구만 보이고, 쪼글짜글 찌그러진 틀들..
열심히 검색을 진행해보았다.

PublicFolder, image

생각보다 퍼블릭 폴더에 넣어둔 이미지가 제대로 보이지 않는 경우가 꽤 존재하는 듯 싶었다. (우리 조원분들은 말이 없던데.. 왜 나만 이렇게..)
좋은게 좋은거라고 이번 기회에 새로운걸 알아가면 좋지. 하는 생각이 들어 천천히 스택오버플로우를 뒤져보았다 .ㅋㅋㅋㅋ

해결할 수 있는 방법이 가장 크게 세가지 방법이 존재했다.

1. <img src={window.location.origin + `/img/myImage.jpg`} alt="myImage" />

2. <img src={process.env.PUBLIC_URL + `/img/myImage.jpg`} alt="myImage" />
  
3. <img src= "%PUBLIC_URL%/img/myImage.jpg" alt="myImage" />

위의 세가지 방법이 사용 가능했는데, 나는 두번째를 사용해 작성했다.

이미지를 public folder에 넣어 작성할 경우 왜 이미지가 제대로 나오지 않는가?
그건 바로 "webpack" 때문이다.

webpack

webpack은 자바스크립트를 위한 static module bundler로 내가 작성한 코드를 web browser에서 사용할 수 있도록 코드를 정리하고 합쳐주는 등의 역할을 한다.
근데 이게 왜 public folder와 연관이 되는가!
바로 webpack은 public folder에 있는 것들에는 관여하지 않기 때문이다.
따라서 이미지들이 제대로 보이지 않는 현상이 발생하게 된 것!
따라서 퍼블릭 폴더에서 이미지를 가져와 사용할 것이라는 것을 명시해주어야했다.

스터디 선생님께 들은 바에 의하면, 이미지도 src 폴더에서 관여하는 측이 더 좋다고 해주셨다.
public폴더에 이미지를 넣었을 경우, 로컬 환경에서 개발자 도구로 이미지 소스 파일 추적이 가능하기 때문이다.

그럼 src 폴더에서는 이미지를 어떻게 가져와??

src폴더에서 이미지를 가져오는 방법도 여러가지가 있는데,
1. 이미지를 직접 경로를 찾아가 사용하기
2. 위치 추적하는 경로의 기준을 src 폴더로 잡기
3. 이미지를 import 해서 사용하기
가 가장 대표적인 방법이다.

1의 경우 약간의 파일 수정이 필요하고, 2번 같은 경우에는 경로의 추적이 어렵고 코드가 길어진다는 단점이 있어, 3번의 경우를 가장 많이 사용하는 듯 하다.

결론

퍼블릭 폴더에 이미지를 전부 저장하는 경우는 극히 드물다는 이야기를 어디에선가 들었다.
보통 퍼블릭 폴더에 이미지를 저장하는 경우, 이미지를 로컬 환경에서 개발자도구로 파일 째 확인이 가능하기 때문이기도 하다.
따라서 퍼블릭 폴더에서는 최소한의 파일 등을 작성하거나, 파비콘을 제외하고 거의 사용하지 않는 편이 좋다고 한다.

퍼블릭 폴더에서 이미지, 혹은 다른 파일 등을 사용할 경우, 적절하게 경로를 지정해주고 받아와야 오류 없이 예쁜 웹앱을 만들어 줄 수 있다.

웹팩은 퍼블릭 폴더에 관여하지 않는다는 것도 꼭꼭 기억해두는 것이 좋다 :)

덧붙임

알고보니까 그냥 경로 설정을 내가 잘못한거였다^^
"./images/blahblah.jpg" 이런 식으로 작성해야하는걸 "images/blahblah.jpg"로 썼기 때문...
어이없다 나자신.