[PART 1] 프론트엔드 개발 돌아보기


01장 프론트엔드 구성 요소와 발전 과정 돌아보기
__1.1 프론트엔드의 구성 요소와 발전 과정을 돌아봐야 하는 이유
__1.2 웹 개발과 프론트엔드가 차지하는 위상과 구성 요소
__1.3 초창기 웹 프론트엔드
__1.4 모듈의 탄생과 한계
__1.5 번들러의 탄생
__1.6 패키지 매니저의 도입
__1.7 템플릿 엔진의 도입
__1.8 명령형, 선언형 프로그래밍
____1.8.1 명령형 방식의 프론트엔드 개발
____1.8.2 선언형 방식의 프론트엔드 개발
학습 마무리 | 핵심 키워드 리마인드


02장 싱글 페이지 애플리케이션 돌아보기
__2.1 싱글 페이지 애플리케이션의 장점을 돌아봐야 하는 이유
__2.2 네트워크 호출 빈도
__2.3 성능 향상
__2.4 생산성 향상
____2.4.1 프론트엔드와 백엔드 개발 영역의 엄격한 분리
____2.4.2 선언형 프로그래밍을 사용한 빠른 프로토타입 구현
학습 마무리 | 핵심 키워드 리마인드


03장 UI 컴포넌트의 위상 돌아보기
__3.1 UI 컴포넌트의 위상을 돌아봐야 하는 이유
__3.2 프론트엔드 개발에서 UI 컴포넌트의 위상
__3.3 UI 컴포넌트의 추상화, 인터페이스, 캡슐화
__3.4 바닐라 자바스크립트로 컴포넌트 만들기
__3.5 웹 컴포넌트 API를 사용해 컴포넌트 만들기
__3.6 바닐라 자바스크립트 vs 웹 컴포넌트 API를 사용한 컴포넌트 비교
학습 마무리 | 핵심 키워드 리마인드


04장 상태와 반응성 돌아보기
__4.1 상태와 반응성을 돌아봐야 하는 이유
__4.2 상태와 설계 컴포넌트
____4.2.1 UI, 인터랙션을 담당하는 뷰(VIEW)
____4.2.2 데이터를 담당하는 모델
____4.2.3 모델과 뷰를 이어주는 중재자
__4.3 주요 디자인 패턴을 사용한 반응성 구현
____4.3.1 비 반응성 MVC 패턴 중재자 만들기
____4.3.2 MVC 패턴에 반응성 주입하기
__4.4 관찰자 패턴 알아보기
__4.5 MVVM 패턴과 반응성
____4.5.1 양방향 바인딩과 단방향 바인딩
____4.5.2 MVVM 패턴을 적용한 할 일 리스트 작성하기
____4.5.3 바인더 알아보기
____4.5.4 바인더 작성하기
학습 마무리 | 핵심 키워드 리마인드


05장 프론트엔드 구성 요소와 발전 과정 돌아보기
__5.1 개발 환경을 돌아봐야 하는 이유
__5.2 Node.js와 버전 매니저
____5.2.1 Node.js 구조와 원리
____5.2.2 노드 버전 매니저
__5.3 패키지 매니저
____5.3.1 패키지 매니저 비교
__5.4 모노레포
____5.4.1 모노레포와 모노레포 도구의 장점
__5.5 코드 퀄리티와 코드 포매팅
____5.5.1 린터
____5.5.2 포매터
____5.5.3 코드 정적 분석기
__5.6 리액트 개발 도구
____5.6.1 리액트 데브툴즈
____5.6.2 리액트 스캔
__5.7 리액트 개발 환경과 빌드 도구
____5.7.1 비트
____5.7.2 Rsbuild
____5.7.3 리액트 라우터
학습 마무리 | 핵심 키워드 리마인드


[PART 2] 리액트 핵심 요소 깊게 돌아보기


06장 JSX 구성 요소 돌아보기
__6.1 당신이 JSX를 공부해야 하는 이유
__6.2 DSL과 JSX 알아보기
__6.3 JSX를 구성하는 요소
____6.3.1 JSXElements
____6.3.2 JSXAttributes
____6.3.3 JSXChildren
____6.3.4 JSX Strings
학습 마무리 | 핵심 키워드 리마인드


07장 JSX 핵심 문법과 자바스크립트 변환 돌아보기
__7.1 JSX 핵심 문법과 자바스크립트 변환을 돌아봐야 하는 이유
__7.2 JSX 변환하기
____7.2.1 자동 런타임이란
____7.2.2 바벨로 JSX 변환해보기
____7.2.3 SWC로 JSX 변환해보기
____7.2.4 ESBuild로 JSX 변환해보기
____7.2.5 React.createElement와 리액트 엘리먼트 그리고 가상 DOM
__7.3 JSX의 핵심 문법 돌아보기
____7.3.1 템플릿 리터럴과 태그드 템플릿 돌아보기
____7.3.2 JSX VS 템플릿 리터럴
____7.3.3 합성 이벤트
____7.3.4 단일 루트 엘리먼트
____7.3.5 삼항 연산자와 &&
학습 마무리 | 핵심 키워드 리마인드


