[변수미] 챕터 12, 13

챕터_12/변수미.md

@@ -0,0 +1,67 @@
+## 12.1 리액트소개
+
+리액트는 인터페이스를 표현하는 최적화 및 간소화된 방법을 제공합니다. 또한 인터페이스를 컴포넌트, Props, 상태라 는 세 가지 핵심 개념으로 나누어 정리함으로써 복잡하고 까다로운 인터페이스를 쉽게 구축 할수있습니다.
+=> 리액트를 효과적으로 활용하려면 모듈화된 사고방식이 필요
+
+### 12.1.2 리액트의 기본 개념
+
+- JSX : XML과 유사한 구문을 사용하여 HTML을 자바스크립트에서 사용할 수 있게 해 주는 확장 문법
+- 컴포넌트 : 리액트의 기본 구성 요소, 어떠한 입력값(Props)을 받아서 화면에 표시할 내용을 나타내는 리액트의 요소를 반환하는 함수
+- Props : 리액트 컴포넌트의 내부 데이터를 의미, 상위 컴포넌트 내부에서 하위 컴포넌트로 전달할 때 사용
+- 상태 : 컴포넌트의 라이프사이클 동안 값이 변할 수도 있는 정보를 담고 있는 객체
+- 서버 사이드 렌더링 : 서버 사이드 렌더링은 사용자 요청에 응답하여 페이지 콘텐츠를 데이터 저장소나 외부 API의 데이터가 포함된 완전한 HTML파일로 생성
+- **하이드레이션 : 서버에서 html 생성되어 클라이언트로 전송, 클라이언트에서 파싱하여 ui가 상호작용 하도록 연결 <- 이 과정을 하이드레이션**이라고 한다 (현재의 DOM 노드를 검사하고, 해당 자바스크립트와 연결하여 활성화 하는 과정)
+
+> 다 아는 내용이긴 하지만, 개념을 한번 더 짚고 넘어가면 놓을 것 같아 남겨보았습니다.
+
+## 12.2 고차 컴포넌트
+
+> 다른 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 컴포넌트
+
+- 👍 애플리케이션 전체에 걸쳐 여러 컴포넌트에 동일한 동작을 적용해야 할 때
+- 👍 추가된 커스텀 로직 없이도 컴포넌트가 독립적으로 작동할 수 있을 때
+- 👍 재사용하고자 하는 로직을 한 곳에 모아 관리 가능
+- 👎 여러 고차 함수를 조합해서 사용하면, 어떤 고차 컴포넌트에서 props를 넘겨주는 지 알 기 어려울 수 있다 -> 디버깅과 애플리케이션 확장이 어려움
+
+## 12.3 렌더링 Props 패턴
+
+> 렌더링 prop은JSX 요소 를 반환하는 함수 값을 가지는 컴포넌트의 props
+> 컴포넌트 자체는 렌더링 prop 외에 는 아무것도 렌더링하지 않습니다.
+> 자신의 렌더링 로직을 구현하는 대신, 렌더링 prop을 호출
+
+- 👍 여러 컴포넌트 사이에서 로직과 데이터를 쉽게 공유
+- 👍 고차컴포넌트패턴에서 발생할 수 있는 이름 충돌문제를 해결
+- 👎 리액트Hooks이 렌더링Props 패턴으로 해결할 수 있는 문제 대부분을 이미 해결
+
+## 12.4 리액트 Hooks 패턴
+
+리액트16.8 버전부터 도입됨.
+
+> Hooks를사용하면 ES2015의 **클래스 컴포넌트를 사용하지 않고도** 상태와 라이프사이클 메서드를 활용할 수 있습니다.
+
+(내용 생략)
+
+## 12.7 동적 가져오기
+
+모듈이 초기 번들에 불필요하게 추가되어있음
+-> 이로 인해 잠재적인 로딩 시간이 증가 할 수 있는 문제점이 존재
+-> 동적으로 필요할 때 가져옴으로써 해결
+
+ex) 리액트에서 제공하는 Suspense 컴포넌트는 동적으로 로드되어야 할 컴포넌트를 감싸는데, 이는 모듈의 가져오기를일시적으로중단시킴으로써 App 컴포넌트가더 빠르게 내용을 렌더링할 수 있도록 해줍니다.
+
+## 12.9 PRPL 패턴
+
+저사양 기기나 인터넷 연결이 불안정한 지역에서도 애플리케이션이 원활하게 작동하게 하기 위해, 애플리케이션이 최대한 효율적으로 로드되도록 하기 위한 패턴
+
+- 푸시: 중요한 리소스를 효율적으로 푸시하여 서버 왕복 횟수를 최소화하고 로딩 시간을 단축합니다.
+- 렌더링: 사용자 경험을 개선하기 위해 초기 경로를 최대한 빠르게 렌더링합니다.
+- 사전캐싱 :자주방문하는경로의 에셋asset을 백그라운드에서 미리 캐싱하여 서버요청횟수를 줄이고 더 나은 오프라인 경험을 제공합니다.
+- 지연로딩: 자주 요청되지않는 경로나 에셋은 지연로딩합니다.
+
+## 12.10 로딩 우선순위
+
+> 필요하다고 예상되는 특정 리소스를 우선적으로 요청하도록 설정
+> ex) preload 사용
+
+👍 이미지 preload가 문서에서 앞쪽에 위치하면 브라우저가 해당 이미지 를 더 빨리 발견하고 다른 리소스와의 로딩 순서를 조정하는 데 도움을 줄 수 있음
+👎 preload를 잘못 사용하면 FCP에 필수적인 리소스(예: CSS, 폰트)를 지연시켜 원하는 것 과 정반대의 결과를 초래할 수 있음

