프론트엔드 성능 최적화: 토스 개발팀의 전략과 인사이트

사용자 경험이 매우 중요한 웹 서비스에서 최적화는 빼놓을 수 없는 주제인데요. 그런 맥락에서 이번 토스 모닥불 EP9 "프론트엔드 서비스 최적화? 토스에서는 '이렇게' 합니다!" 를 흥미롭게 시청했습니다. 유익한 내용이 많아서 최적화 기본 개념부터 React 기반 최적화 방법까지 영상 내용을 토대로 인사이트를 정리해보았습니다.

최적화의 기본 원칙

1. 최적화는 필요할 때만: 하면 좋을 것 같다면 하지 말고, 진짜 해야 한다고 느껴지면 프로파일링부터 시작합니다. 하지만 실제 최적화가 필요한 시점을 생각보다 늦게 알 수 있으므로 신중히 접근해야 합니다.

2. 현실적인 테스트 환경: 일반적으로 최적화 작업은 좋은 컴퓨터와 빠른 네트워크 환경에서 테스트되기 때문에 실제 사용자 경험을 반영하지 못할 수 있습니다. 따라서 최악의 상황에서도 서비스가 원활히 동작하는지 테스트해야 합니다.

3. 트레이드오프의 이해: 최적화를 통해 성능을 개선했다면, 그 과정에서 개발 시간이나 유지보수 비용 같은 다른 요소들이 희생될 수 있습니다. "은탄환"은 존재하지 않으므로, 트레이드오프를 명확히 인지해야 합니다.

주요 최적화 영역

1. 초기 로딩 속도

• 번들 크기 관리: 번들이 클수록 대역폭과 지연시간에 영향을 미칩니다. 또한 번들을 작은 단위로 쪼개면 캐싱에도 유리합니다.

• 필요한 리소스 우선 로드: React에서는 화면에 꼭 필요한 요소만 먼저 렌더링하고, 나머지는 비동기로 로드합니다.

• 프리페칭: 페이지 이동 시 필요한 리소스를 미리 가져와 페이지 전환 속도를 향상시킵니다.
  

2. 런타임 성능

• 반응성 개선: 사용자 입력에 대한 빠른 반응성을 확보하여 사용 중 부드러운 경험을 제공합니다.

• 성능 측정 방법: 런타임: FPS(Frame Per Second)를 통해 성능을 확인하고, 크롬 개발자 도구의 프로파일러를 사용하여 렌더링 병목 현상을 분석합니다.

• FPS 유지: 드래그 앤 드롭 같은 동작이 60프레임을 유지하는지 확인 합니다.메인 스레드 블로킹 여부를 파악하고, 프로파일러에서 노란색 막대를 줄이는 방향으로 개선 합니다.
  

React에서의 렌더링 최적화

1. 불필요한 상태 업데이트 줄이기: useEffect 안에서 상태를 변경해 연쇄적으로 리렌더링이 발생하지 않도록 주의 합니다. 파생 상태는 별도의 상태로 관리하기보다, 계산된 값으로 사용 합니다.

2. 메모화 활용: React.memo를 사용하여 컴포넌트가 불필요하게 렌더링되지 않도록 하여 렌더링이 필요한 특정 컴포넌트만 업데이트되도록 최적화 합니다.
   

프론트엔드 개발자로써 성능 최적화는 항상 도전적인 과제인데요. 이번 영상을 통해 최적화의 개념과 실행 방법을 정리할 수 있었습니다. 언제, 어떻게 최적화를 해야 할지 고민이 될 때 이 영상을 참고하면 좋을것 같습니다. 보다 더 자세한 내용은 영상을 통해 확인해보세요.

https://www.youtube.com/watch?v=upUON56UEYo