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

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

Material--icons_4.0.0.woff2

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

이미지 CDN 만드는 방법

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

코드 실행 시 에러 관련 질문드립니다!!

안녕하세요, 지원님.다음과 동일한 이슈로 보입니다.https://www.inflearn.com/questions/735601/node-version%EC%9C%BC%EB%A1%9C-%EC%9D%B8%ED%95%9C-%EC%98%A4%EB%A5%98

npm run serve가 동작하지 않아요

안녕하세요, Stella님다음 에러 메시지릉 봤을 때, 이미 5000번 포트가 사용 중이라 문제가 되는거 같습니다.Error: listen EADDRINUSE: address already in use :::5000해결 방법으로는,5000번에서 돌고있는 서버를 종료하기 (검색을 해보시면 특정 포트로 돌고있는 서비스의 PID를 알아내서 강제로 종료하는 명령어가 있습니다.)아니면, server.js 코드 중에 port라는 값을 5000이 아니라 5001 또는 그 외 중복되지 않는 숫자로 변경하기위 방법으로 해결되지 않는다면 다시 알려주시기 바랍니다.그럼 답변이 도움되셨길 바라며, 강의에 관심을 가져주셔서 감사합니다. :)

Performance FPS 탭이 안보여요.

안녕하세요 jhkim0280님,이해하신대로 크롬 버전에 따라서 개발자 도구도 업데이트 됩니다.Performance 패널에서 강의를 찍었을 때와 현재 버전의 다른 점을 몇 가지 예를 들자면, 말씀하신 FPS 항목이 사라졌고 하단 Frames 섹션이 조금 더 구체적으로 바뀐 것으로 알고 있습니다.그 외에 Web Vitals라는 옵션이 생겼고 Animations라는 섹션이 생겼습니다.Performance 패널 말고도 다른 패널에서도 다양한 변화들이 있었는데요.업데이트 내용에 대해서는 크롬 개발자 도구 github 나 패널 중에 What's new 라는 패널을 통해 확인하실 수 있습니다.하지만, 핵심적인 사용법이나 개념은 크게 변하지 않아서 학습하시거나 사용하시는데에는 크게 문제가 없을 겁니다. 그럼 답변이 도움되셨길 바라며, 강의에 관심을 가져주셔서 감사합니다. :)

CPU throttling이 뭔가요?

안녕하세요, Tae-Hui Kim님정확한 질문 내용을 이해하지 못했습니다.혹시 성능을 검사할 때, CPU Throttling을 어느정도로 설정해둬야 하는지를 질문하신 걸까요?개발을 하실 때는 특별히 설정할 필요는 없지만, 간혹 디버깅을 위해 느리게할 필요가 있다면 원하는 값으로 설정해주시면 됩니다.성능 검사를 위해 사용하신다면, 타겟으로 잡은 환경을 고려하여 설정해주시면 되는데요.Lighthouse의 경우, Desktop 환경으로 검사할 때와 Mobile 환경으로 검사할 때 다음과 같이 설정을 합니다.DesktopCPU/Memory Power: 2631 CPU throttling: 1x slowdownMobileCPU/Memory Power: 2679 CPU throttling: 4x slowdown 그럼 답변이 도움되셨기를 바라며, 강의에 관심을 가져주셔서 감사합니다. :)

default export가 아닌 named export일 때 lazy사용법

안녕하세요, Tae-Hui Kim님기본적인 원리를 이해하시면 쉽습니다.코드에서 작성한 import 구문(import('./pages/ListPage/index'))은 최종적으로 { default: 해당 컴포넌트 } 를 리턴합니다. 즉, named export일 경우에는 위와 같은 형태를 맞춰주면 됩니다.const ListPage = lazy(() => import("./pages/ListPage/index").then(({ ListPage }) => ({ default: ListPage, })) ); const ViewPage = lazy(() => import("./pages/ViewPage/index").then(({ ViewPage }) => ({ default: ViewPage, })) );그럼 답변이 도움되셨길 바라며, 강의에 관심을 가져주셔서 감사합니다. :)

lazy적용하였는데 네트워크탭에 분리하여 보이지 않습니다

안녕하세요 정수님혹시 지연 로딩을 적용 후, 페이지를 이동해보셨나요?지연로딩은 필요할 때 로드하기 때문에 navigate를 콜하여 페이지가 이동되는 순간 로드가 됩니다.답변이 도움되셨기를 바라며 강의에 관심을 가져주셔서 감사합니다. :)

lighthouse 측정에 관해 질문드려요

안녕하세요 redgee49 님.1. 라이트하우스는 기본적으로 이전 내역과 관계없이(캐시없이) 실행됩니다. 예전에는 다른 패널에서 설정한 옵션(throttle, disable cahce 등)이 반영된 상태로 실행됐는데, 최근 업데이트된 라이트하우스는 다른 패널들의 옵션과 관계없이 기본값으로 설정된 옵션으로 실행됩니다.따라서, 따로 캐시를 비워주실 필요는 없습니다.2. performance 패널에서는 각 패널에서 설정한 옵션들이 적용됩니다. 즉, 네트워크 패널에서 disable cache를 적용한 뒤 performance 검사를 하면 캐시가 없는 상태로 실행이 됩니다.3. 성능 점수는 측정 환경과 방법에 따라 많이 차이가 생깁니다. 때문에 지속적인 서비스 성능 측정을 위해서는 그 기준을 동일하게 맞춰두는 것이 좋습니다.제가 vercel의 Analytics 기능을 써보지 않아서 정확히 알긴 어렵지만, 찾아보니 RUM(Real User Monitoring) 방식으로 보입니다. 즉, 서비스가 제공되는 중에 실제 유저의 활동기록을 기반으로 성능 측정을 한 것입니다.그에 반해 라이트하우스를 이용한 측정 방식은 Synthetic Monitoring 이라고 해서, 제한된(simulated) 환경에서 성능을 측정하는 방식입니다. 그렇기에 당연히 다를 수 밖에 없습니다. 특히 라이트하우스로 검사하는 경우 설정한 옵션(throttle 등)에 따라서도 달라질 수 있으므로 고정된 환경에서 측정 및 비교해야합니다. 이 설정은 RUM에서 측정된 통계를 기반으로 적정선을 찾아서 적용하는 것이 좋습니다. RUM 관련해서 P75, P90 개념을 찾아보시면 도움이 되실겁니다.(가장 이상적인 방법은 두가지를 모두 적용해서 실제 유저의 통계와 랩 환경의 점수를 함께 보는 것입니다.)결론적으로 질문에 답을 다시 하면, 라이트하우스는 제한된 환경(네트워크 느리게하고 CPU 느리게하고, 캐시 날리고)에서 검사를 하기 때문에 점수가 낮을 수도 있습니다. 그에 반해 Vercel Analytics(RUM)의 경우 실제 유저를 기반으로 하기 때문에 빠른 환경의 유저에게는 높은 점수가 찍힐거고, 느린 환경의 유저에게는 낮은 점수가 찍힐 겁니다. 결국 이 데이터가 쌓이면 유저의 평균 LCP 등을 알 수 있는거죠. 그럼 답변이 되셨길 바라면서, 강의에 관심을 가져주셔서 감사합니다. :)