[서평] 안티프래질 프런트엔드

개요: 이 책에 관하여

• 총평
  지금의 나에겐 유용하고 꽤 맘에 드는 책이다. 좀 더 본질적인 차원의 지식을 다루며, 처음 접한 개념도 이해하고 기억할 수 있도록 적혀있기 때문. 추천 독자에 자신이 해당된다 생각한다면 읽어볼 것을 추천한다!
• 추천 독자
  원론적인 공부는 잠시 제쳐두고 일단 웹 개발을 하고 있는 주니어 프론트엔드 개발자 (중에서도 특히 성장을 위한 지식을 쌓고 싶다는 생각을 하고 있으면 더 추천!)
• 이 책의 좋은 점
  1. 다루는 주제: 본질적인 지식 (ex. 'useEffect'의 구체적인 사용법이 아니라, React가 해결하려는 '문제'가 무엇이고 '어떤 방법으로' 그 문제를 해결하고 있는지를 알려줌)
  2. 서술 방식: 중요한 개념은 설명 과정에서 정의를 여러 번 반복하여 서술함으로써 그 정의를 이해하고 머릿속에 넣게 도와줌
• 아쉬운 점
  화질이 안 좋아 글자 식별이 잘 안되는 이미지들이 좀 있었음 (내용을 바탕으로 유추 가능한 것이 대부분이긴 했다)
  

들어가며: 지식과 실력을 갖춘 엔지니어에 대한 갈망

AI가 놀라운 속도로 발전하고 일상에 침투하며, 내가 개발하는 방식도 바뀌었다.

처음 인턴으로 일하던 시절에는 프레임워크의 기본 메서드도 헷갈려서 선배들이 작업한 소스코드를 들추고 구글링하며 사용법을 익혔다. 그러다 깃허브 코파일럿을 사용하며 머릿속으로 어렴풋이 생각하던 '다음 코드'를 코파일럿이 추천해주면 '오..! 어떻게 알았지?' 하며 Tab 키를 눌러 적용하며 코드를 작성했다.

우리 개발팀은 그후 Windsurf를 꽤 오랜 기간 사용했는데, Cursor가 더 똑똑하다는 후기들이 자주 들려 병행하다 Cursor로 갈아탔다. 그러다 또 다음 시류에 몸을 맡기며 지금은 클로드코드를 사용 중이다. Cursor에서 클로드코드를 사용하다보니 코드 추천 기능이 체감상 일주일이면 끝이 나는데, 거진 3년을 그 기능을 사용하며 일해왔다보니, 자동 코드 추천 없이 코드를 짜는 게 막막했다.

단순하게는 변수명에 오타가 들어갈 수 있다는 것. 이 부분을 아예 신경쓰지 않고 편리하게 일하고 있었구나! 깨달았다. 크리티컬하게는 논리적인 로직을 구현하는 과정에 있어서, AI가 추천해준 로직을 거의 그대로 쓰고 있었나..?! 하는 충격적인 깨달음이 있었다. 자동 추천 기능을 빼앗긴(?) 경험은 주니어인 나에게 중요한 터닝포인트가 되었다. 사용하는 언어의 기본적인 문법을 잘 구사하고 적재적소에 메서드를 활용해 효율적으로 기능을 구현하는 능력을 길러야겠다,라는 목표가 아주 선명해졌다.

말하자면 나는 탄탄한 기본기를 갖춘 소프트웨어 엔지니어가 되고 싶어졌다.

언어와 프레임워크, 그리고 운영체제와 컴퓨터에 대한 지식을 바탕으로 문제를 해결하는 실력을 갖추고 싶다. 처음 공부하던 시절 구매했던 JavaScript Deep Dive를 다시 들춰보며 공부를 시작했고, 로직을 짤 때도 AI 의존도를 이전보다 줄이고자 노력했다.

그러던 중 김상철, 『안티프래질 프런트엔드』 (비제이퍼블릭, 2025)라는 책을 어디선가 접했고, 나중에 읽어봐야지 하고 있었다. 그런데 운명적으로(?) 며칠 뒤 해당 도서의 서평단 모집 이벤트를 알게 되어 냅다 신청했고, 감사하게도 이렇게 읽어볼 수 있게 되었다. ☺️

책 맛보기

이 책의 큰 목차들은 다음과 같다.

• 변하는 것과 변하지 않는 것 (안티프래질에 대해 이야기한다.)
• 브라우저 ('브라우저'의 개념과 화면 렌더링 과정을 구체적으로 다룬다.)
• 리액트
• Next.js
• 인프라 구조

각 챕터에서는 대주제를 구체적으로 다루며, 아마도 의도적으로 반복적으로 언급한다. 비슷하지만 다른 표현 또는 같은 표현으로, 설명을 덧붙이며 반복적으로 설명하기에, 읽을수록 개념이 정립된다. 이 점이 나는 굉장히 마음에 들었고 감사했다.

안티프래질

이 책의 치명적인 약점은, 제목을 보고 책을 읽기 시작하면 머릿속에서 ANTIFRAGILE 노래가 재생된다는 점이다..

