정적 이미지가 아니라, 동적으로 받아오는 이미지의 경우
안녕하세요. 강좌 잘 보고 있습니다.
해당 회차에서는
img.src = "url" 하여 고정된 이미지를 먼저 preload 하는 방법을 알려주셨는데요.
서버에서 대표 이미지를 동적으로 받아와야하는 경우
(대표이미지가 최신 이미지로 변화하는 경우나, 동적 알고리즘에 의해 순서가 정해지는경우)
는 보통 어떻게 처리하는 편인가요?
-
제가 그냥 생각나는 방법으로는
1. 이미지 썸네일 아이콘 (사진그림, 사진 아이콘) 을 먼저 띄워두거나
2. 백서버에서 고정 이미지 경로에
항상 바뀐 대표 이미지를 넣어 주도록 스케쥴링 하거나
3. 대표 1장 이미지 경로만 응답해주는 api 를 별도로 만들어 호출해주거나
-
정도가 있는거 같은데
실무에서는 보통 어떻게 처리하는지요?
답변 1
2
안녕하세요, 불멸의너구리좌님.
실무에서 동적 이미지를 대표 이미지로 불러올 때 주로 어떤 방법으로 불러오는지를 질문해주셨는데요,
일반적인 홈페이지에서의 대표 이미지는 고정이라 단순히 하드코딩를 하지만,
특정 서비스 페이지의 경우, 동적인 이미지를 띄워야 하는 경우도 있습니다.
(꼭 대표 이미지가 아니더라도 다양한 영역의 이미지에서도)
이 때, 서버에서 어떤 이미지를 선택해서 클라이언트로 넘겨줄지는 해당 서비스의 정책에 따라 달라질 수 있습니다.
단순히 몇 가지 이미지 중에 랜덤을 돌려서 선택할 수도 있으며, 각 이미지에 가중치를 부여해 (인기 순, 최신 순 등) 대표 이미지를 선택할 수도 있습니다.
그 다음 웹 상에서 해당 이미지(동적인 이미지)를 받아 올 때는 일반적으로 API를 통해 주소를 받아온 뒤 해당 주소를 이미지로 로드하는 방식을 사용합니다. 물론, 이 외에도 말씀해주신 것처럼 고정된 이미지 경로에 이미지를 바꿔가며 설정하는 경우 등, 각 서비스의 상황에 따라 여러가지 방식으로 이미지를 로드할 수도 있겠지만, 일반적인 경우는 아닙니다.
참고로 preloading 기법과 동적인 이미지를 처리하는 것은 별개의 문제라는 점, 짚고 넘어가겠습니다.
강의에 관심을 가져주셔서 감사합니다. :)
bundle analyzer 에 대한 질문이 있습니다.
0
108
2
Cannot find module serve 에러
1
104
1
성능 탭에서 소요시간이 안보입니다
0
205
2
이미지 CDN 만드는 방법
0
459
1
Performance FPS 탭이 안보여요.
1
797
1
CPU throttling이 뭔가요?
0
1119
1
default export가 아닌 named export일 때 lazy사용법
1
1070
1
lazy적용하였는데 네트워크탭에 분리하여 보이지 않습니다
1
583
1
network 캐싱에 대해서 질문 있습니다!
1
427
1
vue project에서 chrome performance tab 확인하기
1
458
1
node version으로 인한 오류
4
1231
1
강의 자막
1
956
2
번들파일과 병목현상 질문
2
396
1
webpack-bundle-analyzer 질문
1
786
1
이미지 프리로딩 질문
1
385
1
이미지 최적화 활용
1
581
1
강력 새로고침
1
323
1
Suspense 관련해서 질문드립니다
2
360
1
config-overrides cant resolve path
1
362
1
이미지 preload 컴포넌트 preload 차이 질문드립니다.
1
611
1
custom react 환경에서 node_modules chunk 분리
1
380
1
removeSpeical 함수를 줄여야겠다고 하는 이유!
1
282
1
Factory pattern에 대해서 궁금한 점이 있습니다
2
366
2
텍스트 압축 방식에 대해 질문이 있습니다
2
951
1