강사님 안녕하세요! 최적화 강의 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를 체크한 경우에는 캐싱을 못할텐데 그 부분에 대해서는 어떻게 해결을 해야하는건가요? 아니면 저 부분도 사용자 환경에 적용할 수 있도록 하는 방법이 있는건가요?