강의 내용과 조금 떨어진 질문입니다. 크롬 개발자 툴에 컴포넌트를 보여주는것과 프롭스,훅스 등을 보여주는 창이 가로로 나뉘어져 보여지고 있는데, 이걸 윈터루드님처럼 위아래로 나뉘어지게 하려면 어떻게 해야하나요?

로컬에 있는 이미지를 이용할때보다 서버에서 url 주소로 전달 받아 이용하는 경우가 더 많은데, 그럴때도 webp로 변환할 수 있는 방법이 있을까요?  아니면 다른 최적화 방법이 있나요? 

Items 페이지의 보드들의 이미지가 깨져서 보입니다 수정완료된 소스 코드가 따로 존재하는 건가요?

안녕하세요 캐시수업도 매우 유익하네요 ... 수업듣고 사이트를 보다가 궁금한점이 생겼는데요~   질문1.  HTML 상단 메타태그에 <meta http-equiv="Cache-Control" content="no-cache"> 를 주면 서버에서 설정하지 않아도 예제에서 사용한거랑 같이 해당 HTML이 변경될 때만 다운로드할까요 ?  (이러면 request header의 캐시컨트롤에 노캐시가 붙나요?)   질문2.  예제에선 HTML을 제외하고 CSS JS Image의 max-age를 길게주고  소스 변경시에만 hash를 다르게 붙여 변경된 리소스만 새 파일을 다운로드 하게 했는데요   HTML CSS JS Image를 모두 no-cache로 주면 어떻게 작동할까요 ?   

좋은 강의 너무 잘 듣고 있습니다.  번외지만 배포에대해 궁금한점이 있습니다.  지금 강의 예제로 사용하는 프로젝트와 같이 서버와 클라이언트 코드가 같이 있는 경우에는 어떻게 배포해야하는지 궁금합니다. 개발할때는 npm run serve 와 같이 수동으로 서버를 켜서 작동시킬 수 있지만 그렇지 않을때는 어떻게 작동시킬 수 있나요? 실제로는 서버용 레포, 클라용 레포 따로 개발해서 배포해야하는 건가요?

강사님 강의자료는 어디서 받을 수 있나요?? 아무리 찾아봐도 없어서 질문드립니다.

