hackurity01

시니어 (9년 이상)

안녕하세요, leeebug 님.모두 공부해보면 좋겠지만, 제가 선택을 한다면 Rollup을 먼저 공부해볼 것 같습니다. 이유는 다음과 같습니다.<ul><li>뭐가 새로 등장하는 번들러라는 개념에서는 크게 다르지 않음<ul><li>즉, 번들링 기능에서 디테일한 차이는 있겠지만, 동작하는 방식에서는 대동소이함</li><li>물론, 최근 빌드 도구들은 다양한 기능들(번들링, 트랜스파일링 등)을 종합적으로 가지고 있어서 전체적인 이해를 하려면 번들러 뿐만 아니라 다른 기능들에 대해서도 이해할 필요는 있음</li></ul></li><li>가장 전통적이고 역사(?)가 긴 Webpack을 공부하면 좋긴 하지만, 요즘 번들러에 비해서 많이 복잡함<ul><li>따라서 우선 간단한 Rollup을 중심으로 공부하고 여유가 있다면 Webpack의 구조도 보면 좋을 듯</li></ul></li><li>개인적으로는, Rolldown은 아직 안정적인 버전이 아니라고 생각해서 실험적인 도입이 아니면 간단한 토이프로젝트에서만 사용해보고 우선 지켜보는 것을 추천</li></ul>물론 상황에 따라서는, 그러니까 현업에서 Webpack을 주로 사용하고 계시다면 Webpack을 먼저 공부해보는 것이 좋겠습니다!&nbsp;도움이 되셨길 바라며 강의에 관심을 가져주셔서 감사합니다!

번들러 이해 및 학습 방향에 대한 질문입니다.

안녕하세요, 승철님&nbsp;혹시 실습 자료 못 찾으셨나요?실습 레포지토리 주소는 각 섹션의 앞 영상에 링크 걸려있습니다.<ul><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/performance-lecture/lecture-3/">https://github.com/performance-lecture/lecture-3/</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/performance-lecture/lecture-4/">https://github.com/performance-lecture/lecture-4/</a>&nbsp;</li></ul>

예제 프로젝트 관련 질문입니다.

안녕하세요, 수병수병님가능할 수도 있고, 불가능할 수도 있습니다...!강의에서는 bundle-analyzer를 CLI로 실행을 했는데요, 그러지 않고 webpack의 plugin으로 설정하고 빌드하면 됩니다.그러면 빌드하면서 그 빌드 내용을 리포트하기 때문에 파일명이 일치합니다.&nbsp;강의에서는 편의상 CLI를 사용해서 사이즈와 타이밍으로 그 역할을 구분해야 합니다. (또는 일부 코드 내용을 보고 구분할 수 있습니다!)&nbsp;답변이 도움되셨길 바라며, 강의에 관심을 가져주셔서 감사합니다. 🙂

bundle analyzer 에 대한 질문이 있습니다.

안녕하세요, soyeon님.확인해보니 serve 라이브러리가 업데이트 되면서 내부 구조가 변경되어 영향을 준 것 같습니다. 해당 스크립트는 바로 수정해서 master 브랜치에 push 해뒀습니다. 다시 pull (또는 clone) 받으시면 됩니다!제보 감사합니다. 🙇참고로 원인을 자세히 설명드리면, 말씀해주신 yarn serve 는 다음과 같은 스크립트를 실행합니다. <code>npm run build && node ./node_modules/serve/bin/serve.js -u -s build</code>이 때 serve 패키지 내부의 파일을 직접 node로 실행하도록 해뒀었는데, 파일 구조가 변경되면서 에러가 발생했습니다. 상대경로로 되어 있던 스크립트를 <code>"npm run build && serve -u -s build"</code> 다음과 같이 수정했습니다.

Cannot find module serve 에러

안녕하세요, long님.학습에 불편함을 드려 정말 죄송합니다.말씀하신대로 강의 환경에 대한 보완은 빠른 시일 내에 해두겠습니다. 그리고 이미지 또한 조치를 취해보겠습니다.혹시나 안 되는 부분이 있어 질문을 올려주시면 바로 해결책을 임시로라도 공유드리겠습니다.다시 한 번 강의 환경이 원활하지 않은 점 사과드립니다.

개발환경에 대한 안내