08장 리액트 재조정과 키 프롭스 돌아보기
__8.1 당신이 렌더링과 가상 DOM을 돌아봐야 하는 이유
__8.2 리액트 컴포넌트와 인스턴스
__8.3 렌더링과 리렌더링
__8.4 재조정 과정
__8.5 얕은 비교와 렌더링 최적화
__8.6 키(key) 프롭스와 리스트 렌더링
__8.7 키(key) 프롭스와 메모이제이션
학습 마무리 | 핵심 키워드 리마인드


09장 리액트 렌더링 규칙 돌아보기
__9.1 당신이 리액트 렌더링 규칙을 돌아봐야 하는 이유
__9.2 렌더링 조건
____9.2.1 애플리케이션이 처음 로드될 때
____9.2.2 컴포넌트 내부 상탯값의 변경으로 인한 리렌더링
____9.2.3 부모 컴포넌트가 리렌더링되었을 때
____9.2.4 컨텍스트의 값이 변경되었을 때
__9.3 리렌더링에 대한 오해
____9.3.1 자식 컴포넌트와 props.children
____9.3.2 컴포넌트에 전달되는 프롭스값이 변경되었을 때?
__9.4 리액트 렌더링 규칙
____9.4.1 부수 효과 제거와 멱등성 보장
____9.4.2 리액트 렌더링 규칙 - JSX로 전달된 값의 불변성을 유지
학습 마무리 | 핵심 키워드 리마인드


10장 리액트의 프롭스와 컴포넌트 패턴 돌아보기
__10.1 당신이 리액트의 프롭스와 컴포넌트 패턴을 돌아봐야 하는 이유
__10.2 리액트의 프롭스와 상태 개념
____10.2.1 리액트의 프롭스와 상태
____10.2.2 프롭스의 불변성
____10.2.3 프롭스와 속성
__10.3 프롭스 자료형 검증
____10.3.1 런타임 검증을 위한 prop-types 라이브러리
____10.3.2 컴파일 타임 검증을 위한 타입스크립트
__10.4 프롭스를 사용하는 컴포넌트 패턴
____10.4.1 컴포넌트 합성과 상속, 그리고 고차 컴포넌트
____10.4.2 중첩 컴포넌트와 children, 프롭스 드릴링
____10.4.3 렌더 프롭스 패턴
____10.4.4 슬롯 프롭스 패턴
____10.4.5 컴파운드 컴포넌트 패턴
____10.4.6 명시적 슬롯 패턴 - slot type RFC
학습 마무리 | 핵심 키워드 리마인드


11장 리액트의 상태와 배칭 돌아보기
__11.1 당신이 리액트의 상태와 배칭을 돌아봐야 하는 이유
__11.2 리액트의 상태 정의와 종류
____11.2.1 지역 상태와 파생 상태
____11.2.2 상태와 스냅샷
____11.2.3 상태의 불변성
____11.2.4 상태 끌어올리기
__11.3 컴포넌트 간의 데이터 흐름 돌아보기
____11.3.1 단방향 데이터 흐름과 단방향 바인딩
____11.3.2 양방향 데이터 흐름과 양방향 바인딩
__11.4 리액트 배칭 돌아보기
____11.4.1 배칭의 개념과 필요성
____11.4. 2 비동기 동작에서의 배칭 프로세스
____11.4.3 react-dom의 flushSync( )
학습 마무리 | 핵심 키워드 리마인드


12장 리액트를 구성하는 뿌리, 파이버 돌아보기
__12.1 당신이 리액트 파이버를 돌아봐야 하는 이유
__12.2 리액트 스택 재조정자 알아보기
____12.2.1 스택 재조정자 동작 원리
____12.2.2 스택 재조정자의 한계
__12.3 파이버 아키텍처 알아보기
____12.3.1 파이버 노드 해부하기
____12.3.2 파이버 우선순위와 레인(Lanes) 모델
____12.3.3 파이버 트리 구조 : 재귀 없는 순회
____12.3.4 더블 버퍼링과 얼터네이트 포인터
____12.3.5 파이버 아키텍처와 동시성 기능 원리
학습 마무리 | 핵심 키워드 리마인드


[PART 3] 리액트 훅 사용법 깊게 돌아보기


