안티프래질 프런트엔드

1 변하는 것과 변하지 않는 것
_1.1 프래질과 안티프래질
__1.1.1 복잡계 이야기
__1.1.2 올리브 압착기 이야기
_1.2 프런트엔드 개발 생태계와 안티프래질
_1.3 안티프래질한 옵션
__1.3.1 오래 살아남은 것들은 안티프래질하다
__1.3.2 내가 학습한 것들은 변화로 인해 이익을 얻는가

2 브라우저
_2.1 브라우저를 구성하는 요소들
__2.1.1 브라우저의 기본적인 아키텍처
__2.1.2 크롬과 크로미엄은 뭐가 다를까?
__2.1.3 브라우저가 지켜야 하는 여러 규칙
__2.1.4 브라우저의 멀티 프로세스 아키텍처
_2.2 브라우저가 화면을 렌더링하는 과정
__2.2.1 도메인 주소에서 웹 서버 주소 알아내기
__2.2.2 보안을 향상하는 시큐어 커넥션 맺기
__2.2.3 HTML 웹 페이지 요청하기
__2.2.4 HTML 파싱 및 DOM 트리 구축
__2.2.5 CSS 파싱 및 CSSOM 트리 구축
__2.2.6 렌더 트리 구성
__2.2.7 레이아웃 계산
__2.2.8 페인트
__2.2.9 픽셀화&컴포지션
_2.3 브라우저가 렌더링을 효율적으로 하려면
__2.3.1 레이어 분리
__2.3.2 자바스크립트 효율적으로 처리하기
__2.3.3 요청 묶어서 처리하기
_여정 돌아보기

3 리액트
_3.1 리액트와 리액트가 아닌 것
__3.1.1 리액트는 번들러가 아니다
__3.1.2 리액트는 스타일링 도구가 아니다
__3.1.3 리액트는 서버가 아니다
__3.1.4 리액트는 검색 엔진 최적화 도구가 아니다
__3.1.5 리액트는 그래픽이나 3D 렌더링에 최적화된 도구가 아니다
__3.1.6 리액트는 UI를 위한 웹과 네이티브 라이브러리이다
_3.2 리액트의 동작 원리
__3.2.1 전체적인 그림
__3.2.2 가상 돔
__3.2.3 리액트라는 거대한 생태계
__3.2.4 리액트 렌더링 작업과 스케줄링
__3.2.5 리액트의 척추, 파이버 아키텍처
_여정 돌아보기

4 Next.js
_4.1 라이브러리와 프레임워크의 차이
__4.1.1 라이브러리
__4.1.2 프레임워크
__4.1.3 프레임워크로서의 Next.js
_4.2 검색 엔진 최적화와 서버 사이드 렌더링
__4.2.1 검색 엔진의 동작 방식
__4.2.2 서버 사이드 렌더링이란
__4.2.3 서버 사이드 렌더링의 동작 방식
_4.3 Next.js가 해결하는 문제
__4.3.1 이미지를 최적화하는 next/image
__4.3.2 폰트를 최적화하는 next/font
_여정 돌아보기

5 인프라 구조
_5.1 서비스가 지구 반대편에서도 잘 동작하려면
__5.1.1 나와 내 지인에게 필요한 서비스 제공하기
__5.1.2 대한민국의 전 국민이 사용하는 서비스 제공하기
__5.1.3 베트남에서도 사용하는 글로벌 서비스 제공하기
_5.2 마이크로서비스 아키텍처
__5.2.1 마이크로서비스 아키텍처란 무엇인가
__5.2.2 클라우드 네이티브 컴퓨팅 파운데이션
__5.2.3 컨테이너 오케스트레이션
__5.2.4 서비스 메시
__5.2.5 서비스 모니터링
__5.2.6 API 게이트웨이
_여정 돌아보기