오늘의 핵심은 기업 분석을 통해 지원 공고와 관련 된 강점을 이력서 상단에 세우는 전략! 내가 강조할 수 있는 역량과 보완해야 할 역량이 무엇인지 고민하는 시간.
이력서를 많이 정돈했는데, 수치화 부분의 개선이 필요하단게 점점 체감된다. 다음 프로젝트에 성능 개선과 관련하여 사용해 볼 키워드를 정리하기 + 라이트하우스같은 웹 바이탈 확인해보기!
성능 개선과 관련된 키워드
React.memo와 useCallback
React.memo는 함수형 컴포넌트를 렌더링하는 데 있어서, 해당 컴포넌트의 props가 변경되지 않으면 다시 렌더링되지 않도록 memoization(메모이제이션)을 적용하는 데 사용. 이는 불필요한 리렌더링을 방지하여 성능을 향상시킴.
useCallback은 함수를 메모이제이션하여, 해당 함수의 새로운 인스턴스를 생성하는 것을 방지하는 훅. 주로 이벤트 핸들러나 부모 컴포넌트로 전달되는 콜백 함수 등이 매번 새로운 인스턴스를 생성하지 않도록 하여 성능을 최적화.
가상화(Virtualization)
"가상화(Virtualization)" 기술입니다. 가상화는 화면에 많은 항목이 있을 때 모든 항목을 동시에 렌더링하는 대신, 실제로 화면에 보이는 부분만 렌더링하고 나머지는 렌더링하지 않는 기술입니다. 이는 대규모 목록이나 그리드와 같은 경우에 유용하게 활용됩니다.
가상화는 대규모 데이터를 처리할 때 성능을 향상시키고 메모리 사용량을 줄이는 데 도움이 됩니다. 사용자가 스크롤을 하거나 다른 상호작용을 할 때에만 필요한 항목을 동적으로 렌더링하여 성능을 최적화합니다.
가상화 기술의 대표적인 예로는 "가상 리스트(Virtual List)"나 "가상 그리드(Virtual Grid)"와 같은 것들이 있습니다. 이러한 기술은 무한 스크롤, 레이지 로딩과 함께 사용되어 사용자 경험을 향상시키는 데 도움이 됩니다.
코드 스플리팅
코드 스플리팅은 애플리케이션의 코드를 여러 개의 작은 번들로 분할하여 초기 로드 시 간 최소화. 필요한 코드만 불러와 빠르게 화면을 렌더링할 수 있다. 주로 라우팅을 기준으로 코드를 분할하여 각 라우트에 필요한 컴포넌트와 리소스를 동적으로 로드.
레이지 로딩
레이지 로딩은 애플리케이션의 일부분을 지연하여 로드하는 기술. 사용자가 해당 부분을 요청할 때까지 해당 부분을 로드하지 않고, 필요할 때 동적으로 로드.
초기 로드 시간을 최소화하고 사용자 경험을 향상시킬 수 있다. 주로 큰 컴포넌트, 이미지, 데이터 등을 지연하여 로드함.
코드 스플리팅 관련 메모
코드 스플리팅은 주로 페이지를 기준으로 코드를 분할하여 컴포넌트 단위로 로딩하는 기술. 페이지 전환 시 필요한 컴포넌트만 로드되므로 성능 향상에 도움이 된다.
- 동적 임포트 (Dynamic Import): 자바스크립트의 동적 임포트 기능을 활용하여 필요한 모듈을 동적으로 로드함. 예를 들어, React에서는 React.lazy와 Suspense를 사용하여 컴포넌트를 동적으로 로드할 수 있다.
import React, { lazy, Suspense } from 'react';
const MyComponent = lazy(() => import('./MyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<MyComponent />
</Suspense>
);
}
- 라우트 기반 분할 (Route-based Splitting): 라우터를 기준으로 페이지를 분할하여 각 라우트에 필요한 컴포넌트를 동적으로 로드. 예를 들어, React Router를 사용하여 라우트 기반 코드 스플리팅을 구현.
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { lazy, Suspense } from 'react';
const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const Contact = lazy(() => import('./Contact'));
function App() {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Suspense>
</Router>
);
}
