안티프래질 프런트엔드

브라우저, 리액트, Next.js, 인프라로 그려내는 모던 웹 로드맵

김상철 지음

비제이퍼블릭 2025년 09월 26일 출간 국내도서 : 2025년 09월 26일 출간

작품소개

책소개

안티프래질(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 게이트웨이
_여정 돌아보기

출판사 서평

세련된 방법론까지 한눈에 다잡는 모던 웹 로드맵

리액트, 뷰, 앵귤러, 스벨트로 구축한 웹 페이지는 구글 검색 결과 노출이 어렵고 사이즈가 커서 첫 페이지 로딩 시간이 걸린다는 문제가 있습니다. 이에 SSR 방식이 다시 유행하게 되며 SSR 방식을 도울 수 있는 Next, Nuxt, Remix, SvelteKit 등이 탄생하게 되었고 그 이후에도 어느 정도의 시간이 흘렀습니다. 이제는 자바스크립트만으로도 서버와 백엔드까지 섭렵할 수 있습니다. 따라서 웹 페이지를 제작하는 것만으로는 경쟁력 있다고 말할 수 없습니다. 단순하게 유행을 따르는 것이 아닌 개발 생태계의 흐름을 관통하고 관장해야 합니다.

2024년 세종도서 학술부문 선정도서인 『레벨업 리액트 프로그래밍 with Next.js』가 웹과 프레임워크에 관해 마치 백과사전처럼 역사부터 시작하여 차트 중심 대시보드, AI 챗봇을 통합하는 웹앱, 전자 상거래 사이트를 한 단계씩 직접 제작하는 방식까지 샅샅이 파헤쳤다면, 이번 신간 『안티프래질 프런트엔드』는 개발 생태계의 블루프린트를 이미지화하여 머릿속에 각인시켜 줍니다. 프런트엔드 개발 생태계와 안티프래질의 연관성 그리고 ‘어떠한 변화에도 더욱 단단해지는 기술’에 관해 문제 해결과 지속가능성을 기준으로 논리적으로 살펴봅니다. 서비스를 전반적으로 관리 감독하고 필요에 따라 구조를 변경하거나 규모를 확장시킬 수 있도록 이 책과 함께 기반과 큰 틀을 다잡아봅시다.


이 책이 필요한 독자
- 웹과 리액트, Next.js의 흐름을 관통하고 싶은 분
- 기본을 탄탄히 하고 싶은 주니어 개발자
- 올바른 근거로 신기술을 도입하고 싶은 개발자
- 지속가능성과 안티프래질을 자신만의 개발 비결로 삼고 싶은 분
- 다시 돌아온 SSR 방식에 대해 정확하게 직면하고 싶은 분
- 성능 관리, 안정성 점검, 장애 대응 등 유지보수 기술까지 논리적으로 파악하고 싶은 분

인물정보

저자(글) 김상철

아름다운 제품을 만들어 세상에 내놓고 싶은 엔지니어이자 기업가.
서울대학교에서 컴퓨터공학을 전공했고, 더플레이토를 창업하여 많은 사람이 새로운 기술의 혜택을 누릴 수 있도록 제품을 빚어가고 있습니다.

더플레이토 theplato.io
블로그 blog.yeoul.io
링크드인 linkedin.com/in/sckimynwa