[데보션 영 3기] 모던 리액트 Deep Dive 도서 스터디 후기

안녕하세요. 데보션 영 3기 여행가조✈️ 박성철입니다!

 

데보션 영의 활동으로 진행한 도서 스터디!

7월부터 9월말까지 3달에 걸친 그 대장정에 대한 후기를 작성해보려 합니다.

 

우선 스터디 도서를 신청 받았었는데 운이 좋게 제가 제안안 모던 리액트 Deep Dive가 채택이 되어서 저를 제외한 3명의 데보션 영 구성원과 함께 스터디를 진행했습니다.

 

저희 팀의 스터디 방식은 다음과 같았습니다.

1. 스터디는 일요일 격주로 오후 3시에 SKT 타워에서 진행 (오프라인)

2. 스터디 전에 노션에 챕터별 내용 정리

3. 2명씩 돌아가면서 발표 및 내용 깃허브에 정리

일단 책이 매우 두껍고 내용도 정말 방대하기 때문에 서로에 대한 동기부여가 필요했기에 발표에 대한 약간의 강제성을 가지고 진행을 했더니 다행히 모두 열정적으로 임해주어 무사히 완주할 수 있었습니다!

(내용이 진짜 개개개많아서 사실 1회독 하긴 했는데 앞에 내용 다시 봐야되는...ㅎㅎ)

 

01장: 리액트 개발을 위해 꼭 알아야 할 자바스크립트

1장은 자바스크립트 핵심에 대한 내용을 다뤘습니다.

 

자바스크립트의 자료형, 메소드 등에 대해서 다뤄보는 챕터였는데 아무래도 책 뒤에 나오는 웬만한 자바스크립트 문법을 커버치기 때문에 양이 상당히 많았습니다....

(이 때 발표 담당이 저였는데 진짜 양 보고 깜짝 놀랐다는...)

 

기존에 알고 있던 개념들도 많았지만 배열 또는 객체의 내장 메소드들의 작동원리까지 설명해주어 놓치고 사용했던 부분들에 대해서 점검해볼 수 있었고, symbol과 같이 많이 접하지 못한 내용에 대해서도 공부해볼 수 있는 계기가 되었던 챕터였다.

 

02장: 리액트 핵심 요소 깊게 살펴보기

2장은 제목 그대로 리액트의 기반이 되는 핵심 요소들을 뜯어보는 챕터였습니다.

 

여기서부터 조금씩 헤데이크가 오기 시작한다. 사실 리액트를 사용해본 개발자 중에 리액트의 내부 구조까지 살펴본 사람은 몇이나 될까?

제가 그렇지 못한 사람이었기에 정말 배울게 많았던 챕터였습니다.

 

리액트 렌더링 원리에 대해서는 볼 때마다 헷갈렸던 것 같습니다. 브라우저의 렌더링 과정과 함께 리액트에서 컴포넌트를 업데이트하는 원리에 대해서 스터디원들과 정리해가면서 지금은 그나마 조금 이해도가 올라간 것 같습니다.

그럼에도 아직 완벽히 이해한 것이 아니기에 다시 꼭 봐야지...

 

그 뿐만 아니라 react fiber, reconcilation 등 익숙하지 않은 키워드들이 등장했는데 사실 처음 봐서 그런지 '이런게 있구나'하고 넘어갔던 것 같습니다. 개인적으로 이런 내부 원리가 가장 어려운 것 같습니다.

03장: 리액트 훅 깊게 살펴보기

3장은 리액트에서 중요한 개념 중 하나인 hook에 대해 자세한 소개가 나와 있는 챕터였습니다.

자주 쓰는 hook부터 생전 한 번도 사용해 본 적 없는 이름조차 생소한 hook들까지 어떤 기능을 하고, 어떻게 사용하는지 자세히 설명되어 있었습니다. 그래도 조금 익숙한 내용들도 있었어서 흥미롭게 배웠던 챕터였습니다.

 

최근에 기술면접에서 리액트 훅에 대한 질문을 받았는데 이 때 배웠던 지식이 진짜 많은 도움이 됐습니다ㅠㅠ

04장: 서버 사이드 렌더링

