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

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

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

안녕하세요, BBB AAA님.확인해보니 해당 Layout Shift는 스크롤바가 생기면서 발생하는 Layout Shift로 보입니다.이미지를 불러오면 스크롤이 생기니 그 순간이 기록된 것입니다.결론적으로 말씀드리면,Layout Shift가 발생한 것은 맞고, 그 수치가 너무 작아(0.00014639456069971026) Lighthouse에서는 제대로 표기가 안 된 것 같습니다.직접 확인할 수 있는 방법은 다음과 같습니다.Lighthouse로 검사를 한 뒤, 오른쪽 위 ... 버튼에서 JSON으로 다운로드를 받습니다.(사진) 그 후, 해당 파일을 열어 "cumulative-layout-shift"를 검색해보면 다음 이미지와 같은 데이터를 확인할 수 있습니다.(사진)즉, 실제 데이터는 0.00014639456069971026 (numericValue) 이지만, displayValue는 0으로 아마 반올림 된 것으로 보입니다.(직접 Lighthouse에서 displayValue를 어떻게 계산하는지 확인해보진 않았지만, 소수점 둘째 자리까지 반올림하는게 아닌가 싶습니다.)그럼 답변이 도움되셨길 바라며, 강의에 관심을 가져주셔서 감사합니다! :)

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, })) );그럼 답변이 도움되셨길 바라며, 강의에 관심을 가져주셔서 감사합니다. :)