inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

Preload Components 관련 질문입니다.

302

금교영

작성한 질문수 1

1

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
 
안녕하세요! 좋은 강의 감사합니다.
function lazyWithPreload(factory) {
  const Component = React.lazy(factory);
  Component.preload = factory;
  return Component;
}

 

혹시 이 코드를 typescript로 바꾸려면 어떻게 해야 할까요? 코드를 이런식으로 바꿨는데 Component에는 preload 속성이 없네요 ㅜㅜ

function lazyWithPreload(
  factory: () => Promise<{
    default: React.ComponentType<any>;
  }>
) {
  const Component = React.lazy(factory);
  Component.preload = factory;
  return Component;
}

 

 

typescript react devtools

답변 1

1

유동균

안녕하세요, 금교영님,

typescript로 구현을 하실 때는 컴포넌트의 타입을 직접 type casting을 하거나 다음과 같이 커스텀 컴포넌트 타입을 만들어서 사용하셔야 할 것 같습니다.

interface PreloadComponent extends React.LazyExoticComponent<React.ComponentType<any>> {
preload?: any;
}

답변이 도움되셨기를 바라며, 강의에 관심을 가져주셔서 감사합니다. :)

 

bundle analyzer 에 대한 질문이 있습니다.

0

119

2

Cannot find module serve 에러

1

127

1

성능 탭에서 소요시간이 안보입니다

0

234

2

이미지 CDN 만드는 방법

0

478

1

Performance FPS 탭이 안보여요.

1

826

1

CPU throttling이 뭔가요?

0

1129

1

default export가 아닌 named export일 때 lazy사용법

1

1082

1

lazy적용하였는데 네트워크탭에 분리하여 보이지 않습니다

1

597

1

network 캐싱에 대해서 질문 있습니다!

1

432

1

vue project에서 chrome performance tab 확인하기

1

463

1

node version으로 인한 오류

4

1243

1

강의 자막

1

966

2

번들파일과 병목현상 질문

2

405

1

webpack-bundle-analyzer 질문

1

791

1

이미지 프리로딩 질문

1

392

1

이미지 최적화 활용

1

591

1

강력 새로고침

1

334

1

Suspense 관련해서 질문드립니다

2

367

1

config-overrides cant resolve path

1

369

1

이미지 preload 컴포넌트 preload 차이 질문드립니다.

1

617

1

custom react 환경에서 node_modules chunk 분리

1

385

1

removeSpeical 함수를 줄여야겠다고 하는 이유!

1

295

1

Factory pattern에 대해서 궁금한 점이 있습니다

2

378

2

텍스트 압축 방식에 대해 질문이 있습니다

2

959

1