patterns
PatternsAbout

Patterns

디자인 및 성능 패턴에 대한 최신 정보들을 제공합니다.

patterns-overview@1.5x
📣 UPDATECompressing JavaScript 새로운 번역 글이 추가되었습니다
Design Patterns

Design Patterns

Design Pattern 소개
ArchitectureState

Design Pattern 소개

디자인 패턴에 대한 소개

Singleton 패턴
ArchitectureState

Singleton 패턴

앱 전체에서 공유 및 사용되는 단일 인스턴스

Proxy 패턴
ArchitectureState

Proxy 패턴

대상 객체에 대하여 읽기 및 쓰기를 직접 제어한다

Provider 패턴
ArchitectureState

Provider 패턴

여러 자식 컴포넌트에서 데이터를 사용하능하게 한다

Prototype 패턴
ArchitectureState

Prototype 패턴

동일 타입의 여러 객체들이 프로퍼티를 공유한다

Container/Presentational 패턴
ArchitectureState

Container/Presentational 패턴

비즈니스 로직으로부터 뷰를 분리하여 관심사의 분리(SoC) 를 강제한다

Observer 패턴
ArchitectureState

Observer 패턴

Observable을 활용해 Subscriber에게 이벤트 발생을 알린다

Module 패턴
ArchitectureState

Module 패턴

코드를 재사용 가능하면서도 작게 나눈다

Mixin 패턴
ArchitectureState

Mixin 패턴

상속 없이 객체에 기능을 추가한다

Mediator/Middleware 패턴
ArchitectureState

Mediator/Middleware 패턴

중재자 역할을 하는 객체 통해 컴포넌트들이 서로 통신하도록 한다

HOC 패턴
ArchitectureState

HOC 패턴

앱 전반적으로 재사용 가능한 로직을 prop으로 컴포넌트에게 제공한다

Render Props 패턴
ArchitectureState

Render Props 패턴

JSX 엘리먼트를 props를 통해 컴포넌트에게 전달한다

Hooks 패턴
ArchitectureState

Hooks 패턴

앱 전체에서 함수를 통해 상태를 가진 로직을 여러 컴포넌트들에서 사용한다

Flyweight 패턴
ArchitectureState

Flyweight 패턴

동일한 객체를 다룰 때 이미 존재하는 인스턴스를 재사용한다

Factory 패턴
ArchitectureState

Factory 패턴

객체를 생성하는 팩토리 함수를 사용한다

Compound 패턴
ArchitectureState

Compound 패턴

하나의 작업을 위해 여러 컴포넌트를 만들어 역할을 분담하게 한다

Command 패턴
ArchitectureState

Command 패턴

명령을 처리하는 객체를 통해 메서드와 실행되는 동작의 결합도를 낮출 수 있다

Learning JavaScript Design Patterns
ArchitectureState

Learning JavaScript Design Patterns

ES2015+ 이상의 문법으로 업데이트 된 자바스크립트 디자인 패턴 책

Rendering Patterns

소개

소개

렌더링 패턴에 대한 소개

Reactjs의 개요

Reactjs의 개요

재사용 가능한 사용자 인터페이스를 개발하기 위한 UI라이브러리

Nextjs의 개요

Nextjs의 개요

하이브리드 react앱 개발을 위한 vercel의 프레임워크

클라이언트 사이드 렌더링

클라이언트 사이드 렌더링

클라이언트에서 앱의 UI를 렌더링한다

서버 사이드 렌더링

서버 사이드 렌더링

서버에서 렌더링한 HTML을 직접 응답한다

정적 렌더링

정적 렌더링

사이트를 빌드할 때 미리 렌더해둔 HTML컨텐츠를 서빙한다

Incremental Static Generation

Incremental Static Generation

사이트 빌드 후 정적 컨텐츠를 업데이트한다

Progressive Hydration

Progressive Hydration

페이지에서 덜 중요한 부분의 JavaScript로딩을 지연시킨다

Streaming Server Side Rendering

Streaming Server Side Rendering

서버에서 렌더링한 HTML을 직접 응답한다

React Server Components

React Server Components

JavaScript번들에 포함되지 않고 SSR을 보완하는 중간 추상화 렌더링

Selective Hydration

Selective Hydration

스트리밍 서버 사이드 렌더링과 함께 사용하는 새로운 hydration접근 방식

The Island Architecture

The Island Architecture

아일랜드 아키텍쳐는 서버 렌더 페이지에서 인터렉트 가능한 작은 코드를 작성할 수 있게 해 준다

Performance Patterns

리소스 로딩 순서 최적화
Loading

리소스 로딩 순서 최적화

리소스들의 로딩 순서를 최적화하여 앱을 빠르게 사용할 수 있도록 한다

Static Import
LoadingBundles

Static Import

다른 모듈이 export한 코드를 import한다

Dynamic Import
LoadingBundles

Dynamic Import

필요에 따라 코드들을 동적으로 import한다

Import On Visibility
Loading

Import On Visibility

중요하지 않은 컴포넌트는 뷰포트에 들어올 때 로드하도록 한다

Import On Interaction
Loading

Import On Interaction

중요하지 않은 리소스는 사용자 상호작용에 따라 필요해질 때 로드하도록 한다

Route Based Splitting
Loading

Route Based Splitting

현재 라우팅 경로에 따라 모듈을 동적으로 로딩한다

Bundle Splitting
LoadingBundles

Bundle Splitting

코드를 작고 재사용 가능한 수준으로 쪼갠다

PRPL Pattern
Loading

PRPL Pattern

프리캐싱, 지연로딩, 라운드트립 최소화를 통해 초기 로드를 최적화한다

Tree Shaking
LoadingBundles

Tree Shaking

사용하지 않는 코드를 제거하여 번들 사이즈를 줄인다

Preload
Loading

Preload

브라우저에게 중요하고 먼저 다운로드되어야 하는 리소스들에 대한 힌트를 준다

Prefetch
Loading

Prefetch

앱 사용 중 요청될 수 있는 리소스들을 미리 로드하고 캐시한다

Third Parties
Loading

Third Parties

서드파티 라이브러리를 로드하며 발생하는 성능 감소를 최소화한다

List Virtualization
Loading

List Virtualization

리스트 가상화를 적용해 다량의 렌더링 성능을 최적화한다

Compressing JavaScript
Loading

Compressing JavaScript

네트워크를 통해 스크립트를 받는 시간을 최소화한다

Case Studies

Airbnb Case Study

Airbnb Case Study

Airbnb 사이트의 리스팅 페이지를 최적화한다

Hey.com

Hey.com

Hey.com 의 자바스크립트 최소화 사례

Optimizing Core Web Vitals on a Next.js app

Optimizing Core Web Vitals on a Next.js app

성능 최적화 사례 분석

  • Patterns
  • About
  • Submit Feedback
© 2020-2022 Patterns.dev. All rights reserved.