[개발&이슈 : React] process.env.PUBLIC_URL

1.  오류 발생

이렇게 라우팅이 최상위에 있으면 Navbar의 이미지가 잘 출력이 되는데.....

최상위에 있지 않은 컴포넌트 라우트 경로에 대해서는 이미지가 출력되지 않는다...

---

도대체 왜지??!?!?!?

2. 쓰던 방식에 대한 고찰

React의 디렉토리중 public 폴더에 images 폴더를 만들고 그 안에 이미지를 담아

<img src={process.env.PUBLIC_URL + "images/icon_bell_.png"} alt="bell"/>

이런식으로 사용했다.

 

사실 뭣도 모르고 그냥 인터넷에서 사용하는대로 process.env.PUBLIC_URL을 사용했다. 저게 뭔지도 모른채...

우선 React 프로젝트를 생성하고 나면

• public
• src

내가 현시점에서 건들 수 있는 디렉토리는 이렇게 두가지로 나뉜다.

 

나는 여기서 Public 디렉토리에 images 디렉토리를 만들고 이미지파일을 넣었는데 이렇게 하니 jsx파일에서 img source를 불러올때 문제가 되었다.

따라서 process.env.PUBLIC_URL + "이미지경로"을 사용하여 이를 해결해왔다.

그렇다면 process.env.PUBLIC_URL 는 뭘  의미할까?

process.env → nodejs에서 환경변수을 객체로 가져 자바스크립트에서 사용할 수 있게 하는 변수

그 중 process.env.PUBLIC_URL은 React에서 사용되는 환경변수로 public 디렉토리의 절대경로를 가르키는 값을 가진다.그래서 public 디렉토리에 있는 Images 디렉토리에 접근할 수 있었던 것이다!

 

3. 이제 문제를 해결해보자!

인터넷을 뒤적뒤적거리니 상대경로로 설정하면 된다고 한다.

<img src={process.env.PUBLIC_URL + "/images/icon_bell_.png"}/>

 그래서 images 경로 앞에 / 를 추가하여 수정했더니...

오류없음

 

4. 깨달음

최상위 경로에서는 / 를 붙이지 않아도 컴포넌트의 이미지가 잘 작동하지만 경로가 한단계 이상 깊어질 경우 작동하지 않으니 반드시 상대경로를 지정해서 이미지 경로를 setting해야한다는 것을 알았다.

 

5. 더 나아가...

문득 src와 public으로 나뉘어서 존재하는 디렉토리 사이에 어떤 관계가 있는지 궁금해졌다. 
또, 이미지파일들을 어느 디렉토리에 넣고 관리해야 더 좋은 성능(?)을 내는지 궁금해졌다.
이 내용은 학습 후 다음 포스트에 써보도록 하겠습니다~(밥 먹어야됨ㅋㅋ)

 

배고파...