Patterns
디자인 및 성능 패턴에 대한 최신 정보들을 제공합니다.
📣 NOTICES여러분께서 주신 피드백을 토대로 오탈자 및 링크 URL들을 수정하였습니다.
소중한 피드백 정말 고맙습니다 🙇🙇
Design Patterns
ArchitectureState
Design Pattern 소개
디자인 패턴에 대한 소개
ArchitectureState
Singleton 패턴
앱 전체에서 공유 및 사용되는 단일 인스턴스
ArchitectureState
Proxy 패턴
대상 객체에 대하여 읽기 및 쓰기를 직접 제어한다
ArchitectureState
Provider 패턴
여러 자식 컴포넌트 간에 데이터를 공유한다
ArchitectureState
Prototype 패턴
동일 타입의 여러 객체들이 프로퍼티를 공유한다
ArchitectureState
Container/Presentational 패턴
비즈니스 로직으로부터 뷰를 분리하여 관심사의 분리(SoC) 를 강제한다
ArchitectureState
Observer 패턴
Observable을 활용해 Subscriber에게 이벤트 발생을 알린다
ArchitectureState
Module 패턴
코드를 재사용 가능하면서도 작게 나눈다
ArchitectureState
Mixin 패턴
상속 없이 객체에 기능을 추가한다
ArchitectureState
Mediator/Middleware 패턴
중재자 역할을 하는 객체 통해 컴포넌트들이 서로 통신하도록 한다
ArchitectureState
HOC 패턴
앱 전반적으로 재사용 가능한 로직을 prop으로 컴포넌트에게 제공한다
ArchitectureState
Render Props 패턴
JSX 엘리먼트를 props를 통해 컴포넌트에게 전달한다
ArchitectureState
Hooks 패턴
앱 전체에서 함수를 통해 상태를 가진 로직을 여러 컴포넌트들에서 사용한다
ArchitectureState
Flyweight 패턴
동일한 객체를 다룰 때 이미 존재하는 인스턴스를 재사용한다
ArchitectureState
Factory 패턴
객체를 생성하는 팩토리 함수를 사용한다
ArchitectureState
Compound 패턴
하나의 작업을 위해 여러 컴포넌트를 만들어 역할을 분담하게 한다
ArchitectureState
Command 패턴
명령을 처리하는 객체를 통해 메서드와 실행되는 동작의 결합도를 낮출 수 있다
ArchitectureState
Learning JavaScript Design Patterns
ES2015+ 이상의 문법으로 업데이트 된 자바스크립트 디자인 패 턴 책
Rendering Patterns
소개
렌더링 패턴에 대한 소개
Reactjs의 개요
재사용 가능한 사용자 인터페이스를 개발하기 위한 UI라이브러리
Nextjs의 개요
하이브리드 react앱 개발을 위한 vercel의 프레임워크
클라이언트 사이드 렌더링
클라이언트에서 앱의 UI를 렌더링한다
서버 사이드 렌더링
서버에서 렌더링한 HTML을 직접 응답한다
정적 렌더링
사이트를 빌드할 때 미리 렌더해둔 HTML컨텐츠를 서빙한다
Incremental Static Generation
사이트 빌드 후 정적 컨텐츠를 업데이트한다
Progressive Hydration
페이지에서 덜 중요한 부분의 JavaScript로딩을 지연시킨다
Streaming Server Side Rendering
서버에서 렌더링한 HTML을 직접 응답한다
React Server Components
JavaScript번들에 포함되지 않고 SSR을 보완하는 중간 추상화 렌더링
Selective Hydration
스트리밍 서버 사이드 렌더링과 함께 사용하는 새로운 hydration접근 방식
The Island Architecture
아일랜드 아키텍쳐는 서버 렌더 페이지에서 인터렉트 가능한 작은 코드를 작성할 수 있게 해 준다
Performance Patterns
Loading
리소스 로딩 순서 최적화
리소스들의 로딩 순서를 최적화하여 앱을 빠르게 사용할 수 있도록 한다
LoadingBundles
Static Import
다른 모듈이 export한 코드를 import한다
LoadingBundles
Dynamic Import
필요에 따라 코드들을 동적으로 import한다
Loading
Import On Visibility
중요하지 않은 컴포넌트는 뷰포트에 들어올 때 로드하도록 한다
Loading
Import On Interaction
중요하지 않은 리소스는 사용자 상호작용에 따라 필요해질 때 로드하도록 한다
Loading
Route Based Splitting
현재 라우팅 경로에 따라 모듈을 동적으로 로딩한다
LoadingBundles
Bundle Splitting
코드를 작고 재사용 가능한 수준으로 쪼갠다
Loading
PRPL Pattern
프리캐싱, 지연로딩, 라운드트립 최소화를 통해 초기 로드를 최적화한다
LoadingBundles
Tree Shaking
사용하지 않는 코드를 제거하여 번들 사이즈를 줄인다
Loading
Preload
브라우저에게 중요하고 먼저 다운로드되어야 하는 리소스들에 대한 힌트를 준다
Loading
Prefetch
앱 사용 중 요청될 수 있는 리소스들을 미리 로드하고 캐시한다
Loading
Third Parties
서드파티 라이브러리를 로드하며 발생하는 성능 감소를 최소화한다
Loading
List Virtualization
리스트 가상화를 적용해 다량의 렌더링 성능을 최적화한다
Loading
