[React] 리액트 애플리케이션에서 이미지 경로 정리

이미지 경로를 작성할 때 src폴더 안에 있는 이미지들을 사용할 땐 언제나 ./ 이게 현재경로다. src 폴더에 있는 파일들은 리액트 앱을 발행했을 때 저절로 압축이 되고 파일명이 변경된다.

 

public 폴더에 있는 파일은 리액트 앱을 발행했을 때 사이트 루트경로에 그대로 남아있는다. 그래서 / 이렇게 경로를 입력해도 잘 동작한다. 그래서 public 폴더에 있는 이미지들은 <img src="/image.jpg" /> 이렇게 써도 첨부가능하다.

(하지만 리액트 17버전 이상에선 public 폴더안에 있는 이미지를 CSS파일에서는 /image.jpg 이렇게 첨부할 수 없으므로, CSS파일에 작성할 이미지들은 src폴더 쓰고 ./ 이렇게 접근하는 게 좋다.)