12, 13 (#105)

WooWan · web-flow · commit 47a41f6ed66c · 2024-12-21T00:12:23.000+09:00
diff --git a/챕터_12/우창완.md b/챕터_12/우창완.md
@@ -0,0 +1,135 @@
+# 12. 리액트 디자인 패턴
+
+
+
+## 12.2 고차 컴포넌트
+
+고차컴포넌트 = wrapper 컴포넌트
+
+개인적인 취향일 수 있지만, 고차 컴포넌트를 여러 개 쓰면 코드의 흐름과 디버깅이 복잡해져 즐겨 사용하지 않는다. 여러 고차 컴포넌트를 섞으면 더 흐름을 파악하기 어려워진다.
+
+Wrapper hell 패턴을 유발할 수 있따.
+
+
+
+## 12.3 렌더링 Props 패턴
+
+prop이 복잡해지고, TypeScript 타입 복잡성과 추론 호환성이 좋지 않아 안티 패턴 같다.
+
+```jsx
+<Title render={() => <h1>I am a render prop!</h1>} />
+```
+
+
+
+
+
+### 12.3.2 컴포넌트의 자식으로 함수 전달하기
+
+render로 children으로 전달하는 것보다 더 별로다 
+
+JSX 내부에 복잡한 함수 로직패턴이 있어야 할까? 가독성은 선호의 영역이라지만 관심사 분리도, 응집도가 떨어진다.
+
+
+
+
+
+### 12.10.2 Preload + async 기법
+
+async대신 defer도 고려하자. defer의 경우 async보다 더 빠르게 화면을 보여줄 수 있다.
+
+```html
+<script src="some.js" defer></script>
+```
+
+
+
+
+
+### 12.10.3 크롬 95+ 버전에서의 preload
+
+preload가 리소스의 우선순위 큐를 무시하고 먼저 로드되는 "queue jumping" 현상이 있었지만, Chrome 95+ 버전부터는 더 이상 발생하지 않습니다. 현재는 `as` 속성에 따른 정상적인 우선순위를 따른다.
+
+
+
+브라우저는 리소스 우선순위 체계를 가진다고 한다.
+
+결국, 이 우선순위에 따라 순서를 배치하는 게 좋은 pratice
+
+1. Highest
+
+- 메인 문서 (HTML), CSS (@import 포함)
+
+2. High
+
+- 동기 자바스크립트 (`<script>`), 웹폰트, 뷰포트 내의 이미지
+
+3. Medium
+
+- 비동기 CSS
+- 일부 preload 리소스
+
+4. Low
+
+- 비동기 자바스크립트 (`async`, `defer`)
+- 이미지 preload. 뷰포트 밖의 이미지. prefetch 리소스
+
+5. Lowest
+
+- favicon, lazy loading 이미지
+
+
+
+예를 들어, font preload는 css 보다 뒤에 배치하자
+
+```html
+
+<head>
+  <!-- Critical CSS first -->
+  <link rel="stylesheet" href="/styles.css">
+  
+  <!-- Other resources -->
+  
+  <!-- Fonts towards end of head -->
+  <link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
+</head>
+```
+
+
+
+
+
+## 12.11 리스트 가상화
+
+사용자가 스크롤하는 영역만 동적으로 렌더링하는 최적화 기술
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/챕터_13/우창완.md b/챕터_13/우창완.md
@@ -0,0 +1,14 @@
+# 13. 렌더링 패턴
+
+
+
+
+
+# 13.2~13.3 CSR과 SSR
+
+SSR의 엄청난 팬은 아니지만, waterfall을 방지하여 렌더링을 빠르게 할 수 있다.
+
+relay를 쓰면서 csr로도 충분히 좋은 성능을 실제로 경험할 수 있었고, 요즘은 페이지 loader에 대한 접근도 활발히 이루어지고 있다.
+
+remix, tanstack router 등
+
