모듈성

대규모 애플리케이션을 구축하는 꿀팁은 대규모 애플리케이션으로 구축하지 않는 것

모듈성

애플리케이션을 작고 독립된(독립적으로 개발 및 테스트할 수 있는) 모듈 또는 컴포넌트로 나누는 것

• 모듈성은 코드의 재사용성을 높힘

• 모듈화된 앱을 구축하는 최고의 방법은 작고, 모든 것을 포함하고 있고 독립적으로 테스트 및 디버깅할 수 있는 기능 조각에서 시작됨

• 모듈을 사용하면 조직화되고, 재사용할 수 있고, 유지보수성이 높은 코드베이스를 갖게 됨

컴포넌트화를 통해 모듈성을 확보하면 앱 유지보수 및 확장가능하게 만들고 개발자 경험을 향상시킴

• 컴포넌트의 명확한 구조와 재사용성을 제공하기 떄문

재사용 가능한 컴포넌트 식별

• 버튼, 메뉴, 카드 같이 반복적으로 반복되는 요소들

• 헤더, 컨텐츠 영역, 푸터 같은 페이지의 섹션들

• 기능의 논리적 덩어리

앱을 작은 컴포넌트로 나누기

컴포넌트화의 핵심은 앱을 보다 작고, 관리 가능한 컴포넌트들로 자르는 것

• 작은 컴포넌트들은 보다 유연하고 여러 컨텍스트에서 재사용할 수 있다.

• 모든것을 컴포넌트로 만들고 싶을 수 있지만 균형이 중요

  • 너무 잘게 나누면 그 코드베이스를 탐색하기 어려움

• 컴포넌트를 나눌 때는 여러 요소들을 고려해야 한다.

재사용성

• 특정 UI 요소 혹은 기능을 앱의 여러 부분에서 반복한다면 좋은 후보

단순성과 가독성

• 컴포넌트를 작은 하위 컴포넌트로 나누고 각각의 책임에 집중하도록 하면 코드를 보다 쉽게 읽고 이해할 수 있게됨

개선된 테스트 가능성

• 컴포넌트가 더 작고 집중된 책임을 갖으면 보다 효율적으로 테스트 작성이 가능해짐

• 적은 내부 상태, 적은 사이드 이펙트를 가지므로 테스트에서 격리하기 쉽고 각 컴포넌트가 의도한 대로 작동함을 보장

성능 고려 사항

• 컴포넌트를 나눔으로써 렌더링을 최적화하거나 불필요한 조작을 줄일 수 있음

• 종종 작은 컴포넌트가 보다 적은 수의 리렌더링을 하며 컴포넌트와 계산을 메모제이션함

• 이는 떄때로 앱의 전반적인 성능을 개선할 수 있음

디자인 시스템을 구현하라

재사용 가능한 컴포넌트, 가이드라인, 에셋의 집합

• 팀이 응집된 제품을 구축하는데 도움을 준다.

• 디자인 시스템을 구축하면 리액트 앱의 컴포넌트 설계와 개발을 표준화하는데 도움이 된다.

• 이를 활용하여 구체적인 로직과 기능에만 집중 가능

지연 로딩

필요할 때 만 리소스를 로딩함으로써 앱의 초기 로딩을 크게 최소화하고 사용자 경험 및 리소스 효율을 개선

• 더 나아가 앱 전체를 독립적으로 로딩될 수 있는 작은 덩어리로 나눈다.

• 동적 임포트: lazy()

  • lazy는 default exports 를 사용할 때에만 효과가 있다.

  • 즉시 필요하지 않은 큰 컴포넌트에만 사용해야 한다.

  • 코드에 약간의 복잡성이 추가되고, SSR 관련 이슈를 야기할 수 있기에

• 상호작용에 대한 지연로딩: 인터렉션이 발생할 때 컴포넌트를 동적으로 로딩

• Intersection Observer API 사용한 지연 로딩: 페이지의 특정 영역에 들어올 때 코드를 로딩

코드 분할

앱 코드 전체를 보다 작은 관리 가능한 덩어리로 나눔으로써 성능 최적화하는 기법

• 모듈화된 혹은 컴포넌트화된 앱 구조를 갖추는 것은 효율적인 코드 분할을 위한 토대를 닦는 것

• 컴포넌트가 독립적이고 필요한 모든 것을 가지고 있도록 설계되면 이들을 필요할 때 로딩할 수 있는 구분된 덩어리로 분리하기 더욱 쉬워짐

• 코드 분할의 목표는 전체 앱을 미리 로딩하지 않고, 사용자에게 필요한 순간에 필요한 코드만 로딩하는 것

코드 분할하려면 가장 먼저 크리티컬 패스를 식별해야 한다.

• 크리티컬 패스는 앱이 사용자에게 표시되기 전 반드시 로딩되어야 하는 리소스의 순서를 의미

• 어떤 리소스를 보다 발전된 코드 분할 기법을 사용해 지연로딩 할 수 있는지 결정할 수 있음

코드 분할 패턴

• 라우트에 따라 분할: 사용자의 탐색에 따라 페이지 모듈을 로딩

• 컴포넌트에 따라 분할: 그래프나 테이블 같은 큰 컴포넌트를 지연 로딩

• 온디맨드 로딩: 사용자가 버튼, 드롭다운 등을 클릭할 때 코드를 로딩

  • 온디맨드 -> 사용자가 필요할 때 즉시 제공되는 방식

엔트리 포인트 분할

초기 자바스크립트 파일을 작은 덩어로리로 자른다.

• 이 덩어리들은 필요할 때만 로딩되며 페이지의 초기 로딩시간을 줄여줌

엔트리 포인트란?

• 사용자가 웹사이트를 방문했을 때 로딩되는 첫 번째 자바스크립트 파일

벤더 분할

코드에서 서드파티 의존성을 분리할 때 사용하는 기법

• 서드파티 라이브러리, 프레임워크를 사용하면 해당 라이브러리 코드들은 앱 번들에 포함됨

• 번들의 크기는 커지고 로딩 속도는 느려지며, 라이브러리가 업데이트 되었을 때 캐시 무효화 이슈를 야기할 수 있음

• 벤더 분할을 사용하면, 서드파티 의존성과 관련된 코드를 별도의 덩어리로 잘라내 독립적으로 캐싱 가능

  • 우리 코드를 업데이트 했을 때, 최종 사용자는 전체 라이브러리를 다시 다운로드하지 않아도 된다는 의미

  • 라이브러리는 이미 캐싱되어있기 때문

• 캐싱을 최적화하고 불필요한 데이터 다운로드를 줄임으로써 더 빠른 로딩과 더 나은 UX 제공

동적 분할

JS 코드를 필요할 때 필요한 만큼 로딩할 때 사용하는 기법

• 코드 각 부분이 특정 상황에서만 필요한 대규모 앱에 유용

• 동적 분할은 미리 정해진 엔트리 포인트에만 의존하지 않는다는 점에서 엔트리 포인트 분할과 다름

  • 리엑트의 lazy/suspense, 동적 import 기능 도구나 패턴들을 사용해 코드를 분할한다.

컴포넌트 수준 분할

각 컴포넌트를 필요할 때만 지연 로딩

• 네트워크 대역폭을 보다 효율적으로 사용할 수 있지만 경우에 따라 로딩해야하기 때문에 지연을 증가시키기도함

라우트 기반 분할

라우트에 기반해 각각의 번들로 나눔

• 초기 코드량을 줄이는데 도움되지만, 네트워크 대역폭 사용관점에서는 컴포넌트 수준보다는 효율적이지 않음