강의를 이제 하나 들었는데요. 실행 하는 것이 순탄지 않습니다. 강의에 안내가 필요하지 않을까요? 이제 강의 시작하는데 신뢰 떨어집니다.노드 버전을 맞춰주지 않아서 빌드가 안됨포트를 바꿔줘야 server.js가 실행됨화면 띄웠는데 아이템 요청 실패해서 이미지 안보임추가적으로 다른 수강생들에게 "아이템에 관련된 이미지는 강의와 관련이 없으니 무시해도 된다" 그러면 혼동을 줄이기 위해 수정을 해야 하지 않을까요 선생님께서요. (공지를 영상에 추가한다던지) 강의 듣는데 관련없는 곳에 시간을 들이고 있는 것 같습니다.

 강사님 Perfomance 화면과 다르게저는 Timing 화면을 볼 수 없습니다.왜 그럴까요...?

강좌를 따라해보니 lighthoust에서의 cls 점수는 0점인데 성능탭에서는 헤더 부분에서 아주 미세하게 layout shift가 일어난다고 나오고 있거든요. 이런 부분은 너무 작아서 점수를 매길때 무시하는 건가요?

강사님 안녕하세요! 최적화 강의 1,2 잘 듣고 있습니다 :)3-4) 이미지 사이즈 최적화 강의에서 강의에서 설명하신 방식대로 진행했는데, 제 경우는 다른 결과가 나와서 질문 드립니다.강사님이 작성하신 코드대로 webp 형식을 지원하는 브라우저이면 source 태그를 통해 로드하고 그렇지 않으면 jpg 형식으로 로드하도록 코드를 그대로 작성했습니다. <picture> <source data-srcset={props.webp + "s"} type="image/webp" /> <img data-src={props.image} ref={imgRef} /> </picture>그러나 고의적으로 data-srcset 에서 에러를 발생시켰을 때, img 태그에 해당하는 jpg 형식의 이미지가 로드되지 않고, 이미지 엑박이 나옵니다.저와 동일한 질문을 봤는데 jpg 형식 이미지가 담긴 img 태그는 실제로 화면에 잘 나오는 것을 확인했습니다.webp 형식과 Jpg 형식 이미지 모두 지연 로딩을 적용해서 이러한 에러가 발생하는건가요?  

Material--icons_4.0.0.woff2 는 리소스 크기가 3mb인데 해당 폰트는 font-display:block으로 하지 않는이상 폰트 다운드로 전에 영어를 출력시키거나 안보이도록 해야하는되 이 부분 레이아웃 시프트 발생하지 않도록 cls 잡는 방법이 무엇이 존재할까요???

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 이미지 CDN 구축하는 구체적인 방법이 알고 싶은데 따로 강의 없나요?

강의를 들으며 배운 내용을 블로그나 깃헙에 정리하여 포스팅해도 될까요? 가능하다면 어디까지 가능한지 여쭙고 싶습니다.

Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:69:19) at Object.createHash (node:crypto:133:10) at module.exports (C:\Users\user\OneDrive\바탕 화면\lecture\lecture-3\node_modules\webpack\lib\util\createHash.js:135:53) at NormalModule._initBuildHash (C:\Users\user\OneDrive\바탕 화면\lecture\lecture-3\node_modules\webpack\lib\NormalModule.js:417:16) at C:\Users\user\OneDrive\바탕 화면\lecture\lecture-3\node_modules\webpack\lib\NormalModule.js:452:10 at C:\Users\user\OneDrive\바탕 화면\lecture\lecture-3\node_modules\webpack\lib\NormalModule.js:323:13 at C:\Users\user\OneDrive\바탕 화면\lecture\lecture-3\node_modules\loader-runner\lib\LoaderRunner.js:367:11 at C:\Users\user\OneDrive\바탕 화면\lecture\lecture-3\node_modules\loader-runner\lib\LoaderRunner.js:233:18 at context.callback (C:\Users\user\OneDrive\바탕 화면\lecture\lecture-3\node_modules\loader-runner\lib\LoaderRunner.js:111:13) at C:\Users\user\OneDrive\바탕 화면\lecture\lecture-3\node_modules\babel-loader\lib\index.js:55:103 { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED'}Node.js v18.17.1-------------------------------------------------npm run build 시 에러입니다.혹시나 라이브러리 버전 충돌일까 싶어서 update를 했는데도위와 같은 에러가 발생하는데openSSL과 연관이 있는 것 같은데 해결방법을 모르겠어서 질문드립니다 ㅠㅠ

3-7) 캐시 최적화를 듣고 있습니다. npm run serve가 동작하지 않네요. npm run buildnpm run serve의 순서로 실행했습니다.에러 코드는 아래와 같습니다.> lecture-3@0.1.0 serve> node ./server/server.jsnode:events:490 throw er; // Unhandled 'error' event ^Error: listen EADDRINUSE: address already in use :::5000 at Server.setupListenHandle [as _listen2] (node:net:1774:16) at listenInCluster (node:net:1822:12) at Server.listen (node:net:1910:7) at Function.listen (/Users/stellamax/Desktop/study/optimizing/node_modules/express/lib/application.js:618:24) at Object.<anonymous> (/Users/stellamax/Desktop/study/optimizing/server/server.js:20:5) at Module._compile (node:internal/modules/cjs/loader:1275:14) at Module._extensions..js (node:internal/modules/cjs/loader:1329:10) at Module.load (node:internal/modules/cjs/loader:1133:32) at Module._load (node:internal/modules/cjs/loader:972:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)Emitted 'error' event on Server instance at: at emitErrorNT (node:net:1801:8) at process.processTicksAndRejections (node:internal/process/task_queues:82:21) { code: 'EADDRINUSE', errno: -48, syscall: 'listen', address: '::', port: 5000}클론 받은 코드는 아래와 같습니다.const express = require('express') const app = express() const port = 5000 const path = require('path') const header = { setHeaders: (res, path) => { res.setHeader('Cache-Control', 'private, no-cache, no-store, must-revalidate') res.setHeader('Expires', '-1') res.setHeader('Pragma', 'no-cache') }, } app.use(express.static(path.join(__dirname, '../build'), header)) app.get('*', (req, res) => { res.sendFile(path.join(__dirname, '../build/index.html')) }) app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))  

