서론
React나 Next.js를 사용하다 보면 이미지를 어디에 저장해야할지 고민할 때가다. 크게 이미지를 사용하는 방식은 3가지가 있다.
1. public 폴더에 저장하여 사용
- 첫 번째 방법은 public 폴더에 저장하여 사용하는 방법이다.
- public에 있는 파일들은 정적 파일이며 동적으로 불러와 사용하기 쉽다.
- 빌드 시 영향이 가지 않는 폴더이며 webpack으로 처리되지 않고 빌드된 폴더에 그대로 저장된다.
- Next.js의 경우, 사용자가 요청할 때 자체적으로 제공해주는 next/image컴포넌트를 통해 이미지를 최적화해준다. 그렇기에 빌드 시에 허비되는 시간이 없으며, src에 저장하지 않아도 된다.
2. src 폴더에 저장하여 사용
- 두 번째 방법은 src 폴더에 저장하여 사용하는 방법이다.
- React와 같은 자체적으로 최적화할 수 있는 방법이 없는 경우에서는 주로 이 방법을 사용한다.
- 해당 이미지를 쓰는 컴포넌트 폴더에 같이 저장해 별도로 이미지를 관리하거나, assets에서 관리하는 등 구조는 다양하다.
- webpack에서 처리되기 때문에 추가적인 최적화가 가능하다.
3. 외부 서버 이미지 사용
- 세 번째 방법은 AWS S3와 같은 외부 스토어에 저장 후 불러와 쓰는 방법이다.
- 따로 이미지에 대한 관리에 신경 쓰지 않아도 된다.
- 이미지가 바뀌어도 브라우저 캐시 때문에 바뀌기 이전에 이미지가 불러와진다. 그렇기 때문에 이미지가 바뀔 시에 content hash과 같은 특정한 값들을 부여해서 저장하거나 받아올 때 다르게 받아와야한다. 아니면 캐싱시간을 짧게 가지는 것 또한 방법이다.
참조
피드백은 언제나 환영입니다.