[서준환] 챕터 1213

챕터_12/서준환.md

@@ -0,0 +1,59 @@
+# 12 리액트 디자인 패턴
+
+## 12.2 고차 컴포넌트
+
+여러 컴포넌트에서 동일한 로직을 사용하고 싶을 때 사용한다.
+
+요즘엔 커스텀으로 재사용 가능한 로직을 분리하는 형식을 많이 사용하기에 고차 컴포넌트를 사용하는 경우는 많지 않다.
+
+실제로 사용하는 경우가 그렇게 많지 않았는데 `suspensive` 라이브러리에선 `wrap` 으로 api를 제공한다. 내부적으로는 고차 컴포넌트 패턴을 사용하지 않을까.
+
+### 장점
+
+- 재사용 가능한 로직을 한 곳에 모아 관리가 가능하다.
+
+### 단점
+
+- prop 이름은 충돌을 일으킬 수 있다.
+
+시원허게 [depp-merge](https://www.npmjs.com/package/deepmerge) 사용하면 괜찮지 않을까?
+
+## 12.3 렌더링 Props 패턴
+
+render props 패턴은 잘 추상화한 컴포넌트 내부에 있는 상태를 필요할 때 외부에서 사용할 수 있게끔 노출시키는 것이다. 라고 저는 알고 있읍니다,,
+
+다들 잘 아시겠지만 `ark` 라이브러리가 이 패턴을 자주 사용하는데, 실제 내부 로직을 잘 추상화하고 있어 외부에서 사용하기 좋은 것 같아요.
+
+특히, 컴포넌트 내부에서 기본으로 보여주는 포맷팅 로직을 외부에서 필요시 커스텀하는 예시가 해당 패턴을 잘 사용한 예시라고 생각합니다.
+
+## 12.5 커스텀훅
+
+저희도 `usehook-ts`처럼 커스텀훅 잘 만들어서 배포해보는 것은 어때요?
+
+## 12.7 동적 가져오기
+
+은 뭐 다들 잘 아시니까,,
+
+단순히 채팅 어플리케이션을 만든다고 했을 때 책의 예시처럼 고민하진 않았을 것 같은데, 코드 작성하면서 이런 부분까지 고민해보는 것도 좋아보이네요,,!
+
+## 12.8 코드스플리팅
+
+webpack을 안 써서 잘 몰랐는데 `webpackChunkName`과 같은 [`magic comment`](https://webpack.js.org/api/module-methods/#magic-comments)를 통해 코드단에서 조금 더 세세하게 설정할 수 있네요!
+
+Next.js를 많이 사용하다보니 얘네는 페이지 단위로 자동으로 스플리팅해줘서 고민이 없었는데, 이전에 Next.js 사용하기 전에는 페이지 단위로 모두 처리해줘야 했다는 것이 생각나네요.
+
+## 12.9 PRPL 패턴
+
+개인적으로 책에서 PRPL 패턴 내용을 글로 본 후 patterns 사이트를 방문해서 영상을 보니 훨씬 이해가 잘 됐네요,, (patterns 내용과 되게 비슷하긴 하네요,,)
+
+
+- [web.dev](https://web.dev/articles/apply-instant-loading-with-prpl?hl=ko)
+- [patterns](https://www.patterns.dev/vanilla/prpl/)
+
+## 12.10 로딩 우선순위
+
+> 지나가다 브라우저에게 resource의 fetch의 우선순위 힌트를 주는 것을 봐서 [요것](https://github.com/WICG/priority-hints/blob/main/EXPLAINER.md)도 남깁니다,,
+
+## 12.11 리스트 가상화
+
+content-visibility를 단순히 요소를 숨길 목적으로만 알고 있었는데,, 최적화 목적으로도 사용할 수 있다는 것ㅇ르 오늘 처음 알았습니다,,

챕터_13/서준환.md

@@ -0,0 +1,34 @@
+# 13 랜더링 패턴
+
+## 13.2 CSR
+
+지금 생각하면 개발하기 제일 편한 방법이 아닐까,, 생각이 들어요.
+
+서버 관리도 필요없고 고민할 부분도 많이 줄어들게되고,, <- 는 제 생각이고 다른 분들이 생각하는 개발하기 제일 편한 렌더링 패턴을 알려주십숑
+
+## 13.3 SSR
+
+어우,, 인증 처리 생각만 하면 머리가 아프네요,,
+
+여러분들은 SSR 페이지의 캐싱을 잘 처리하고 계시나요? 개인화된 데이터가 있는 경우엔 어렵겠지만요!
+
+[ssr caching](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props#caching-with-server-side-rendering-ssr)
+
+## 13.4 정적 렌더링
+
+### 13.4.1 ISR
+
+책에서 나온 부분처럼 요청을 처리한 엣지 네트워크 노드에만 캐시되는 것은 다시 한번 확인해봐야 할 것 같은데 정확한 정보인가요?,, 공식문서엔 안 보이네욥,,
+
+[cache location](https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#customizing-the-cache-location)
+
+### 13.4.2 On-demand ISR
+
+이것은 엣지 네트워크 전체에 페이지를 다시 생성한다는데 뭔가 맞는 것 같기도 하고,,
+
+## 13.5 스트리밍 SSR
+
+매번 헷갈리는 부분인데, 스트리밍 SSR의 경우 부분적으로 가져오기 때문에 초기 렌더는 빠를 수 있으나 초기 렌더링 HTML에 내용이 부족하지 않나요?,,
+
+> 조금 찾아보니 크롤러는 스트리밍된 컨텐츠를 잘 인식하고 인덱싱 할 수 있다고 하네요! [vercel streaming seo](https://vercel.com/guides/does-streaming-affect-seo)
+