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

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

안녕하세요. 강의 잘 보고 있습니다.통계사이트 부분을 보고 있다가 궁금한게 생겨서요.크롬 버전마다 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

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

제공해주신 예제 파일에서는 performance tab으로 돌려보면 어떤 컴포넌트의, 어떤 메서드인지 알 수 있는데 vue app을 실행시키고 똑같이 돌려보면 "컴파일 코드" 라고만 되어 있어서 이게 어떤 메서드인지 알 수가 없습니다. 이런 경우에는 어떻게 식별할 수 있을까요? 혹은 어떤 설정을 바꾸면 될까요?

안녕하세요, 강의를 시작할려고하는 학생입니다!!현재 lecture-1 강의를 clone 받고 실행을 시킬려고 하는데Error: error:0308010C:digital envelope routines::unsupported해당 오류 코드를 뱉으면서 npm run start가 되지가 않습니다.현재 mac, node v18.12.1을 사용하고 있는데 node 버전을 맞춰야 하는건가요?

안녕하세요, 동균님! 😁강의 자막은 제공되지 않는걸까요!?

안녕하세요 재밌게 강의 듣고 있습니다.번들파일을 분석하여 사용중인 모듈을 확인 하는 방법을 잘 알았습니다.code splitting을 통해 특정 페이지에서 필요없는 기능을 빼려는 이유도 잘 알겠습니다만.. 특정 페이지에서 사용하지 않는 기능은 어떻게 찾아낼 수 있을까요? 현업에선 엄청 많은 모듈과 기능들이 한 페이지 안에 담겨있을텐데 어디까지 쓰는 것이고 빼내야한다는 근거를 찾는 방법이 있나요? (시간 오래걸리는것만 빼내는건지.. 궁금합니다.) 두번 째로 병목 현상에 관련하여 GC의 경우도 이미 Article컴포넌트의 존재를 알고 그 안에 removespecial character가 1번만 일어나야된다는 것을 안다고 가정하고 GC가 여러번 일어난 것에 의심을 하는 것이 맞나요?GC랑 렌더링 성능시간이랑 크게 상관이 있는건지도 궁금합니다..! 

안녕하세요!customize-cra 를 사용해서 config-overrides.js 파일에서 BundleAnalyzerPlugin을 불러와서 사용하는데계속 에러가 나고 reports 파일을 확인할 수 없어서요 ㅠ addWebpackPlugin( new BundleAnalyzerPlugin({ analyzerMode: "static", openAnalyzer: true, generateStatsFile: true, statsFilename: "bundle-report.json", }) ),위 처럼 작성하고 script에 아래를 추가하고 yarn analyze를 했는데 에러가 나네요;; 뭐가 잘못된 걸까요? 조언 부탁드립니다 "analyze": "npx webpack-bundle-analyzer build/bundle-report.json",

강의에서 이미지url을 프리로딩하는것을 알려주셨는데 혹시 이미 리액트 폴더안에 에셋으로 넣어놓은 이미지 파일이나 폰트를 모달 띄우기 전에 미리 프리로딩 하는 방법을 알 수 있을까요?

안녕하세요.이번 이미지 사이즈 최적화 강의를 보고 질문 드립니다.강의에서 제공되는 이미지 데이터로는 getParametersForUnsplash()함수가 적용이 되는데 이미지 데이터를 다른 링크에 있는 이미지 주소 같은 거로 변경을 해서 진행을 해보면 변경이 안되는데 혹시 이런 경우에는 다른 방법을 사용해서 진행을 해야 하는 부분인가요??이미지 링크 주소https://t1.daumcdn.net/cfile/tistory/2408DD3658A648B12C 

6분33초에 있는 강력 새로고침은 어떻게 뛰우나요? 우클릭은 안되네요

안녕하세요.유익한 강의 너무 잘 듣고 있습니다. 다름이 아니라, 팩토리 패턴으로 리팩토링 한 코드에 대해 질문이 있어서 글을 적게 되었습니다. lazy를 사용하지 않고 import('') 구문 만으로는 동적으로 모듈을 임포트 할 수 없나요??컴포넌트가 모두 마운트 된 후 레이지 컴포넌트가 동적으로 임포트가 모두 완료된 상태인데도 suspense가 꼭 필요하나요?? 레이지 컴포넌트에 접근할 땐 이미 임포트가 완료된 후라는 생각이 들어서 여쭤봅니다! 

ts 프로젝트 진행중 config-overrides를 통해 경로를 alias 설정하였는데 cra-bundle-analyzer가 작동을 안하는데요 혹시, 방법이 있을까요? webpack-bundle-analyzer로 해야할 것 같은데 잘 안나오네요,,   module.exports = override( useBabelRc(), addWebpackAlias({ "@Path": path.resolve(__dirname,'./src/path'); )    

컴포넌트 preload 는 원하는 시점에 import만 해오면 preload 되지만   이미지 preload는 image객체의 src프로퍼티를 통해 네트워크로 이미지를 불러와서 브라우저에 캐싱되는 단계까지 이루어져야 이미지 preload라고 할 수 있는건가요...??     

안녕하세요, 강의 잘 보고 있습니다.   custom 하게 webpack과 babel을 사용하여 react 개발 환경을 구축하였습니다.   lazy와 suspense를 사용하여 코드 스플리팅을 진행하여 컴포넌트는 분리가 되었으나, node_modules가 분리되지 않는 이슈가 발생하여 webpack.config.js에서 optimization을 설정하여 split chunk를 설정해주었습니다. 저는 이 떄, async와 all을 사용하여 분리를 하였습니다. 그렇다면, 각각 다른 컴포넌트에서 사용되는 각각 다른 async node_modules가 한번에 묶여서 chunk로 생성되는 것을 확인했는데요, 이 또한 test작성을 통해 모두 분리해주어야하나요??  

안녕하세요, 강의 잘 보고있습니다. 좋은 강의를 제공해주셔서 감사합니다.   제가 이번 강의에서 궁금한게 10:24 쯔음, removeSpeicalCharacter 함수가 Article 컴포넌트 렌딩 시간의 대부분을 차지한다고 하셨고, GC가 많이 작동되어 함수 실행이 끊긴거라고 말씀해주신걸로 기억합니다.   혹시 이 중에서, GC가 많이 작동되어 함수 실행이 끊겼기 떄문에 아 removeSpeicalCharacter 함수를 리펙토링을 진행해야겠다고 판단할 수 있는 건가요?? 그 기준이 궁금합니다!

function lazyWithPreload(importFunction) { const Component = lazy(importFunction); Component.preload = importFunction; return Component; } const LazyImageModal = lazyWithPreload(() => import("./components/ImageModal")); 이 부분에 대해서 여러번 생각을 해봐도 코드의 동작 방식이 잘 이해가 되지 않는데요, importFunction에 의해서 lazy하게 로딩되는 Component를 반환하는 것은 알겠는데, preload를 통해서 importFunction을 다시 넣어주고 그 함수를 useEffect에서 다시 호출을 해준다는 개념이 좀 어색합니다.  preload를 호출함으로써 importFunction이 호출되는데, 그 결과가 Component에 담기는 거라면 const Component = lazy(importFunction) 이 하는 역할이 뭘까요..? 개념이 잘 이해가 안되다보니까 질문도 굉장히 중언부언하게 되네요...  저 팩토리 패턴에 대해서 조금 더 자세하게 설명해주실 수 있을까요?