분류 전체보기

로딩 성능 최적화 - 프리 로딩

컴포넌트 Preloading Lazy Loading의 단점 예를 들어 이미지 모달을 레이지 로딩하도록 변경하면, 모달 보기 버튼 클릭시에 모달 관련 코드를 불러온다. 따라서 불러오는데 시간이 좀 걸리게 된다. 이 클릭 전에 미리 알고 로드해놓으면 사용자 입장에서 끊김 없이 느껴질 것이다. (레이지 로딩의 단점을 개선) 컴포넌트 Preload 타이밍 버튼 위에 마우스를 올려놨을 때 최초 페이지 로드 후 모든 컴포넌트 마운트 끝났을 때 최적화하기 1. 버튼 위에 마우스를 올려놨을 때 const handleMouseEnter = () => { const component = import('./components/ImageModal') } { setShowModal(true) }} onMouseEnter={ha..

로딩 성능 최적화 - 코드 스플릿, 레이지 로딩

Code Split & Lazy Loading dynamic import나 react-lazy를 사용해서 chunk를 여러 개로 나눠 불필요한 코드, 중복 코드 없이 적절한 크기의 코드가 적절한 타이밍에 로드될 수 있도록 하는 것이다. 하나의 큰 JS파일을 다운로드 하는것 보다 여러개의 작은 chunk(해당 페이지에서 필요한 chunk들만)를 다운로드하는 것이 더 빠르기 때문에 코드 스플릿을 통해 초기 로딩 속도를 개선할 수 있다. 크게 2가지 패턴이 있다. 페이지 별로 (라우팅 단위) 모듈 별로 (컴포넌트 단위) 페이지별로 코드 스플릿 번들 파일 분석하기 코드스플릿을 하기에 앞서 webpack-bundle-analyzer를 활용해서 번들된 파일들의 크기를 확인한다. 보면 refractor라는 모듈이 c..

로딩 성능 최적화 - 이미지, 동영상

이미지 사이즈 최적화 이미지 크기 확인하기 이미지 크기를 적절하게 줄여서 로딩 성능을 향상시킨다. Lighthouse의 Opportunity의 Properly size images 항목을 보면 적절하지 않은 크기의 이미지들의 목록을 볼 수 있다. 이미지 요소의 src 링크에 커서를 올려보면 rendered size: 화면에 그려진 이미지의 크기와 Intrinsic size: 불러온 이미지의 크기를 확인할 수 있다. 예시를 보면 화면에 그려지는 이미지의 크기에 비해 불러오는 이미지의 크기가 너무 크다. 적절한 크기는 화면에 그려지는 이미지의 너비,높이 기준으로 2배정도 되는 크기이다. 이미지 크기를 줄여서 로딩 시간을 줄일 수 있다. 이미지 크기 줄이기 그렇다면 이미지는 어떻게 줄일까? image proc..

웹 성능 최적화 - 기초, 분석 툴

인프런 '실전 웹 성능 최적화' 강의를 듣고 정리해 봤다. 해야하는 이유 사용자가 떠나지 않도록 FE 개발자로서 경쟁력 웹 성능 결정 요소 로딩 성능 (리소스 불러오기) 렌더링 성능 (리소스 화면에 그리기) 흐름 분석 -> 최적화 -> 결과 확인 분석 툴 성능 측정시에는 local이 아닌 production빌드 기준으로 검사한 것을 기준으로 해야한다. 크롬 Network 탭 어떤 리소스를 다운로드 요청했는지, 걸린 시간, 응답등을 확인할 수 있다. 크롬 Performance 탭 페이지가 로드되면서 실행되는 작업들을 타임라인과 차트 형태로 보여줌 history 보기 : 상단 드롭다운을 활용해 이전 검사 내역도 볼 수 있다. system 관련한 작업 안 보기 : 내 코드와 관련 없는 시스템 관..

리액트 프로젝트 폴더 구조

https://www.youtube.com/watch?v=UUga4-z7b6s&list=LL&index=2 Junior vs Senior React Folder Structure - How To Organize React Projects - Web Dev Simplified 강의를 듣고 정리해봤다. 구조 assets : 공통으로 사용하는 .css , 이미지 등 components : 공통으로 사용하는 컴포넌트 ui, form 디렉토리를 따로 둬서 관심사 별로 분리 context : 공통으로 사용하는 컨텍스트 data : 공통으로 사용하는 데이터 ex) 리덕스, 리코일 등의 상태 저장소, json 파일, 상수 등 features : 특정 주제(ex) auth, user, stats)에 관한 componen..

조건부 타입과 맵드 타입, 유틸리티 타입

조건부 타입 조건부타입이란 입력된 제네릭 타입에 따라 타입을 결정하는 타입이다. type Condition = T extends A ? B : C 위 타입은 T가 A에 할당 가능하면 타입은 B가 되고 그렇지 않으면 C가 된다. 조건부 타입을 활용해서 아래와 같이 타입 판별을 하는 타입을 구현할 수 있다. type IsString = T extends string ? true : false 분산 조건부 타입 T extends A 에서 T(제네릭이)가 유니온 타입인 경우 조금 다르게 작동한다. 해당 타입이 A에 할당가능한지를 검사하지 않고 유니온의 각 요소가 A에 할당가능 한지를 검사한다 type Exclude = T extends U ? T : never /// 예시: type A = Exclude 아래 ..

useIntersectionObserverRef 커스텀 훅 만들기

IntersectionObserver는 무한 스크롤 or 이미지 lazy loading 등 다양한 곳에서 활용할 수 있다. react, typescript 환경에서 쉽게 IntersectionObserver를 활용할 수 있는 커스텀 훅을 제작했다. Typing interface UseIntersectionObserverRefProps { readonly callback: IntersectionObserverCallback readonly options?: IntersectionObserverInit readonly type?: 'callback' | 'ref' } export const useIntersectionObserverRef = ({ callback, options = { root: null, ..

나만의 react boilerplate 만들기 - (3) TypeScript로 전환

기존 JS -> TS로 환경설정을 변경했다. 패키지 주소: https://www.npmjs.com/package/fe-jhw-create-react-app 명령어: npx fe-jhw-create-react-app [project name] TS 설치 typescript 4.4.2버전을 설치했다. 최신버전인 4.9.4는 내 개발환경과 제대로 호환이 되지 않아 쓸 수 없었다. 그래서 현재 CRA가 사용하고 있는 4.4.2버전을 선택했다. webpack config 설정 fork-ts-checker-webpack-plugin 을 추가했다. 번들시에 타입검사를 별도의 프로세스에서 실행하여 빌드 성능을 향상시키는 플러그인이다. 기본적으로 tsconfig의 설정을 참조한다. tsconfig 설정 { "compil..