챕터_13/변수미.md

@@ -0,0 +1,31 @@
+## 클라이언트 사이드 렌더링(CSR)
+
+👍 페이지 새로고침 없이 탐색을 지원하는 SPA를 구축할 수 있게 하여 뛰어난 사용자 경 험을 제공
+👎 페이지의 복잡성이 증가하면 페이지 렌더링에 필요한 자바스크립트 코드의 복잡성과 크기도 증가
+👎 SEO에 SSR보다는 좋지 않다
+
+## 13.3 서버 사이드 렌더링(SSR)
+
+> 모든 요청마다 HTML을 생성
+
+- 개인 맞춤형 데이터를 포함하는 페이지에 가장 적합
+- 인증 상태에 따라 렌더링 여부를 결정해야 하는 페이지에도 적합
+
+## 13.4 정적 렌더링
+
+> 전체 페이지의 HTML을 빌드 시점에 미리 생성하며, 다음 빌드 때 까지 변경되지 않는다.
+
+- 자주 변경되지 않고 **누가 요청하든 동일한 데이터를** 표시하는 페이지 에 가장 적합
+- 👍 페이지 요청을 처리하고, HTML 콘텐츠를 렌더링하고, 응답하는 데 걸리는 시간을 상당히 단축할 수 있다.
+
+## 13.4.1 점진적 정적 생성(ISR)
+
+> 정적 렌더링과 SSR을 결합한 방식
+> 특정 정적 페이지만 미리 렌더링하고 동적 페이지는 사용자 요청 시에 on-demand 방식으로 렌더링
+
+👍 빌드 시간이 단축되며, 특정 시간 간격마다 캐시를 자동으로 무효 화하고 페이지를 다시 생성가능
+
+ISR은 빌드 후 기존 정적 사이트에 점진적으로 업데이트를 적용하기 위해 두 가지 측면에서 작동합니다.
+
+- 새로운 페이지 추가 허용 : 지연 로딩 사용, 새로운 페이지가 생성되는 동안 로딩 화면을 보여줄 수 있다.
+- 기존 페이지 업데이트