서론

리액트로 프로젝트를 하면서 이따금씩 이미지, 아이콘 관리는 어떤 방식을 차용하는것이 좋은지 고민을 하게 된다. 특히 새로운 프로젝트를 시작할때에는 더욱 그런 것 같아 여러 방식의 장단점을 조사해보기로 하였다.

배경

프로젝트 내에서 asset을 관리하는 일반적인 방법 3가지를 기술하고, 개별 사항 별로 장단점, 사용 예시를 조사해보기로 하였다.

Assets (.png | .jpg etc..)

React 프로젝트에서 사용하는 일반적인 방법

src

pros

• 이미지 혹은 asset이 웹팩을 통해 번들링되는 과정에서 해쉬값이 정해지기 떄문에 캐싱을 걱정할 필요가 없다. 또한 웹팩의 커스텀 유무에 따라 이미지관련 처리를 최적화 할 수 있다.

cons

만일 리액트 컴포넌트 내에서 해당 이미지/ 아이콘을 사용한다면 src에서 관리하는것이 바람직하다.

public

pros

• 파일이 앱과 같은 서버에 정적으로 존재하기 때문에 불러오는 퍼포먼스가 좋아진다.

cons

• 웹팩을 거치지 않기 때문에 이후 최적화 작업을 할 수 없다.

• 해당 파일명으로 이미지 캐싱이 되어있기 때문에 해당 이미지 변경시 파일명도 필히 변경해야한다.

• 컴파일을 거치지 않기 때문에 해당 이미지의 에러를 빌드 된 후 404에러로 알게 된다.

리액트 컴포넌트 외 favicon같이 컴파일을 거치지 않아도 되는 이미지는 public에서 관리하는것이 바람직하다.

external server

pros

• 프로젝트 내부에서 관리할 필요가 없다.

• url로 접근이 가능하기에 CDN을 통해 불러오는 퍼포먼스가 좋아진다.

cons

• 해당 파일명으로 이미지 캐싱이 되어있기 때문에 해당 이미지 변경시 파일명도 필히 변경해야한다.

• 비싸다.

s3 / 클라우드 서버에 해당 이미지를 업로드하고 불러오는 방식이다.

url로 접근이 가능하기에 CDN을 통해 불러오는 퍼포먼스가 좋아진다.

결론

Component 내에서 사용하는 Asset 들은 src 내에 저장하는 것이 일반적이다.

public/index.html 에서 사용하는 favicon 등은 전후 처리가 필요하지 않기 때문에 public 에 관리하는것이 리소스를 덜 낭비하는 것이다.

일반적이라, 많은 사람들이 쓰니까 그냥 사용했지만 실질적인 내부 상황은 몰랐었다.

출처
https://medium.com/geekculture/managing-assets-for-react-project-52a017e3e10c