13장 리액트 훅의 사용 규칙 돌아보기
__13.1 당신이 리액트 훅을 돌아봐야 하는 이유
__13.2 왜 훅이라고 부를까?
__13.3 클래스 컴포넌트에서 함수형 컴포넌트로
____13.3.1 this 키워드의 혼란과 수동 바인딩의 번거로움
____13.3.2 고차 컴포넌트와 래퍼 지옥
____13.3.3 커스텀 훅을 사용한 로직 재사용
__13.4 리액트 훅 사용 규칙
____13.4.1 훅은 최상위에서만 호출해야 한다
____13.4.2 오직 리액트 함수 내에서만 훅을 호출해야 한다
____13.4.3 훅의 인수는 불변성을 가지고 있어야 한다
학습 마무리 | 핵심 키워드 리마인드


14장 리액트 필수 훅 돌아보기
__14.1 당신이 리액트 필수 훅을 돌아봐야 하는 이유
__14.2 useState( ) : 리액트 상태 관리의 시작과 핵심
____14.2.1 상태 초기화와 지연 초기화
____14.2.2 상태 업데이트와 업데이트 함수
____14.2.3 업데이트 함수와 클로저
__14.3 useEffect( ) : 컴포넌트를 외부 세계와 동기화하기
____14.3.1 useEffect( ) 사용법과 의존성 배열 돌아보기
____14.3.2 부수 효과의 뒷정리 : useEffect( )의 클린업 함수
____14.3.3 부수 효과 다루기 : 외부 시스템과 동기화
____14.3.4 엄격 모드에서의 useEffect( )
__14.4 useRef( ) : 렌더링을 넘어 값을 기억하는 법
____14.4.1 리렌더링을 발생시키지 않는 useRef( )
____14.4.2 useRef( )를 사용한 DOM 요소 직접 접근
____14.4.3 forwardRef( ) : 부모가 자식의 DOM에 접근하는 방법
____14.4.4 리액트 19버전에서의 forwardRef( )
__14.5 useReducer( )와 리액트 포탈
____14.5.1 useReducer( ) 알아보기
____14.5.2 createPortal( )로 모달 컴포넌트 만들기
학습 마무리 | 핵심 키워드 리마인드


15장 리액트 메모이제이션 돌아보기
__15.1 당신이 리액트 메모이제이션을 돌아봐야 하는 이유
__15.2 memo( )를 사용한 렌더링 최적화
____15.2.1 memo( ) 사용법
____15.2.2 성급한 최적화의 함정
____15.2.3 중첩 구조와 children 프롭스의 함정
__15.3 useMemo( ) : 값 메모이제이션
____15.3.1 useMemo( ) 내부 동작 들여다보기
____15.3.2 useMemo( )를 활용한 연산 최적화 예제
__15.4 useCallback( ) : 함수 메모이제이션
____15.4.1 useCallback( )으로 커스텀 훅에 안정적인 콜백 전달하기
____15.4.2 useCallback( )으로 프롭스 메모이제이션하기
____15.4.3 useCallback( ) 활용 : 디바운스 올바르게 동작하게 하기
__15.5 리액트 컴파일러를 이용한 자동 메모이제이션
____15.5.1 수동 메모이제이션의 한계
____15.5.2 컴파일러 개발의 역사
____15.5.3 리액트 컴파일러의 역할과 기능
____15.5.4 리액트 컴파일러의 원리 및 동작 방식
____15.5.5 리액트 컴파일러의 수동 메모이제이션 대체 가능 여부
____15.5.6 리액트 컴파일러 사용해보기
학습 마무리 | 핵심 키워드 리마인드


16장 리액트 컨텍스트와 에러 바운더리, 그리고 서스펜스 돌아보기
__16.1 당신이 리액트 컨텍스트, 에러 바운더리, 서스펜스를 돌아봐야 하는 이유
__16.2 에러 바운더리 사용해 견고한 앱 만들기
____16.2.1 클래스 컴포넌트를 사용해 에러 바운더리 컴포넌트 만들어보기
____16.2.2 에러 전파 알아보기
____16.2.3 렌더링 에러와 에러 바운더리 작동 조건
__16.3 컨텍스트 API를 사용한 효과적인 상태 공유
____16.3.1 프롭스 드릴링이란?
____16.3.2 컨텍스트 생성하기
__16.4 컨텍스트 API의 유스케이스
____16.4.1 중간 컴포넌트 계층이 생기고 렌더 프롭스 패턴을 중첩으로 사용할 때
____16.4.2 컨텍스트 API 사용해 개선하기
__16.5 컨텍스트 API와 리렌더링
____16.5.1 컨텍스트 제공자의 value 프롭스 메모이제이션
____16.5.2 컨텍스트 분리해서 리렌더링 영향 범위 줄이기
____16.5.3 셀렉터 패턴 사용해 최적화하기
____16.5.4 고차 컴포넌트와 memo( ) 활용하기
__16.6 서스펜스 사용해 컴포넌트 내 비동기 작업 수행하기
____16.6.1 서스펜스의 역사와 발전
____16.6.2 에러 바운더리와 서스펜스
____16.6.3 서스펜스 내부 구현과 작동 원리
__16.7 use( ) 사용해 컨텍스트와 프로미스 읽기
____16.7.1 컨텍스트값 읽기
____16.7.2 프로미스 결과 풀어내기
____16.7.3 use( )는 어떻게 조건문 안에서 호출될 수 있을까?
학습 마무리 | 핵심 키워드 리마인드


