프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2대시보드

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}`))  

퍼포먼스 관련 작업 하던중에 잘 모르는게 생겨 질문드립니다강의 완강하고나서 알려주신것들로 여러가지 해보니 실제로 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말고 혹시 신뢰성있는 다른 방법도 있을까요?

강사님 안녕하세요 좋은강의 잘 수강중인 학생입니다.강의중에는 클라이언트에 저장된 확장자 2개의 이미지를 사용해서 분기처리를 하셨는데요,서버에서 받아오는 이미지파일을 분기처리 할려면(webp를 지원하지않는 브라우저를 위해)webp파일 이미지와 jpg(또는 png) 파일 이미지 총 2개 파일 이미지를 보내줘야 분기처리가 가능한가요?아니면 서버에서 1개의 확장자 이미지를 보내주면jpg -> webp 또는 webp->jpg로 바꾸어서 분기처리 하는방법은 없을까요?

이미지 지연 로딩에서 picture tag를 사용하여 webp가 지원되지 않는 브라우저인 경우 jpg로 로딩되도록 previousSibling을 사용하셨는데 picture tag 안에 source tag가 두 개 이상인 경우에는 어떻게 해야하나요?반복문을 돌려야 하는 것인가요?

4분에 있는 브라우저별 폰트 호환에 관련되어 있는 표에 질문이 있습니다.각 폰트와 브라우저간 매칭되는 숫자의 의미가 무엇일까요?  

캐시 최적화 강의를 보고 난 뒤에 궁금증이 생겼습니다app.use(express.static(path.join(__dirname, "../build"), header));를 통해 빌드된 것들에 대해 해더를 적용하는 것으로 이해했습니다.근데 이렇게 빌드 된 것이 아니라 FE, BE 따로 나뉘어서 배포되어 서로 다른 도메인인 경우 어떻게 해야 하나요?BE는 static 자료가 없이 api만 보내는 기능을 하고 FE는 vercel이나 netlify 또는 다른 EC2로 배포되어 있는 경우를 말씀드립니다.app.use(header);이렇게 하면 될까 했지만 이건 에러를 뱉어냅니다

안녕하세요 선생님, 정말 좋은 강의 감사합니다.선생님이 설명해주신 폰트 사이즈 줄이기 (Unicode Range) 를 테스트 해보려고 했습니다. 제가 진행한 Nextjs, React 두가지 프로젝트 환경에서 Unicode range없이 네트워크를 살펴보았는데요, 알아서 그 페이지에서 사용하는 폰트만 불러오는 것을 확인했습니다. 혹시 react 프로젝트는 Unicode-range 를 해주지도 않았는데 알아서 최적화를 해주는 것인가요...??..... 

안녕하세요 선생님.이번에 폰트 포멧에 대해서 공부를 해봤는데, woff2 가 인터넷 익스플로러에서 사용불가하다고 알고 있었는데 사용이 가능한가요?!https://caniuse.com/?search=woff2

3-3 이미지 지연 로딩을 하면서 밑에 TwoColumns의 이미지도 지연 로딩하는걸 적용했습니다.강사님 코드와 비교하고 싶은데 어디에서 코드를 확인할 수 있나요?

3-4 브랜치로 체크아웃을 하여 테스트해봐도 source의 srcset 속성에 {props.webp + 's'}를 줬을 때 이미지가 엑박이 뜹니다.   previousSibling.srcset = previousSibling.dataset.srcset; 위 소스 한 줄을 지울 때는 정상동작 되는데 이유가 있을까요?  

로컬에 있는 이미지를 이용할때보다 서버에서 url 주소로 전달 받아 이용하는 경우가 더 많은데, 그럴때도 webp로 변환할 수 있는 방법이 있을까요?  아니면 다른 최적화 방법이 있나요? 

Items 페이지의 보드들의 이미지가 깨져서 보입니다 수정완료된 소스 코드가 따로 존재하는 건가요?

안녕하세요 캐시수업도 매우 유익하네요 ... 수업듣고 사이트를 보다가 궁금한점이 생겼는데요~   질문1.  HTML 상단 메타태그에 <meta http-equiv="Cache-Control" content="no-cache"> 를 주면 서버에서 설정하지 않아도 예제에서 사용한거랑 같이 해당 HTML이 변경될 때만 다운로드할까요 ?  (이러면 request header의 캐시컨트롤에 노캐시가 붙나요?)   질문2.  예제에선 HTML을 제외하고 CSS JS Image의 max-age를 길게주고  소스 변경시에만 hash를 다르게 붙여 변경된 리소스만 새 파일을 다운로드 하게 했는데요   HTML CSS JS Image를 모두 no-cache로 주면 어떻게 작동할까요 ?   

좋은 강의 너무 잘 듣고 있습니다.  번외지만 배포에대해 궁금한점이 있습니다.  지금 강의 예제로 사용하는 프로젝트와 같이 서버와 클라이언트 코드가 같이 있는 경우에는 어떻게 배포해야하는지 궁금합니다. 개발할때는 npm run serve 와 같이 수동으로 서버를 켜서 작동시킬 수 있지만 그렇지 않을때는 어떻게 작동시킬 수 있나요? 실제로는 서버용 레포, 클라용 레포 따로 개발해서 배포해야하는 건가요?

강사님 강의자료는 어디서 받을 수 있나요?? 아무리 찾아봐도 없어서 질문드립니다.

안녕하세요. 웹 최적화 파트1,2 수강자입니다.   수강을 하면서 웹에 대해 최대한 성능 좋게 개발을 꾸준히 하려고 노력하고 있습니다. 이에 따라 여러 가지 고민이 되는 부분이 생겨서 해당 카테고리와는 크게 관련성은 없지만 여기에 글을 올려봅니다.   궁금증 1.   useMemo, useCallback 관련하여 질문드리고 싶습니다.   memoization을 통해 불필요한 렌더링을 줄일 수 있는 장점을 가지고 있어 위와 같은 훅을 잘 사용해보려합니다. 하지만 효율적으로 사용을 해야 메모리 적으로 봤을 때 문제가 되지 않을거같아 고민을 하는 찰라에 많은 개발자분들이 단순히 useState에서 set하는 부분만을 useCallback에 담아서 사용하는거 같더라구요.   예를 들어 const [ isOpen, setIsOpen = useState<boolean>(false); const callback = useCallback( () => {setIsOpen(true)}, []);   이런 식으로요.   하지만 제 생각에는 이렇게 작은 것도 다 넣으면 모든게 메모리에 올라가게 되어 메모리 낭비인가 라는 생각이들었습니다.이러한 작은 것들도 다 useMemo나 useCallback 을 적용하는 것이 메모리적인 관점에서 보는 것보다 렌더링에 이점을 주는 것이 더 큰가라는 생각이 듭니다.   혹시 이 부분에 대해 피드백 해주시면 감사하겠습니다.   궁금증 2.   많은 input에서의 onChange에 따른 렌더링   회원가입 폼과 같이 input 굉장히 많은 경우 여기에 onChange Event에 따라 회원정보가 set이 되고 타이핑할 때마다 리렌더링이 된다는 생각이 과하다는 생각이들어서 질문 드립니다.   그래서 제가 생각해본건 useRef로 모든 input에 접근하고 회원가입 버튼 눌렀을 때 한번에 input value 를 가져와서 한번만 set을 하는게 낫지않을까 라는 생각도 들었습니다.   위와 같은 생각이 잘못되었는지, 혹은 onChange에 따라 set을 다해도 가상돔으로 비교해서 전체 다 그려주는게 아니기 때문에 큰 이슈는 되지않아 그냥 사용해도 될지에 대해 궁금합니다.   답변해주시면 정말 감사하겠습니다.  

강의 잘 보고 있습니다!  혹시 @font-face {} 가 들어있는 css를 link ref="preload"하면  해당 css를 미리 불러오면서 폰트도 사전로드 되는걸까요 ?    아니면 폰트 사전로드는 무조건 link로 걸어줘야될까요 ?  

좋은 정보 정말 감사합니다! 돈이 아깝지 않네요ㅎㅎ

불필요한 css를 purgecss로 제거하셨는데, 궁금한 점이 웹앱의 경우는 웹에서 사용하는 css는 앱에선 필요없고, 앱에서 사용하는 css는 웹에서는 필요없는데 이런것도 구별해서 제공을 해주는지 궁금합니다. 웹앱의 경우는 두개의 css를 다 갖고 있어서 불필요한 css를 줄일 수 있는지가 궁금합니다.