# Learning Patterns - 웹 앱 설계를 위한 패턴들

> Clean Markdown view of GeekNews topic #7182. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=7182](https://news.hada.io/topic?id=7182)
- GeekNews Markdown: [https://news.hada.io/topic/7182.md](https://news.hada.io/topic/7182.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2022-08-15T09:25:01+09:00
- Updated: 2022-08-15T09:25:01+09:00
- Original source: [patterns.dev](https://www.patterns.dev/)
- Points: 53
- Comments: 3

## Topic Body

- 디자인 패턴 및 웹 컴포넌트 패턴 설명을 웹 사이트 및 무료 e북으로 제공 (435p PDF)  
→ 바닐라 자바스크립트 & React   
- CodeSandbox를 이용한 실전 예제  
- 애니메이션으로 패턴 설명   
### 패턴들   
- Design Patterns : Singleton, Proxy, Provider, Prototype, Observer, Module, Mixin, Hooks, Factory, Compound, Command,..  
- Rendering Patterns : CSR, SSR, Static, Incremental Static Generation, Progressive Hydration, Streaming SSR, Islands Architecture,..  
- Performance Patterns : Static/Dynamic Import, Import on Visibility/Interaction, Route Based Splitting, Bundle Splitting, RPRL, Tree Shaking, Preloadk, Prefetch, List Virtualization,..

## Comments



### Comment 11803

- Author: alucard
- Created: 2022-08-16T09:35:59+09:00
- Points: 1

간단히 이해하기에는 정말 좋은데 잘못된 정보도 간혹 있어서 다른 자료도 같이보면서 스터디하면 좋더라구요

### Comment 11800

- Author: async3619
- Created: 2022-08-16T08:54:57+09:00
- Points: 1

진짜 essential한 항목들만 있네요. 보고 배우기 정말 좋은것 같습니다.  
좋은 기사 감사합니다.

### Comment 11799

- Author: harimkims
- Created: 2022-08-16T08:39:38+09:00
- Points: 1

3번째 항목에 애니메이션인데 오타가 있네요