17장 리액트 동시성 기능과 심화 훅 돌아보기
__17.1 당신이 리액트 동시성 기능과 심화 훅을 돌아봐야 하는 이유
__17.2 useLayoutEffect( )와 useInsertionEffect( ) 사용 사례
____17.2.1 useEffect( )와 useLayoutEffect( )의 차이점
____17.2.2 리액트 헬멧과 useInsertionEffect( )
____17.2.3 리액트 19버전의 메타 데이터와 스타일시트
__17.3 useImperativeHandle( )을 사용한 제어 역전
__17.4 동시성 기능과 트랜지션
____17.4.1 useTransition( ) 사용하여 우선순위 낮은 작업 선정하기
____17.4.2 useDeferredValue( ) 사용하여 지연된 상탯값 사용하기
____17.4.3 startTransition( )과 비동기 함수
__17.5 useSyncExternalStore( )를 사용한 외부 상태 동기화
____17.5.1 내부 상태와 외부 상태
____17.5.2 useSyncExternalStore( )과 티어링
학습 마무리 | 핵심 키워드 리마인드


[PART 4] 리액트를 둘러싸는 기술과 미래


18장 리액트 렌더링 패턴 돌아보기
__18.1 당신이 리액트 렌더링 패턴을 돌아봐야 하는 이유
__18.2 클라이언트 사이드 렌더링과 SSR 돌아보기
____18.2.1 클라이언트 사이드 렌더링 알아보기
____18.2.2 서버 사이드 렌더링 알아보기
____18.2.3 서버 사이드 렌더링의 동형성과 수화 과정
____18.2.4 번들 크기 분석과 next.config
__18.3 서버 사이드 렌더링을 위한 리액트 API
____18.3.1 renderToString( ) 알아보기
____18.3.2 renderToNodeStream( )과 스트리밍
____18.3.3 renderToPipeableStream( )과 스트리밍 렌더링
__18.4 정적 사이트 생성과 증분 정적 재생성 돌아보기
____18.4.1 Next.js 환경에서 정적 사이트 생성 사용해보기
____18.4.2 증분 정적 재생성 추가해보기
__18.5 리액트 서버 컴포넌트 알아보기
____18.5.1 서버 컴포넌트의 개념과 특징 알아보기
____18.5.2 클라이언트 컴포넌트란?
____18.5.3 리액트 서버 컴포넌트 규칙
학습 마무리 | 핵심 키워드 리마인드


19장 Next.js 앱 라우터와 서버 액션, 그리고 새로운 리액트 훅 돌아보기
__19.1 당신이 Next.js 앱 라우터와 서버 액션, 그리고 새로운 리액트 훅을 돌아봐야 하는 이유
__19.2 Next.js 앱 라우터 기본 사용법
____19.2.1 앱 라우터의 라우팅과 규칙
____19.2.2 특수 파일과 컴포넌트 계층 구조
____19.2.3 중첩 라우팅과 레이아웃
__19.3 정적 렌더링과 동적 렌더링, 캐싱
____19.3.1 동적 라우트에 대한 정적 렌더링과 동적 렌더링
____19.3.2 정적 라우트에 대한 동적 렌더링
____19.3.3 풀 라우트 캐시 알아보기
____19.3.4 라우터 캐시 알아보기
____19.3.5 요청 메모이제이션과 React.cache( )
____19.3.6 데이터 캐시와 fetch( )
____19.3.7 라우트 핸들러 사용해 클라이언트에게 API 제공하기
__19.4 서버 함수와 서버 액션 사용해보기
____19.4.1 서버 함수와 서버 액션 알아보기
____19.4.2 서버 액션 동작 원리
__19.5 액션과 함께 사용하는 리액트 19버전 훅
____19.5.1 액션과 서버 액션의 관계
____19.5.2 useActionState( )과 트랜지션 사용하기
____19.5.3 useOptimistic( )으로 낙관적 업데이트 구현하기
____19.5.4 useFormStatus( )로 폼 상태 확인하기
학습 마무리 | 핵심 키워드 리마인드