책 제목의 '안티프래질'은 '충격을 가하면 오히려 단단해진다'는 의미를 갖는다. 이 얼마나 멋진 단어인가.. 처음엔 음 그렇구나 정도로 받아들였는데, 책을 반 이상 읽은 지금은 이 단어의 의미가 더 크게 와닿는다.

내가 이해한 식으로 말해보자면,
많은 변화를 거치면서도 살아남은 개념들을 잘 알아두면, 새로운 충격적인 변화가 나타났을 때 그 기본 지식들을 바탕으로 더 잘 이해하고 응용하는 능력을 갖출 수 있다는 의미로 해석된다.

프론트엔드 생태계는 원래도 새로운 기술이 빠르게 등장하고 사라지는 필드였는데, AI의 등장으로 이제는 프론트엔드 분야에만 한정할 것이 아니라 매일 사용하는 IDE, 개발 에이전트도 새로운 것이 출시되고 자주 업데이트된다. 앞서 이야기했듯 개발 자체에서 AI의 도움을 많이 받고 있었기에, 이 도구들을 어떻게 현명하게 활용할 것인가에 좀 더 관심이 있었던 것 같다. 그런데 이 책을 읽으며, 그런 도구를 잘 활용하는 방법론도 중요하지만, 근본적인 지식을 갖추는 게 더 시급함을 느꼈다.

이 책에선 다음과 같은 지식을 얻을 수 있다.

• 사용자가 url을 입력하면 어떤 일이 벌어져 우리 웹페이지에 접속할 수 있는 것인지
• 내가 개발한 소스코드를 사용자에게 제공하는 브라우저, 이 브라우저는 어떤 과정을 통해 코드를 웹의 형태로 바꿔주는 것인지
• 리액트가 정확히 어떤 기능까지를 포함하며, 어떤 문제를 풀기 위해 등장한 것인지

몰라도 웹 개발을 할 수 있으나, 좋은 개발자가 되기 위해 반드시 알아야 할 것들. (위에 나열한 것 외에도 Next.js, 인프라에 대한 내용도 다룬다!!) 저 과정들을 알아야 무언가 문제가 발생했을 때 그 원인을 더 정확히 파악하고, 개선 방법을 도출할 수 있을 것이다.

어렴풋이 알던 개념들과 몰랐던 개념들이 함께 있었는데, 머릿속에서 개념들이 잘 정리되고 맞추어지는 느낌이었다. 한번에 다 흡수하진 못했으니 반복해서 읽어야 정말 내것이 되겠지만!

책을 읽은 후에 이어지는 과제들

읽으면서 추가로 조사해보고 싶은 주제들도 많았다. 정말 많은 페이지에 인덱스를 붙이고 메모하며 읽었다. 그중 두가지만 대표적으로 말해보자면 다음과 같다.

번들러 등 리액트가 아닌 것

예를 들어 '리액트와 리액트가 아닌 것' 챕터에서 번들러에 대한 설명이 짧게 나오는데, 웹팩, 롤업 같은 게 번들러였다. 부끄럽지만 나는 이것들의 이름만 들어봤지 정확히 어떤 역할을 하는지도 모른채 개발을 하고 있었다. 리액트 프로젝트를 셋업하면, 리액트로 웹을 개발하고 배포하는 과정을 편하게 하기 위해 번들러를 포함한 다양한 기능들이 이미 세팅되어 있다. 리액트와 그밖의 어떤 것들이 모여 웹 개발을 가능하게 해주는 건지 관심을 갖지 않았었는데, 이 챕터를 계기로 리액트 외의 것들도 알아봐야겠단 생각을 했다.

리액트의 철학, 공식문서

웹 개발할 땐 리액트, 앱 개발할 땐 리액트 네이티브를 쓴다는 사실만 알고, 각 프레임워크로 어떻게 개발하는지에 관심을 갖고 있었는데, '리액트 네이티브'가 왜 '리액트 네이티브'인지도 이 책 덕분에 알았다. iOS, Android 같은 '네이티브'에서 UI를 그리는 리액트 프레임워크였기 때문이다..

리액트 공식 문서의 "웹 및 네이티브 사용자 인터페이스를 위한 라이브러리"라는 설명도 드디어 이해했고, 리액트가 UI 라이브러리였음을 알았다. 이것도 모르고 매일 리액트를 쓰고 있었다니..

앞으로의 공부 계획

그래서 이 책을 활용해 앞으로 어떻게 할 것이냐면, 우선 책에서 다룬 핵심 주제를 설명할 수 있을 정도로 머릿속에 넣고 싶다. 읽으면서 주제 정리하는 챕터가 나오면 잠시 덮고 한번 먼저 말로 설명해보기도 했는데, 분명 이해한 것 같았는데 떠오르지 않거나 설명히 막혔기 때문이다.

그리고 남겨둔 인덱스와 메모를 다시 보며 추가로 조사/정리하고 싶었던 내용을 짚어보면 좋겠다. 목표를 세웠음에도 지속적으로 실천하는 게 참 어렵지만.. 나를 위해 해냈으면 좋겠다. 화이팅..!

끝으로 이런 양질의 도서를 읽을 기회를 제공해주신 @비제이퍼블릭 출판사에 감사드린다. 책을 잘 써주신 @김상철 개발자님에게도 깊은 감사를 드린다.