4장은 제목 그대로 서버 사이드 렌더링(SSR), 그리고 Next.js에 대한 내용이 담겨 있었습니다.

CSR과 SSR, SPA에 대한 내용이 주가 되는데 특히 SSR에 대해서 뒤에 나오는 React의 서버 컴포넌트와 아주 헷갈려서 스터디원들이랑 화이트 보드에 그림 그려가며 열띤 토론을 했었네요.

 

어쨌든 프론트엔드에서 가장 화두가 되고 있는 주제이기에 이 부분도 꼭 다시 챙겨봐야겠습니다.

05장: 리액트와 상태 관리 라이브러리

5장에서는 상태 관리를 왜 해야 하는지, 상태 관리는 어떤 식으로 발전되어 왔는지, 그리고 상태 관리를 위한 도구들을 어떤 것들이 있는지 알아보는 챕터였습니다.

 

이 부분은 제가 발표를 맡았었는데 개인적으로 가장 재밌었던 챕터였습니다. 아무래도 공돌이라 그런지 이것저것 만져보면서 직접 해보는 게 확실히 재밌었던 것 같습니다. 책에는 recoil, zustand, zotai에 대해서 설명이 나왔는데 zotai는 책을 공부하면서 처음 써봤던 라이브러리라 서로 차이점을 비교해보면서 재밌게 설명했던 챕터였네요ㅎㅎ

06장: 리액트 개발 도구로 디버깅하기

'리액트 개발 도구'란 무엇이며, 어떻게 활용해야 하는지에 대한 내용이었습니다.

컴포넌트와 프로파일러 탭에서 각각 어떤 내용을 제공하는지에 대한 설명이 나와 있었는데 이 부분은 책으로만 보기보다는 실제로 이런저런 웹사이트에서 많이 적용시켜보면서 어떻게 툴을 잘 활용할지 고민이 많이 필요했던 부분이라고 생각합니다.

07장: 크롬 개발자 도구를 활용한 애플리케이션 분석

크롬 개발자 도구의 각 탭에 어떤 내용이 담겨 있고, 그러한 내용들을 어떤 방식으로 해석해야 하는지에 대한 내용이었습니다.

크롬 개발자 도구에서 보통 요소, 콘솔, 네트워크, 애플리케이션 정도 많이 썼던 거 같은데 제가 알고 있는 것은 새발의 피도 아니라 새발에 붙어있는 바이러스의 피 정도 될 것 같습니다. 크롬이 가진 힘에 대해서 정말 여실히 느꼈던 챕터였습니다.

특별히 Next.js 환경을 어떻게 디버깅 해야 할지에 대한 내용도 담겨 있어서 좋았습니다. 

08장: 좋은 리액트 코드 작성을 위한 환경 구축하기

8장은 쉽게 말해 '테스트'에 관한 장이었다. ESLint를 활용한 정적 코드 분석과 테스팅 라이브러리를 활용한 테스트 방법에 대해 대략적인 소개를 하는 챕터였습니다. 이론적인 내용들이 이어지고 이것을 활용하는 패키지들에 대해서 설명하니 되게 신기했고 한국의 트리플에서 만든 라이브러리도 소개해서 되게 신기했습니다.

09장: 모던 리액트 개발 도구로 개발 및 배포 환경 구축하기

리액트 애플리케이션을 배포, 도커라이즈 하는 방법에 대한 내용이 나와 있는 장이었습니다. 도커에 대한 내용이 특히 깊게 나와 있어서 다들 많이 어려워 했던 챕터였던 것 같습니다. 이 때 제가 마침 인턴하면서 도커에 대해서 맛을 보고 있었는데 제가 회사에서 배웠던 아주 얄팍한 지식을 활용하여 스터디원들과 함께 공유해서 되게 기억에 남는 장이었습니다. 하지만 아직도 도커는 별로 안 친해졌네요ㅠㅠ

10장: 리액트 17과 18의 변경 사항 살펴보기

이 챕터 진도를 나가고 있을 때 이미 리액트 19 버전이 experimental로 나왔었습니다.

하지만 리액트 17, 18의 대격변이 말도 안되게 크게 일어났기 때문에 어떤 차이점이 있고 앞으로 리액트 팀이 어떤 방향성을 가지고 업데이트를 해나가는지 살짝은 이해할 수 있었던 그런 챕터였습니다.

 

