홈앤서비스 SK BROADBAND

안티프래질(antifragile)은 『블랙 스완』의 저자 나심 니콜라스 탈레브(Nassim Nicholas Taleb)가 또 다른 저서의 제목으로 삼으며 새롭게 제시한 용어입니다. 충격을 가하면 부서지기 쉬운이라는 뜻의 프래질(fragile)에 anti-라는 접두어를 붙여 충격을 가하면 더욱 단단해지는이라는 개념이 탄생하였습니다.

그렇다면 프런트엔드 개발 생태계와 안티프래질은 어떤 연관이 있을까요?

그 언제보다도 변화가 빠르고 불확실성이 높은 AI 시대가 도래했습니다. 그리고 렌더링 라이브러리, 테스트 도구, 통합 프레임워크 등 수많은 카테고리에서 계속해서 새로운 기술이 등장했다가 사라지고 있습니다. 하지만 웹 페이지는 리액트가 사라진다 할지라도 여전히 사용자에게 제공되어야 합니다.

따라서 지금은 하나의 기술을 깊게 파기보다는 나만의 방법론을 체화해야 할 시기입니다. 도구가 무엇을 문제로 정의했고 어떤 방식으로 문제를 해결하고 있는지를 이해하는 것이 중요합니다. 리액트와 리액트가 아닌 것, 리액트 기반 프레임워크 Next.js의 동작 원리, Next.js가 해결하는 문제 등 브라우저부터 인프라까지 서비스를 구성하는 요소들을 『안티프래질 프런트엔드』를 통해 살펴보며 어떤 환경에 놓이든 적응할 수 있는 핵심을 관철하기를 바랍니다.

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 게이트웨이
_여정 돌아보기