안녕하세요. 웹 최적화 파트1,2 수강자입니다.   수강을 하면서 웹에 대해 최대한 성능 좋게 개발을 꾸준히 하려고 노력하고 있습니다. 이에 따라 여러 가지 고민이 되는 부분이 생겨서 해당 카테고리와는 크게 관련성은 없지만 여기에 글을 올려봅니다.   궁금증 1.   useMemo, useCallback 관련하여 질문드리고 싶습니다.   memoization을 통해 불필요한 렌더링을 줄일 수 있는 장점을 가지고 있어 위와 같은 훅을 잘 사용해보려합니다. 하지만 효율적으로 사용을 해야 메모리 적으로 봤을 때 문제가 되지 않을거같아 고민을 하는 찰라에 많은 개발자분들이 단순히 useState에서 set하는 부분만을 useCallback에 담아서 사용하는거 같더라구요.   예를 들어 const [ isOpen, setIsOpen = useState<boolean>(false); const callback = useCallback( () => {setIsOpen(true)}, []);   이런 식으로요.   하지만 제 생각에는 이렇게 작은 것도 다 넣으면 모든게 메모리에 올라가게 되어 메모리 낭비인가 라는 생각이들었습니다.이러한 작은 것들도 다 useMemo나 useCallback 을 적용하는 것이 메모리적인 관점에서 보는 것보다 렌더링에 이점을 주는 것이 더 큰가라는 생각이 듭니다.   혹시 이 부분에 대해 피드백 해주시면 감사하겠습니다.   궁금증 2.   많은 input에서의 onChange에 따른 렌더링   회원가입 폼과 같이 input 굉장히 많은 경우 여기에 onChange Event에 따라 회원정보가 set이 되고 타이핑할 때마다 리렌더링이 된다는 생각이 과하다는 생각이들어서 질문 드립니다.   그래서 제가 생각해본건 useRef로 모든 input에 접근하고 회원가입 버튼 눌렀을 때 한번에 input value 를 가져와서 한번만 set을 하는게 낫지않을까 라는 생각도 들었습니다.   위와 같은 생각이 잘못되었는지, 혹은 onChange에 따라 set을 다해도 가상돔으로 비교해서 전체 다 그려주는게 아니기 때문에 큰 이슈는 되지않아 그냥 사용해도 될지에 대해 궁금합니다.   답변해주시면 정말 감사하겠습니다.  

강의 잘 보고 있습니다!  혹시 @font-face {} 가 들어있는 css를 link ref="preload"하면  해당 css를 미리 불러오면서 폰트도 사전로드 되는걸까요 ?    아니면 폰트 사전로드는 무조건 link로 걸어줘야될까요 ?  

좋은 정보 정말 감사합니다! 돈이 아깝지 않네요ㅎㅎ

불필요한 css를 purgecss로 제거하셨는데, 궁금한 점이 웹앱의 경우는 웹에서 사용하는 css는 앱에선 필요없고, 앱에서 사용하는 css는 웹에서는 필요없는데 이런것도 구별해서 제공을 해주는지 궁금합니다. 웹앱의 경우는 두개의 css를 다 갖고 있어서 불필요한 css를 줄일 수 있는지가 궁금합니다.

네트워크 탭으로 분석했을 때 비디오 리소스가 팬딩상태였다가 이미지 로드 완료 후 요청되는데 왜 항상 비디오가 이미지보다 늦게 요청되는 걸까요? 리소스 타입에 따른 브라우저 네트워크 상의 우선순위같은 것이 있는지 궁금합니다!

안녕하세요! 강의 너무나 잘보고있습니다!^^ 이미지 lazy 로딩부분을 보고 궁금한게 생겨서 문의드립니다! 강의에서는 interserctionObserver에 options이 설정되어있지 않은데 root정도는 설정 되어야 성능상 이롭다라는 말도 있던데 정말 그런지 강사님의 의견이 어떤지 궁금합니다.!!

안녕하세요! 강사님 질문드립니다.useRef로 img의 dom을 선택하는데 ref를 img태그(19번)가 아닌상단의 div태그(18번)의 ref를 걸으신 이유가 따로 있는걸까요? 아니면 둘다 똑같은건가요? 저는 당연히 img태그의 ref를 걸어야한다고 생각했어서 질문드려요! (19번라인) 앗 죄송해요 22분 22초경에 img태그로 ref위치 수정하시네요!!.. 답변안해주셔도될것같습니다~ 좋은강의 만들어주셔서 감사합니다

31분 52초 화면만 보고 질문 드립니다 :) photos를 외부로 옮긴 다음 PhotoList의 프롭으로 photos를 넘기게 되면 PhotoList 입장에서는 프롭이 변경된것이라고 판단 되어서 리렌더링이 될 것이라고 생각했는데 PhotoListContainer자체가 photos의 필터 연산을 외부로 옮기는 방식으로 리렌더를 하지 않기 때문에 자식 컴포넌트 자체도 리렌더링이 안되는 것이 되는 건가요?  

내용을 정리해놓고 보고싶은데 혹시 1,2 강의 요약해서 블로그로 작성해도 될까요? 강의 내용을 요약했다고 명시하겠습니다.

동균님 안녕하세요. 좋은 강의 공유해주셔서 감사합니다 :) 지금 페이지를 로컬에서 띄워보면서 페이지 분석을 하고 있는데요, Items 페이지의 보드들의 이미지가 깨져서 보입니다. 또한 보드 클릭시 이동하는 링크도 현재 존재하지 않아 리다이렉트되는 것 같습니다.  Network탭을 확인해보니 이미지 파일에 대한 Response 가 500 으로 오고 있습니다. land-mfg.com 의 대대적인 홈페이지 개편이 있었던 걸까요..?  참고목적으로 스크린샷 공유드립니다 :) 

안녕하세요! 좋은 강의 공유해주셔서 감사합니다.   Part1 에 이어 Part2도 즐겁게 수강하고 있습니다 :)   다름이 아니라 3-2) 서비스탐색 및 코드 분석 강의 하단에 있는   소스코드의 링크가 문구와는 다르게 lecture-4 를 가리키고 있습니다.   lecture-3로 변경이 필요할 것 같습니다.   clone하고 나서 순간 좀 당황했네요 ㅎㅎ..

이강의에서는 이전강의에서 layout shift 에 대한 처리를 해서 현재는 발생하지 않고있지만, 보통이라면 lazy loading 을 할때 layout shift 가 반드시 따라올것같은데 image lazy loading시에는 선작업으로 무조건 layout shift를 없애주어야하는것일까요?

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.   먼저 좋은 강의감사합니다.   질문이있습니다. 보여주신 예제는 전부 동일한 이미지일때인데   각 이미지마다 사이즈가 다른 갤러리에서는 어떻게 적용하면 좋을까요 ? 예를들어 이런 사이트의 형식입니다. https://www.pinterest.com/seanbiehle/finterest/

04:08 과 같이 devtools에서 Event탭이 보이지 않는데 devtools의 버전이 올라가서 일까요? Timeline에서 확인할 수 있던데.. 여기서 보는게 맞나요?