단순히 리액트에 있는 내가 모르는 기능들을 배우는 것을 넘어, 새로운 기능이 어떤 배경에서 나왔는지를 알아야 해당 기능을 적절한 용도로 사용할 수 있다는 점을 새롭게 깨닫게 해주는 챕터였습니다.

11장: Next.js 13과 리액트 18

11장은 제목 그대로 Next.js 13과 리액트 18 버전에 대한 내용이었습니다.

리액트 18에서 처음 등장한 리액트 서버 컴포넌트와 Next.js가 제공하는 SSR에 대해 비교·분석하는 내용을 주로 다루고 있는데, 이 때 스터디원들끼리 다시 CSR 복기해보고 SSR이랑 서버 컴포넌트가 어떻게 다른지 이해하는데 애를 좀 먹었던 기억이 나네요ㅎㅎ

12장: 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표

웹 사이트에서의 '성능'과 구글에서 요약한 핵심 웹 지표인 Core Web Vital의 각 항목에 대해 자세히 알아보는 장이었슷비낟.

핵심 웹 지표인 LCP, FID, CLS와 핵심까지는 아니지만 특정 문제를 진단할 때 사용하는 유용한 지표인 TTFB, FCP에 대한 설명이 나와있었습니다. 지표에 대한 용어와 좀 친해지는 그러한 챕터였습니다.

13장: 웹페이지의 성능을 측정하는 다양한 방법

12장에 이어 웹 페이지의 '성능'에 대한 내용이었고, 성능을 측정하기 위해 사용할 수 있는 여러 가지 방법이나 사이트를 소개하는 장이었습니다. 구글 라이트하우스와 같은 다양한 툴에 대해서 다루면서 이런 게 있구나 하면서 되게 신기했던 챕터였습니다.

프론트엔드의 세계는 어디까지인가...

14장: 웹사이트 보안을 위한 리액트와 웹페이지 보안 이슈

다같이 어려워 했던 보안 관련 챕터였습니다. 웹페이지에서의 보안 이슈에는 어떤 것들이 있고, 어떤 방법으로 해결할 수 있는지에 대한 내용이 나와있는데 아무래도 보안에 대해서 다들 지식이 없어서 이 챕터에 대해서는 깊게 이해해서 얘기를 나눠보지 못했던 것이 개인적으로는 좀 아쉬웠던 것 같습니다.

15장: 마치며

리액트 프로젝트를 시작할 때 고려해야 하는 사항과 향후 프론트엔드 트렌드 속에서 리액트는 어떻게 변화할지에 대한 내용이었습니다.

이 장에서는 특히 지금까지 배운 내용을 점검해 볼 수 있는 문제들이 존재했는데 스터디원분들과 같이 풀어보는 시간을 가졌네요ㅎㅎ

 

---

 

이렇게 해서 952페이지에 달하는 모던 리액트 Deep Dive 책을 완독했습니다.

 

3달 동안 격주로 일요일 3시에 항상 모여서 스터디원들 모두 열심히 참여해준 덕분에 정말 중간에 아무런 난관 없이 무사히 스터디가 마무리되었습니다. 진짜 열정 있는 스터디원들이 딱 모여서 한 번의 갈등 없이 마무리할 수 있었던 게 너무 신기하고 뿌듯하네요ㅎㅎ

 

스터디 내용을 깃헙에 정리하는 걸 저는 이 스터디에서 처음 해보았는데 다들 PR 날리고 저도 마크다운에 대해서 점점 익숙해지면서 되게 효율적인 방법이라고 생각이 들었습니다. 다음에 또 개발 내용에 대한 스터디를 하면 깃헙을 잘 활용해본 것을 적극 고려해봐야겠습니다!

 

정말 긴 책이기에 사실 1회독 하는 걸로 이 책을 다 이해하는 건 불가능에 가깝습니다. 그럼에도 이 책은 제가 기술 면접을 준비할 때 또는 면접 본 후에 복기하면서 다시 내용을 찾아보는 사전과 같은 책이었습니다. 

 

이 책은 꼭 다시 한 번 (혼자서라도) 2회독, 3회독 해봐야될 것 같습니다!!