[책 리뷰] 대규모 리액트 웹 앱 개발

프론트엔드 작업을 하면서 가장 스트레스 받는 것은 개발하면 할 수록 점점 누더기 같아지는 프로젝트 구조인 것 같습니다. 특히, 남이 작업하던 프로젝트를 받아서 하면, 어느새 어디서 중복되고 있는지도 모르겠는 코드들과 너덜너덜해진  css 속에서 허우적대는 기분입니다.

 

투두리스트를 만들 때만 해도 행복했던 나...하지만 점점 규모가 큰 프로젝트를 하게 되면서 구조가 엉망이 되는 경험을 너무 많이 하게 되었습니다. 처음에는 분명 작은 컴포넌트 몇개로 시작했는데, 기능이 추가될수록 코드가 뒤엉키는게 온 몸으로 느껴집니다. 유지보수가 어려워지고, 새 기능을 추가하려면 어디부터 건드려야하는지 감이 잡히지 않는 상황도 발생합니다.

 

특히 여려명이 협업하는 프로젝트에서는 코드 스타일도 다르고, 컴포넌트 재사용성도 낮아 중복 코드가 늘어납니다. 전전전전전임자가 개발하던 코드라 아무도 정체를 모르지만 수정도 못하는 상황...도 겪고. CSS 관리도 어려워지고, 상태관리도 꼬이고, 분명 작고 귀여웠던 내 프로젝트는 어느 순간부터 꼬일대로 꼬인 스파게티 괴물이 되어버립니다🍝

 

이런 경험을 해보니, "대규모 리액트 웹 앱 개발"이라는 제목은 너무 매력적이게 느껴졌습니다. "리액트를 쓸 줄 안다"에 그치지 않고, 구조적으로 잘 짜인, 이쁜 프로젝트를 만들 수 있는 사람이 되고 싶었습니다. 제대로 된 프로젝트 구조 설계와 유지 방법을 배울 수 있지 않을까 기대감이 들었습니다. 그리고 책을 펼치자마자 이 책은 찐이다를 강렬하게 느꼈습니다.

 

 

본 서평은 제이펍에서 책을 제공받아 작성되었습니다.

 

---

책의 매력 포인트

• 귀엽고 멋있는 공룡 표지🦖
• 책 펼치자마자 느껴지는 종이 냄새

---

 

🧑‍💻저자

애디 오스마니(Addy Osmani)

https://addyosmani.com/

AddyOsmani.com

저서

• Building large-scale web apps
• JS Patterns: 2nd Edition(자바스크립트 + 리액트 디자인 패턴)
• Learning Patterns
• Success at Scale
• Effective Eng. Teams
• Backbone Applications
• 등등

Google Chrome Web Browser 소속 20년차 이상 개발자분이시라고 합니다. 유명한 책도 많이 쓰셨고, 믿고 볼 수 있는 책!

 

 

💡개요

책의 주요 목차는 다음과 같습니다.

목차

1. 시작하며
2. 소프트웨어 복잡성 관리하기
3. 모듈성
4. 성능
5. 디자인 시스템
6. 데이터 가져오기
7. 상태관리
8. 국제화
9. 코드 조직화하기
10. 개인화와 A/B 테스팅
11. 확장 가능한 웹 아키텍처
12. 테스팅
13. 툴링
14. 기술적 마이그레이션
15. 타입스크립트
16. 라우팅
17. 사용자 중심 API 디자인
18. 리액트의 미래
19. 맺음말

 

🧐내용

우리는 통찰력과 방법론을 제공하며, 여러분은 이를 활용해 각자의 구체적인 니즈와 콘텍스트에 가장 적합한 도구 혹은 라이브러리가 무엇인지 평가하고 선택할 수 있을 것이다.

처방적 접근법이 아닌 설명적 접근법을 취합니다. 이게 정답이다!가 아니라 이렇게 생각해라! 느낌. 특정 기술을 정해진대로 잘쓰는 방법을 배우는게 아니라, 주어진 상황에서 최적의 결정을 내릴 수 있도록 사고의 틀을 제공하는 것이 핵심입니다.

 

"대규모 웹 애플리케이션" 개발 및 유지보수에 필요한 기술들과 방법론들을 다루며 코드 베이스는 리액트입니다. 특정 도구에 대한 정답이 아니라곤 하지만, 리액트 공부하기 좋은 구성입니다.  대규모 웹 애플리케이션이란 무엇인가로 시작해, 복잡성 관리에 대한 고찰을 다루고, 디자인 시스템, 상태관리, A/B 테스팅, 테스팅 등으로 전개됩니다. 프론트엔드 개발에 도움이 되는 내용들을 포괄적으로 다루고 있습니다.

 

가장 인상깊었던 챕터는 chapter 9. 코드 조직화하기였습니다. 폴더와 파일 구조를 다루는데, 가장 고민이었던 부분이라 집중해서 읽을 수 있었던 것 같습니다. 프로젝트 구조를 어떻게 설계해야 하는지 명확한 가이드를 제공해주었고, 기존에 가지고 있던 고민들을 해소할 수 있어 큰 도움이 되었습니다.

 

🦣각주

각주가 엄청 많습니다. 개념을 설명할 때, a to z까지 하나하나 설명하는 대신, 핵심만 간략히 다루고 추가적인 탐색은 독자에게 맡기는 방식인 것 같습니다. 설명이 친절해서 책만 읽어도 어느정도 이해할 수 있고, 더 깊이 알고 싶다면 각주를 따라가면 됩니다.

 

각주에 포함된 자료들이 유명한 아티클이나 논문 등 신뢰할 수 있는 글들이어서, 하나만 읽어도 큰 도움이 될 것 같습니다. 궁금한 점이 생길 때마다 검증된 자료를 바로 참고할 수 있고, 깊이 있는 학습을 유도한다는 점이 큰 장점입니다.

타르 웅덩이 밖으로~🌊

https://github.com/papers-we-love/papers-we-love/blob/main/design/out-of-the-tar-pit.pdf

papers-we-love/design/out-of-the-tar-pit.pdf at main · papers-we-love/papers-we-love

 

⭐프론트엔드 개발자 레벨업 필독서

부푼 마음을 안고 책을 펼쳤지만, "시작하며"부터 압도당했습니다. 첫 장만 읽어도 이 책이 단순한 기술서가 아닌, 깊이 있는 전문서라는 걸 바로 느낄 수 있었습니다. 한 챕터를 이해하기 위해 두 번, 세 번식 정독해야 했을 정도로 쉽지 않았습니다.

 

하지만 그만큼 내용이 깊고, 본질적인 고민을 담고 있어 읽을수록 개발에 대한 시야가 넓어지는 느낌이었습니다. 리액트를 잘 쓰는 법, 복잡성을 관리하는 관점을 배우는 데 큰 도움이 되는 책이라고 생각합니다.

 

기술 가이드를 넘어 개발 철학서에 가깝다고 느껴질 정도로 깊이 있는 내용이었고, 프론트엔드, 개발 전반에 대한 이해도를 높이고 싶은 분들이라면 이 책에서 많은 인사이트를 얻을 수 있을 것 같습니다. 경험과 배경지식이 많을수록 더 깊은 통찰을 얻을 수 있을 것 같습니당.

🔥🔥🔥

❤️추천 대상

✅ 리액트를 많이 다뤄본 경험자

✅ 프로젝트 관리에 어려움을 느껴본 개발자