퍼포먼스 관련 작업 하던중에 잘 모르는게 생겨 질문드립니다강의 완강하고나서 알려주신것들로 여러가지 해보니 실제로 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를 체크한 경우에는 캐싱을 못할텐데 그 부분에 대해서는 어떻게 해결을 해야하는건가요? 아니면 저 부분도 사용자 환경에 적용할 수 있도록 하는 방법이 있는건가요?

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

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

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

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

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

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

안녕하세요 재밌게 강의 듣고 있습니다.번들파일을 분석하여 사용중인 모듈을 확인 하는 방법을 잘 알았습니다.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을 프리로딩하는것을 알려주셨는데 혹시 이미 리액트 폴더안에 에셋으로 넣어놓은 이미지 파일이나 폰트를 모달 띄우기 전에 미리 프리로딩 하는 방법을 알 수 있을까요?

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

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

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

안녕하세요.이번 이미지 사이즈 최적화 강의를 보고 질문 드립니다.강의에서 제공되는 이미지 데이터로는 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라고 할 수 있는건가요...??     

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