반응형 반응형3 img srcset과 size srcset에서 w나 x등의 디스크립터는 정확히 말하면 이미지의 실제 규격과 관련된 것이다. 개발자가 반응형 break-point로 사용하기 위해 어찌저찌 할 수 있는 것이 아니다. 즉, srcset의 디스크립터를 view port와 연관지어 생각하면 안된다. srcset의 목적은 브라우저에게 이미지의 정보를 알려주고 '브라우저 니가 알아서 선택해' 라고 선택권을 주는 것이다. 개발자가 break-point를 명시하여 반응형으로 렌더링하려면 css media query나 img태그의 size속성을 이용하면 된다. 그러면 정해진 break-point내에서 브라우저가 srcset속성을 참고하여 최적의 이미지파일을 선택하여 렌더링한다. srcset에서 최적의 이미지를 선택하는 기준은 브라우저의 캐시,네트워크 .. 2023. 10. 14. Next에서 커스텀 훅(useWindowSize)로 반응형을 작성하면 안되는 이유 우리 회사는 Next로 랜딩페이지를 관리하고 있다. 첫 렌더링을 SSR로 하게 된다. 한편 반응형은 CSS로도 하고, useWindowSize라는 커스텀훅으로도 하고 있다. useWindowSize훅은 다음과 같다. // useWindowSize.ts import { useState, useEffect } from 'react'; export const useWindowSize = () => { const [windowSize, setWindowSize] = useState({ width: undefined, height: undefined }); useEffect(() => { const handleResize = () => { setWindowSize({ width: window.innerWidth.. 2022. 7. 18. 리팩토링 : 지도 위주의 UI로 변경 기능은 크게 바뀐거 없고 CSS만 수정했다. 면접준비하느라 많이 못했음. 2022. 1. 5. 이전 1 다음 반응형