안녕하세요. 강의 잘 보고 있습니다.통계사이트 부분을 보고 있다가 궁금한게 생겨서요.크롬 버전마다 performance 탭 내용이 달라지나요? 강의랑 표시 내용이 달라서요. FPS그래프가 안보여요.옵션에도 FPS 표시 유무같은게 안보이는데, 도움 좀 부탁드립니다.현재 버전은 113.0.5672.127 입니다.감사합니다.

프론트엔드 개발자가 CPU Throttling을 어느정도 까지 coverage를 가지고 가야할까요? 

ListPage컴포넌트가export default ListPage가 아니라 const ListPage = () => { ... }export {ListPage}처럼 한 경우에는 어떻게 import 해야 하나요? 

안녕하세요,강의와 같이 lazy를 적용하였는데, 페이지 이동 후 네트워크 탭에서 새로 받는 청크파일이 표시되지 않는데 따로 설정이 필요한걸까요?코드import React, { Suspense, lazy } from 'react'; import { Switch, Route } from 'react-router-dom'; import './App.css'; const ListPage = lazy(() => import('./pages/ListPage/index')); const ViewPage = lazy(() => import('./pages/ViewPage/index')); function App() { return ( <div className="App"> <Suspense fallback={<div>Loading...</div>}> <Switch> <Route path="/" component={ListPage} exact /> <Route path="/view/:id" component={ViewPage} exact /> </Switch> </Suspense> </div> ); } export default App;  네트워크 탭(전체로 선택하여 확인)게시글 목록 -> 상세로 페이지 이동후에 새로운 청크 받아지는 것이 보이질 않습니다 실행 환경OS: Mac OS크롬버전: 111개발툴: vscode

퍼포먼스 관련 작업 하던중에 잘 모르는게 생겨 질문드립니다강의 완강하고나서 알려주신것들로 여러가지 해보니 실제로 lighthouse쪽은 굉장히 점수가 향상됐는데요.이 작업이 이루어진 프로젝트는 next를 이용하고있어서 배포를 vercel를 통해 했습니다.근데 vercel쪽에서 집계된 Analytics기능에서 측정된 지표는 lighthouse와 차이가 좀 많이 나네요.개발모드까지 같이 측정했나 확인해보니 그건 아닌것같습니다.페이지마다 살펴보니 vercel쪽의 데이터들은 FCP와 LCP지표가 상당히 높게 나타나는데 혹시 vercel쪽에서 측정되는 analytics 서버의 네트워크 환경에 따라 이렇게 될수도 있는걸까요? vercel의 서비스중에 https://vercel.com/docs/concepts/functions/serverless-functions/regions이 있는데 한국대상 서비스이기 때문에 이 설정을 한국으로 설정했거든요.질문을 좀 정리해보자면 개발하고나서 배포를했을때 light house측정을 이전 내역들을 날리고 "clean"한 상태에서 측정 하는 다른 방법이 있을까요? 현재는 시크릿탭에서 network탭의 "disabled cache"만 체크해두고 측정마다 캐시 강력 새로고침으로 하고 있습니다.퍼포먼스 탭에서도 위 질문같은 방법이 있는지 궁금합니다.lighthouse말고 혹시 신뢰성있는 다른 방법도 있을까요?

안녕하세요 동균님 network 캐싱에 대해서 궁금한 점이 있어서 질문 남깁니다!image를 캐싱하면 image를 요청할 때 재요청이 안되는건 알겠는데, 저 network tab에서 disable cache 같은 경우는 해당 사용자 환경에서 설정할 수 있는 부분이라고 생각합니다. disable cache를 체크한 경우에는 캐싱을 못할텐데 그 부분에 대해서는 어떻게 해결을 해야하는건가요? 아니면 저 부분도 사용자 환경에 적용할 수 있도록 하는 방법이 있는건가요?