Next.js 기반의 프로젝트를 진행 중, 동료가 모든 이미지에 대해Image 컴포넌트를 사용하는 것을 peer riview 도중 파악했습니다. 동료분에게 리뷰로 짧게 설명하기보단 문서화를 통해서Next.js 환경에서는 꼭 Image 컴포넌트만 사용해야 할까?라는 것을말씀드리고 싶었고, 당시 전하고자 하는 내용을 블로그에도 포스팅해보았습니다.🤷🏻‍♂️ 둘의 사용 시점은 서로 다릅니다.HTML 태그를 사용하는 경우:매우 작은 크기의 아이콘이나 데코레이션용 이미지 (10x10 px 같은 경우)정적이고 변경되지 않는 작은 이미지성능 최적화가 크게 중요하지 않은 경우외부 이미지나 SVG 아이콘로딩 시간이나 레이아웃 시프트가 중요하지 않은 상황Next.js Image 컴포넌트를 사용하는 경우:다양한 디바이스..

이전 회사에서 진행한 채팅 프로젝트에서 유저가 이미지를 첨부한 메시지가 많아질수록 이미지 로딩이 오래 걸리는 현상이 있었다. 대부분의 유저가 텍스트 메시지를 사용하기도 했고 이미지를 많이 보내는 유저도 드물었지만 유저는 항상 예측할 수 없는 행동을 하기에 대량의 이미지를 로딩해오는 부분에 대해 고려가 필요했다. 그 때 사용했던 것이 react-lazy-loading이었다. 웹 페이지의 성능 개선 중 하나이다. 효율적으로 import를 하는 것으로도 성능 개선이 가능하다. 모든 import를 한 번에 가져오는 것 보다 필요할 때만 가져와서 import를 해줌으로서 resource 낭비를 줄이기 때문이다. 그 방법으로 react-lazy-loading이라는 것이 있다. 쉬운 말로 해당 컴포넌트로 화면을 렌더..