René's URL Explorer Experiment


Title: Patterns.dev.kr

Open Graph Title: Patterns.dev.kr - 모던 웹 앱 디자인 패턴

Description: 모던 웹 앱 디자인 패턴

Opengraph URL: https://patterns-dev-kr.github.io/

Generator: Astro v4.16.6

direct link

Domain: patterns-dev-kr.github.io

Noneie=edge
google-site-verificationer9zvCmECxtt0KP_BjDZ4WplZsNT5ApeDBK4wYD7aI0
naver-site-verificationeaca9475c8a73d77aa2e34ac3d3e8097cef7397d
og:typewebsite
og:image//og-image.png
og:image:url//og-image.png
og:image:altPatterns.dev.kr
astro-view-transitions-enabledtrue
astro-view-transitions-fallbackswap

Links:

patternshttps://patterns-dev-kr.github.io/
Readhttps://patterns-dev-kr.github.io/
Abouthttps://patterns-dev-kr.github.io/about
Read Onlinehttps://patterns-dev-kr.github.io/design-patterns/introduction
Download eBook or PDFhttps://www.patterns.dev/book
Design Pattern 소개 디자인 패턴에 대한 소개 https://patterns-dev-kr.github.io/design-patterns/introduction
Singleton 패턴 앱 전체에서 공유 및 사용되는 단일 인스턴스 https://patterns-dev-kr.github.io/design-patterns/singleton-pattern
Proxy 패턴 대상 객체에 대하여 읽기 및 쓰기를 직접 제어한다 https://patterns-dev-kr.github.io/design-patterns/proxy-pattern
Provider 패턴 여러 자식 컴포넌트 간에 데이터를 공유한다 https://patterns-dev-kr.github.io/design-patterns/provider-pattern
Prototype 패턴 동일 타입의 여러 객체들이 프로퍼티를 공유한다 https://patterns-dev-kr.github.io/design-patterns/prototype-pattern
Container/Presentational 패턴 비즈니스 로직으로부터 뷰를 분리하여 관심사의 분리(SoC) 를 강제한다 https://patterns-dev-kr.github.io/design-patterns/container-presentational-pattern
Observer 패턴 Observable을 활용해 Subscriber에게 이벤트 발생을 알린다 https://patterns-dev-kr.github.io/design-patterns/observer-pattern
Module 패턴 코드를 재사용 가능하면서도 작게 나눈다 https://patterns-dev-kr.github.io/design-patterns/module-pattern
Mixin 패턴 상속 없이 객체에 기능을 추가한다 https://patterns-dev-kr.github.io/design-patterns/mixin-pattern
Mediator/Middleware 패턴 중재자 역할을 하는 객체 통해 컴포넌트들이 서로 통신하도록 한다 https://patterns-dev-kr.github.io/design-patterns/mediator-middleware-pattern
HOC 패턴 앱 전반적으로 재사용 가능한 로직을 prop으로 컴포넌트에게 제공한다 https://patterns-dev-kr.github.io/design-patterns/hoc-pattern
Render Props 패턴 JSX 엘리먼트를 props를 통해 컴포넌트에게 전달한다 https://patterns-dev-kr.github.io/design-patterns/render-props-pattern
Hooks 패턴 앱 전체에서 함수를 통해 상태를 가진 로직을 여러 컴포넌트들에서 사용한다 https://patterns-dev-kr.github.io/design-patterns/hooks-pattern
Flyweight 패턴 동일한 객체를 다룰 때 이미 존재하는 인스턴스를 재사용한다 https://patterns-dev-kr.github.io/design-patterns/flyweight-pattern
Factory 패턴 객체를 생성하는 팩토리 함수를 사용한다 https://patterns-dev-kr.github.io/design-patterns/factory-pattern
Compound 패턴 하나의 작업을 위해 여러 컴포넌트를 만들어 역할을 분담하게 한다 https://patterns-dev-kr.github.io/design-patterns/compound-pattern
Command 패턴 명령을 처리하는 객체를 통해 메서드와 실행되는 동작의 결합도를 낮출 수 있다 https://patterns-dev-kr.github.io/design-patterns/command-pattern
Learning JavaScript Design Patterns ES2015+ 이상의 문법으로 업데이트 된 자바스크립트 디자인 패턴 책 https://patterns-dev-kr.github.io/design-patterns/learnaing-javascript-design-patterns
소개 렌더링 패턴에 대한 소개 https://patterns-dev-kr.github.io/rendering-patterns/introduction
Reactjs의 개요 재사용 가능한 사용자 인터페이스를 개발하기 위한 UI라이브러리 https://patterns-dev-kr.github.io/rendering-patterns/overview-of-reactjs
Nextjs의 개요 하이브리드 react앱 개발을 위한 vercel의 프레임워크 https://patterns-dev-kr.github.io/rendering-patterns/overview-of-nextjs
클라이언트 사이드 렌더링 클라이언트에서 앱의 UI를 렌더링한다 https://patterns-dev-kr.github.io/rendering-patterns/client-side-rendering
서버 사이드 렌더링 서버에서 렌더링한 HTML을 직접 응답한다 https://patterns-dev-kr.github.io/rendering-patterns/server-side-rendering
정적 렌더링 사이트를 빌드할 때 미리 렌더해둔 HTML컨텐츠를 서빙한다 https://patterns-dev-kr.github.io/rendering-patterns/static-rendering
Incremental Static Generation 사이트 빌드 후 정적 컨텐츠를 업데이트한다 https://patterns-dev-kr.github.io/rendering-patterns/incremental-static-generation
Progressive Hydration 페이지에서 덜 중요한 부분의 JavaScript로딩을 지연시킨다 https://patterns-dev-kr.github.io/rendering-patterns/progressive-hydration
Streaming Server Side Rendering 서버에서 렌더링한 HTML을 직접 응답한다 https://patterns-dev-kr.github.io/rendering-patterns/streaming-server-side-rendering
React Server Components JavaScript번들에 포함되지 않고 SSR을 보완하는 중간 추상화 렌더링 https://patterns-dev-kr.github.io/rendering-patterns/react-server-components
Selective Hydration 스트리밍 서버 사이드 렌더링과 함께 사용하는 새로운 hydration접근 방식 https://patterns-dev-kr.github.io/rendering-patterns/selective-hydration
The Island Architecture 아일랜드 아키텍쳐는 서버 렌더 페이지에서 인터렉트 가능한 작은 코드를 작성할 수 있게 해 준다 https://patterns-dev-kr.github.io/rendering-patterns/the-island-architecture
리소스 로딩 순서 최적화 리소스들의 로딩 순서를 최적화하여 앱을 빠르게 사용할 수 있도록 한다 https://patterns-dev-kr.github.io/performance-patterns/loading-sequence
Static Import 다른 모듈이 export한 코드를 import한다 https://patterns-dev-kr.github.io/performance-patterns/static-import
Dynamic Import 필요에 따라 코드들을 동적으로 import한다 https://patterns-dev-kr.github.io/performance-patterns/dynamic-import
Import On Visibility 중요하지 않은 컴포넌트는 뷰포트에 들어올 때 로드하도록 한다 https://patterns-dev-kr.github.io/performance-patterns/import-on-visibility
Import On Interaction 중요하지 않은 리소스는 사용자 상호작용에 따라 필요해질 때 로드하도록 한다 https://patterns-dev-kr.github.io/performance-patterns/import-on-interaction
Route Based Splitting 현재 라우팅 경로에 따라 모듈을 동적으로 로딩한다 https://patterns-dev-kr.github.io/performance-patterns/route-based-splitting
Bundle Splitting 코드를 작고 재사용 가능한 수준으로 쪼갠다 https://patterns-dev-kr.github.io/performance-patterns/bundle-splitting
PRPL Pattern 프리캐싱, 지연로딩, 라운드트립 최소화를 통해 초기 로드를 최적화한다 https://patterns-dev-kr.github.io/performance-patterns/prpl-pattern
Tree Shaking 사용하지 않는 코드를 제거하여 번들 사이즈를 줄인다 https://patterns-dev-kr.github.io/performance-patterns/tree-shaking
Preload 브라우저에게 중요하고 먼저 다운로드되어야 하는 리소스들에 대한 힌트를 준다 https://patterns-dev-kr.github.io/performance-patterns/preload
Prefetch 앱 사용 중 요청될 수 있는 리소스들을 미리 로드하고 캐시한다 https://patterns-dev-kr.github.io/performance-patterns/prefetch
Third Parties 서드파티 라이브러리를 로드하며 발생하는 성능 감소를 최소화한다 https://patterns-dev-kr.github.io/performance-patterns/third-parties
List Virtualization 리스트 가상화를 적용해 다량의 렌더링 성능을 최적화한다 https://patterns-dev-kr.github.io/performance-patterns/list-virtualization
Compressing JavaScript 네트워크를 통해 스크립트를 받는 시간을 최소화한다 https://patterns-dev-kr.github.io/performance-patterns/compressing-javascript
Airbnb Case Study Airbnb 사이트의 리스팅 페이지를 최적화한다 https://patterns-dev-kr.github.io/case-studies/airbnb-case-study
Hey.com Hey.com 의 자바스크립트 최소화 사례 https://patterns-dev-kr.github.io/case-studies/hey-com
Optimizing Core Web Vitals on a Next.js app 성능 최적화 사례 분석 https://patterns-dev-kr.github.io/case-studies/optimizing-core-web-vitals-on-a-nextjs-app

Viewport: initial-scale=1, maximum-scale=5, width=device-width, viewport-fit=cover

Robots: index, follow

URLs of crawlers that visited me.