안녕하세요 qjatjs123123님.최근에 소스코드의 React 버전을 업데이트했습니다. 리액트 16으로 만든 코드였다보니 최신 환경들과 버전 이슈가 있어서요. 이로 인해 컴포넌트에 대한 Timing(소요 시간) 정보가 사라졌습니다.Timing 정보에 대해 설명드리면, Timing 섹션에서는 User Timing API(<code>performance.mark()</code> 및 <code>performance.measure()</code>) 를 통해 기록된 정보를 표시해줍니다. (참고: <a target="_blank" rel="noopener noreferrer nofollow" href="https://developer.chrome.com/docs/devtools/performance/reference?hl=ko#timings">https://developer.chrome.com/docs/devtools/performance/reference?hl=ko#timings)</a>React 16 버전에서는 컴포넌트에 실행 시간을 Timing API로 기록했었는데, React 17 버전 이후로 정확성 및 유지보수 문제로 인해 제거되었습니다. 따라서 React 19로 버전을 업데이트한 지금 main 코드에서는 컴포넌트의 타이밍 정보를 볼 수 없습니다.만약 직접 보고싶다면, lecture-1의 <code>a3999d1fa4c2bcb3bed97c92fe9892fe5f42a4f8</code> 이 해시 커밋으로 체크아웃하시고 확인해보실 수 있습니다. (버전 업데이트 전 커밋)답변이 되셨길 바라며, 강의에 관심을 가져주셔서 감사합니다! :)

성능 탭에서 소요시간이 안보입니다

안녕하세요, BBB AAA님.확인해보니 해당 Layout Shift는 스크롤바가 생기면서 발생하는 Layout Shift로 보입니다. 이미지를 불러오면 스크롤이 생기니 그 순간이 기록된 것입니다.결론적으로 말씀드리면, Layout Shift가 발생한 것은 맞고, 그 수치가 너무 작아(<code>0.00014639456069971026</code>) Lighthouse에서는 제대로 표기가 안 된 것 같습니다.직접 확인할 수 있는 방법은 다음과 같습니다. Lighthouse로 검사를 한 뒤, 오른쪽 위 ... 버튼에서 JSON으로 다운로드를 받습니다.<img src="https://cdn.inflearn.com/public/files/posts/e30b5b3a-e30a-4b80-8a4a-2181137a3c07/0102f1cc-48e5-4cdc-b159-3682bb582ce3.png" media-type="img" alt="image.png" title="image.png" width="371" height="304">&nbsp;그 후, 해당 파일을 열어 <code>"cumulative-layout-shift"</code>를 검색해보면 다음 이미지와 같은 데이터를 확인할 수 있습니다.<img src="https://cdn.inflearn.com/public/files/posts/f71cfbca-5fb3-442c-9db6-981447118782/7ea1f60e-3790-4a6b-a180-b74a472038f0.png" media-type="img" alt="image.png" title="image.png" width="554" height="357">즉, 실제 데이터는 <code>0.00014639456069971026</code> (numericValue) 이지만, displayValue는 0으로 아마 반올림 된 것으로 보입니다. (직접 Lighthouse에서 displayValue를 어떻게 계산하는지 확인해보진 않았지만, 소수점 둘째 자리까지 반올림하는게 아닌가 싶습니다.)그럼 답변이 도움되셨길 바라며, 강의에 관심을 가져주셔서 감사합니다! :)

layout shift가 아주 약간 일어나는 부분에 대해

안녕하세요, 키키님이미지 에러에 대해서 질문을 주셨는데요제가 확인해보니, picture, source 태그에서의 이미지 폴백은 type 값을 기준으로 처리됩니다. 즉, type 값을 기준으로 먼저 어떤 이미지(source)를 렌더링할 지 판단하고 해당 이미지를 표시합니다. 따라서 type="image/webp"라면 이미지 주소에 에러가 있든 없든 srcset의 이미지를 렌더링 합니다. 이때 이미지에 에러가 발생하면 그냥 엑박을 보여주고 <img> 태그의 onerror(onError) 이벤트가 발생하는 식입니다.제 강의에서는 srcset 에 "s"를 붙여주는 것 뿐만 아니라 type 또한 이상한 값으로 바꿔줬기 때문에 지원하지 않는 이미지 타입으로 판단하여 <img> 태그의 이미지를 보여준 것입니다. (즉, source 태그의 폴백은 srcset 값의 에러 유무와는 무관합니다.)결론적으로 직접 해보실 때, type값을 이상한 값으로 변경해서 테스트 해보시길 바랍니다.강의에서 설명이 부족한 부분으로 혼란을 드려 죄송합니다. ㅠ답변이 도움되셨길 바라며, 강의에 관심을 가져주셔서 감사합니다. :)

3-4) 이미지 사이즈 최적화 과정에서 img 태그 작동 안되는 문제

안녕하세요, lab ajung 님.말씀하신 Material--icons_4.0.0.woff2의 출처가 어디일까요? 찾아봤지만, Material icons 에서 저런 형태로 제공하는건 못찾겠네요. (<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/google/material-design-icons/tree/master/font">https://github.com/google/material-design-icons/tree/master/font</a>)우선 아이콘을 쓸 때 폰트로는 거의 사용해보지 않아서 잘은 모르겠지만, 공식 가이드에서 어떻게 최적화를 할 수 있는지를 찾아보시면 좋을 것 같습니다. 깃허브 이슈라던가 찾아보시면 있지 않을까 생각됩니다.제가 만약 최적화를 한다면,<ul><li>필요한 아이콘만 추출(subset)하여 사용</li><li>가능하다면 폰트형태가 아닌 svg형태로 아예 필요한 것만 사용하는 형태로 변경</li><li>preload 적용&nbsp;</li></ul>이 정도 고려해볼 수 있지 않을까 생각됩니다.그럼 도움이 되셨길 바라며, 강의에 관심을 가져주셔서 감사합니다! :)

Material--icons_4.0.0.woff2

안녕하세요, 선대범님.&nbsp;이 강의에서는 이미지 CDN을 만드는 벙벚에 대해서는 따로 다루지 않습니다 ㅠ다른 강의를 찾아보시거나 블로그 글을 찾아보시면 도움이 되실 것 같습니다.

hackurity01

Posts