DEVOCEAN

길고 긴 모던 리액트 Deep Dive 스터디가 끝이 났다! 처음 격주로 진행할 때는 이 두꺼운 책을 과연 다 끝낼 수 있을까 싶었는데 막상 또 끝나니까 너무 아쉬운 마음이 드는 것 같다 😂

정말 좋은 분들과 함께할 수 있었고 많이 배워갈 수 있었던 스터디였다! 이번 글에서는 도서 스터디 후기를 짧게 남겨보려고 한다 😀

✅ 모던 리액트 Deep Dive

모던 리액트 Deep Dive 구매 링크

모던 리액트 Deep Dive는 김용찬님이 출판하신, 리액트를 잘 쓰기 위해 필요한 핵심적인 지식들을 정리한 책이다.

무려 952페이지(...)였지만 완독하고 나서 보면 뭐 하나 뺄 게 없을 정도로 정말 알찬 내용이다.

읽어 본 사람이라면 다들 알겠지만 리액트를 입문하는 사람보다는, 리액트를 어느 정도 사용해 본 경험이 있는 사람들이 읽기에 적합하다.

나는 React를 사용한지 2년 정도 되었는데도 새롭게 알거나 어렵게 느껴지는 개념들이 꽤 있었던 것 같다🤣

그래도 엄청 심화적인 내용이라기보다는 최대한 이해하기 쉽게 적혀 있는 느낌이라서 읽고 습득하는 데 어려움은 없었던 것 같다!

✅ 스터디 진행 방식

우리 스터디의 진행 방식은 다음과 같다.

✔️ 기본 방식

• 기간 : 2주에 한 번

• 방식 : 오프라인

• 장소 : SKT타워

• 2명씩 돌아가면서 각자 맡은 파트를 발표하는 방식

✔️ Notion

• 격주 스터디 전날까지 스터디원 전원이 이번 파트를 공부하고 정리한 문서 업로드

✔️ GitHub

모던 리액트 Deep Dive 스터디 GitHub

• 스터디가 끝나면 해당 주에 발표를 맡은 팀원이 정리해서 GitHub 레포에 업로드

✔️ 스터디 시간

• 스터디는 단순하게 해당 파트를 맡은 팀원이 발표를 하고, 서로 궁금했던 점이나 의견을 나누는 식으로 진행된다!

• 스터디 내용은 단순히 책의 내용뿐만 아니라, 책을 읽으면서 추가적으로 찾아본 정보나 최신 트렌드도 함께 넣어서 구성되었다 😀

✅ 각 챕터 요약

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

1장은 자바스크립트 핵심에 대한 내용을 다룬다. 양이 어마어마하게 많아서 모던 리액트를 처음 시작하는 데 조금 장벽이었던 것 같다(ㅋㅋ) 1, 2장부터 진이 쭉 빠졌다 💀

하지만 자바스크립트 챕터의 분량이 이렇게 많다는 것은, 그만큼 리액트를 사용하는 데, 프론트엔드를 개발하는 데 꼭 필요한 자바스크립트 지식이 이렇게나 많다는 사실을 증명하는 증거이기도 했다.

클로저나 이벤트 루프, 호이스팅 등 자바스크립트 기술 면접에 많이 나오는 알차고 어려운 내용들로 구성되어 있던 챕터였는데, 우리 스터디 에이스 성철님이 너무 이해하기 쉽게 설명해 주셔서 좋았다😎

혼자 공부했을 때는 와닿지 않았던 내용들도 쉽게 들을 수 있어서 스터디 시작부터 많은 도움이 됐던 것 같다.

💡 새롭게 알게 된 점

1. Symbol을 사용하는 이유는 뭘까 | symbol usage

2. 원시 타입은 불변 형태의 값으로 저장, 객체는 변경 가능한 형태로 값을 저장

3. 리액트에서는 Object.is 매커니즘으로 값의 비교가 이루어짐

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

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

단어만 들어봤던 리액트 파이버나 Reconciliation 등에 대해 정말 자세히 알 수 있는 챕터였고, 제대로 이해하려면 제일 어려운 챕터 중에 하나였던 것 같다 🥹

이건 두번 세번 읽어야 차차 이해해나갈 수 있는 개념들이 아닐까 싶다 ㅠ.ㅠ!!ㅋㅋ

💡 새롭게 알게 된 점

1. JSX는 리액트에 종속적이지 않은 독자적인 문법

2. DOM과 브라우저 렌더링 과정

3. 리액트 작업을 작은 단위로 분할하고 우선순위를 매겨 실행하는 '리액트 파이버'!

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

3장은 내가 첫 발표를 맡은 장으로, 리액트에서 중요한 개념 중 하나인 hook에 대해 자세한 소개가 나와 있는 챕터였다.

자주 쓰는 hook부터 생전 한 번도 사용해 본 적 없는 이름조차 생소한 hook들까지 어떤 기능을 하고, 어떻게 사용하는지 자세히 설명되어 있었다.

개인적으로 첫 발표를 맡은 파트라서 그런지 가장 기억에 남는 챕터인 것 같다.

💡 새롭게 알게 된 점

1. useState와 useRef의 차이점

2. useState에 변수 대신 함수를 넘겨 state가 처음 만들어질 때만 사용되게 하는 것을 '게으른 초기화'라고 함!

3. useEffect는 생명주기 메서드를 대체하기 위해 만들어진 훅이 아니다! 컴포넌트의 여러 값들을 활용해 동기적으로 부수 효과를 만드는 매커니즘 ⭐

04장: 서버 사이드 렌더링

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

CSR과 SSR, SPA와 MPA에 대한 개념은 명확히 알고 있다고 생각했는데 최근에 기술 면접에 이 부분에 대한 대답을 이상하게 한 적이 있어서

도서 스터디를 할 때 이 부분을 집중해서 공부할걸...🥹 하는 후회가 있었다(ㅠㅠ)

그만큼 중요하고 알아야 하는 개념이라는 생각이 들었다.

💡 새롭게 알게 된 점

1. CSR과 SSR의 장단점

2. 뛰어난 SPA는 MPA보다 낫다 ⭐

3. Next.js paga router의 전체적인 구조

🔥 책에 없는 추가적인 의견

1. redirect vs rewrite

• Next.js의 Proxy

• [NextJs] nextJs에서 Proxy설정하기

2. SSR이 적용되지 않는 라이브러리를 사용할 때 주의해야 한다!

• [Next.js] 트러블 슈팅 정리 #4

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

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

특히 이러한 상태 관리 도구가 왜 개발되고 발전되었는지에 대한 배경을 이해할 수 있었던 내용이었다.

상태 관리 도구를 이것저것 써 보는 걸 좋아해서 개인적으로 재밌는 장이었던 것 같다 ☺️

💡 새롭게 알게 된 점

1. 단방향 데이터 흐름을 가지는 'Flux 패턴'

2. Context API는 상태 관리가 아닌 '주입'을 도와주는 기능이다!

3. Recoil과 Jotai의 차이점 (키 관리 유무, 정식 버전 여부 등)

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

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

컴포넌트와 프로파일러 탭에서 각각 어떤 내용을 제공하는지에 대한 설명이 나와 있었다.

💡 새롭게 알게 된 점

1. 컴포넌트를 기명 함수로 선언하면, 리액트 개발 도구에서 쉽게 식별 가능하다!

2. 리액트가 렌더링하는 과정에서 발생하는 상황을 개발 모드에서 확인하게 해주는 '프로파일러'

3. '프로파일러'에서는 렌더 커밋별로 어떠한 작업이 일어났는지와 시간의 흐름에 따라 리액트가 작동하는 내용을 측정 가능

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

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

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

💡 새롭게 알게 된 점

1. '소스' 탭에서는 감시하고 싶은 변수를 선언해 추적하거나 특정 중단점에서의 콜스택도 확인 가능 (잘 활용하면 일일이 console.log를 찍지 않고 변수값들을 알 수 있다!)

2. '네트워크' 탭에서는 리소스를 불러오는 속도가 적절한지, 올바른 우선순위로 다운로드 되는지 등을 확인해 보면 좋다

3. '메모리' 탭에서는 스냅샷을 2개 이상 촬영하고, 차이를 비교하는 식으로 활용하면 좋다

🔥 책에 없는 추가적인 의견

• 개발자의 컴퓨터는 보통 사용자의 기기보다 성능이 좋기 때문에, 의도적으로 네트워크를 느리게 해서 체감 성능을 확인해 보는 게 좋다!

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

8장은 쉽게 말해 '테스트'에 관한 장이었다. ESLint를 활용한 정적 코드 분석과 테스팅 라이브러리를 활용한 테스트 방법에 대해 대략적인 소개를 하는 장이었다.

💡 새롭게 알게 된 점

1. ESLint는 자바스크립트 코드를 문자열로 읽어, 파서(parser)로 코드를 구조화한 후, 이 AST를 규칙과 대조한다

2. eslint-config 패키지에는 유명한 eslint-config-airbnb 외에도 한국 커뮤니티에서 개발 및 관리되는 @titicaca/triple-config-kit도 있다

3. 테스트의 최우선 과제는 애플리케이션에서 가장 취약하거나 중요한 부분을 파악하는 것

🔥 책에 없는 추가적인 의견

• 백엔드에서 api가 아직 나오지 않았을 때 테스트를 시도해 볼 수 있는 msw, jsonServer

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

리액트 애플리케이션을 배포, 도커라이즈 하는 방법에 대한 내용이 나와 있는 장이었다. 도커에 대한 내용이 특히 깊게 나와 있어서 다들 많이 어려워 했던 챕터였던 것 같다.

그래도 도커를 사용해 보았던 경험과 요즈음 트렌드에 대한 의견을 공유하면서 배워가는 게 많았던 장이었다 👀

💡 새롭게 알게 된 점

1. tsconfig.json에서 strict가 'true'면 정확히 어떤 값들이 적용되게 되는지

2. 깃허브 액션의 기본 개념과 이를 이용해서 CI를 구성하는 방법

3. 리액트 애플리케이션을 도커라이즈 하는 방법 ⭐

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

이걸 공부하고 있을 때쯤은 이미 리액트 19 버전이 나왔을 때였다...

아무튼 리액트 17과 18 버전은 어떤 차이가 있는지, 리액트는 새로운 업데이트에서 어떤 관점으로 신기능을 출시하는지에 대한 내용이 적혀 있는 장이었다.

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

💡 새롭게 알게 된 점

1. 리액트 18에서 새롭게 추가된 기능들

2. 리액트 17에서 18로 넘어갈 때, 가장 큰 변경점은 바로 '동시성 지원'!

🔥 책에 없는 추가적인 의견

1. React 19 버전

• 새롭게 발표된 React 19 버전은 무엇이 달라졌나? : 우리 5CEAN 팀의 든든한 프론트 개발자가 데보션 블로그에 작성한 글을 다같이 둘러보았다 😋

2. useID hook

• 리액트 18 버전에서 새롭게 등장했던 useID()가 있어야 하는 이유에 대해 다같이 검토해 보았다.

• useID의 주요 이점은 서버 사이드 렌더링과 함께 작동할 수 있도록 보장한다는 것!

• useID - React

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

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

리액트 18에서 처음 등장한 리액트 서버 컴포넌트와 Next.js가 제공하는 SSR에 대해 비교·분석하는 내용을 주로 다루고 있다.

개인적으로 최근에 면접 질문으로까지 질문 받았던 내용이라 확실히 요즈음 프론트엔드 개발자들이 주목해 보면 좋을 것 같다!

💡 새롭게 알게 된 점

1. page router이 가지는 레이아웃의 한계를 극복하기 위해 등장한 게 app router

2. 리액트 서버 컴포넌트는 서버 사이드 렌더링과는 완전히 다른 개념이다! (대체재가 아닌, 상호 보완용이다)

3. 웹팩의 후계자 '터보팩'

🔥 책에 없는 추가적인 의견

1. 클라이언트 컴포넌트에서는 서버 컴포넌트를 렌더링할 수 없다. 만약 애플리케이션의 상위 컴포넌트에서 상태를 사용해야 한다면? 모든 것을 다 클라이언트 컴포넌트로 선언해야 한다는 걸까?

• 애플리케이션을 재구성하여 소유자가 변경되도록 하면 문제 해결

• 독립적인 컴포넌트로 분리하여 클라이언트 컴포넌트로 선언해 주면 된다!

• 새로 등장한 '리액트 서버 컴포넌트' 이해하기

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

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

핵심 웹 지표인 LCP, FID, CLS와 핵심까지는 아니지만 특정 문제를 진단할 때 사용하는 유용한 지표인 TTFB, FCP에 대한 설명이 나와 있다.

💡 새롭게 알게 된 점

1. 아무리 이미지를 최적화 하더라도 당연히 텍스트 로딩이 훨씬 빠르다 ⭐ (첫 뷰포트 영역은 되도록 텍스트로 채우는 게 좋다)

2. 실행을 완료하는 데 오래 걸리는 Long task들은 꼭 웹 페이지에서 해야 하는 작업인지에 대한 고민이 필요하다

3. 최초 바이트까지의 시간,

   즉 TTFB는 특히 SSR에서 주의깊게 봐야 할 지표(페이지를 만들기 위해서는 '서버'에서 작업을 해야 하고, 서버 작업이 많아질수록 HTML을 만들기 위한 작업 시간이 길어지기 때문에)

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

12장에 이어 웹 페이지의 '성능'에 대한 내용이었고, 성능을 측정하기 위해 사용할 수 있는 여러 가지 방법이나 사이트를 소개하는 장이었다.

개인적으로 구글 라이트하우스만 사용하다가 새로운 유용한 툴을 알게 되어서 좋았다 👀

💡 새롭게 알게 된 점

1. create-next-app에서는 Next.js만의 성능 측정 메서드인 NextWebVitalMetric을 제공하고,

   핵심 웹 지표 외에 Next.js에 특화된 사용자 지표(Next.js-hydration, Next.js-route-change-to-render, Next.js-render)들을 제공한다!

2. 웹 사이트 성능 분석 도구로 가장 널리 알려진 도구는 WebPageTest이며, 무료 버전만으로 충분할 만큼 다양한 성능 분석 결과를 제공한다

3. 크롬 개발자 도구에서 실험 모드로 제작되었던 '성능 통계' 패널은 올해 안에 삭제될 예정 🥲

🔥 책에 없는 추가적인 의견

• 책에서는 Titme to Interactive가 '보여지는 페이지 요소의 대부분에 이벤트 핸들러가 부착되는 시점'이라고 나와 있었는데,

  "대부분"의 기준을 모르겠어서 참고 자료를 찾아보았다!

• Chrome for Developers - 상호작용 시작 시간

• 공식 문서에는 '이벤트 핸들러가 가장 많이 보이는 페이지 요소에서 동작할 때'라고 적혀 있다 ⭐

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

다같이 어려워 했던 보안 관련 장이다(ㅠㅠ) 웹페이지에서의 보안 이슈에는 어떤 것들이 있고, 어떤 방법으로 해결할 수 있는지에 대한 내용을 담았다.

이름과 개념만 어렴풋이 알았던 보안 이슈들에 대해 자세히 들여다 볼 수 있었고,

이를 단순히 HTML 프로퍼티로 해결하는 간단한 방법부터 HTTP 보안 헤더로 해결하는 상세한 방법까지를 배울 수 있었다.

💡 새롭게 알게 된 점

1. dangerouslySetInnerHTML 속성이 존재하는 이유는, 기본적으로 리액트에서는 XSS를 방어하기 위한 이스케이프 작업이 존재하고,

   이 속성이나 props로 넘겨받는 값의 경우에는, 개발자의 활용도레 따라 원본 값이 필요할 수 있기 때문에 이스케이프 작업이 수행 안 된다!

2. <a> 태그의 href 값에 자바스크립트 코드가 존재하면 이를 실행해버리기 때문에, 사용자가 입력한 값으로 이동하지 않도록 적절한 제한을 둬야 한다

3. OWASP에서 주기적으로 공개하는 10대 웹 애플리케이션 취약점을 주목하자 ⭐

🔥 책에 없는 추가적인 의견

1. '이스케이프 작업'이란?

   - 특정 문자가 해석되는 방식을 변경하여 코드가 악용되지 않도록 하는 작업

   - 리액트에서 이스케이프 작업은 HTML 태그나 JavaScript 코드 같은 특수문자를 '문자 그대로' 표시하도록 처리하는 것!

2. target="_blank"의 위험성

   - 이 속성값을 사용할 때는 Tabnabbing 피싱 공격에 노출될 수 있는 위험 존재

   - Tabnabbing 피싱 공격: HTML 문서 내에 링크를 클릭했을 때 새롭게 열린 탭에서 기존의 문서인 location을 피싱 사이트로 변경해 정보를 탈취하는 공격 기술

   rel="noopener noreferrer"을 추가하여 위험을 방지하자

   • target="_blank" 사용 이슈 및 해결

3. content sniffing

   - 브라우저는 Content-Type 헤더에 지정된 MIME 타입 사용

   - IE는 인터넷 옵션에 따라 MIME 타입이 아닌 내용을 보고 파일 형식을 유추하기도 함

   - 즉, html과 javascript가 적혀 있으면 브라우저가 파일 형식을 추측하여 실행을 해버리기도 함 → content sniffing

   • X-Content-Type-Options: nosniff를 추가하여 위험을 방지하자

   • https: MIME 타입과 Content-Type, 그리고 nosniff

15장: 마치며

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

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

✅ 후기

좋았던 점

1. 동기 부여

서두에서도 언급했듯이 이 책은 952페이지다(!) 들고 다니기도 힘들 정도로 무거운 책이고, 최근에 400페이지짜리 책도 겨우 완독했던 나에게는 혼자 읽기 버거운 두께였다.

하지만 격주로 스터디를 진행하면서 읽다 보니 절대 못 읽을 것 같았던 이 책도 끝까지 읽어낼 수 있었던 것 같다.

아직도 '혼자 했었으면 이걸 다 읽을 수 있었을까??'라는 생각이 맨날 드는 것 같다 ㅋㅋ 성실한 분들과 함께해서 끝까지 달려갈 수 있었고, 완독 자체만으로 나한테는 큰 의미가 되어줬던 것 같다.

2. 의견 공유

이번 스터디에서 가장 좋은 점이 아니었다 싶다!

만약 스터디를 혼자 진행했더라면 내가 책을 읽으면서 생겼던 궁금증에 대해서만 정보를 찾아봤을 것 같은데,

다른 분들이 이번 파트를 읽으면서 생겼던 궁금증이나 의아했던 점까지 들어보면서 '아, 나는 이런 생각 못 해봤는데 듣고 보니 그렇네?' 하는 순간이 정말 많았던 것 같다.

그만큼 날카로운 질문들도 많았고 그 과정에서 더 많이 배운 것 같다는 생각이 들었다. 누군가 질문을 말하면 멋지게 대답해주시는 분도 계셨고, 경험담을 소개해 주시는 분도 계셨으며,

다같이 그 하나의 질문에 대한 답을 알아보는 시간을 가지기도 했다. 매 스터디에서 이런 경험을 할 수 있는 스터디는 정말 드문데, 다시 한번 스터디원을 너무 잘 만났다는 생각이 들었다 🙇

아쉬웠던 점

1. 발표 맡은 파트가 아니면 준비를 소홀히 하게 된다...

이건 나만 그랬을 수도 있지만... 격주의 격주로 발표 담당이 정해져 있는 스터디이다 보니 내가 발표를 맡은 부분이 아니라면 상대적으로 준비를 소홀히 해 가는 경향이 있었다.

그래서 다른 스터디에서는 그날 발표 담당을 그날 랜덤으로 결정하는 스터디도 있다고 들었는데 그렇게 한번 해 볼걸 그랬나 하는 아쉬움이 살짝 있었다 😂

하지만 그랬으면 팀원들의 부담이 좀 더 올라가긴 했을 것 같다 🤔 스터디 팀원들의 상황에 따라 적절히 선택해야 할 것 같다.

2. 한번 본 거 가지고 완벽하게 이해하기는 어렵다!

이건 아쉬운 점이 진짜 없어서 쥐어짜낸 아쉬운 점이다.(ㅎㅎ)

팀원들이 모두 공감했던 얘기지만, 책 자체가 양도 어마어마하고 난이도도 있는 편이라 한번 훑는 것으로 온전히 이해하기는 어렵다는 생각이 들었다.

나 같은 경우에는 새롭게 알게 된 내용도 많았고, 잘못 알고 있었던 내용도 많았어서 그런 부분들을 다 완벽하게 바로잡기 위해서는 여러 번 책을 다시 읽어보고 실제로 적용해 보는 연습이 필요할 것 같다.

총평

아마 이 스터디에서 내가 제일 실력이 부족하다고 말해도 겸손이 아닐 정도로 정말 우수하고 열정적인 팀원들과 함께할 수 있었던 것 같다.

내가 배워가는 게 정말 많아서 나도 내 발표 시간에 새로운 내용들을 가져와 보답하려고 많이 노력했던 것 같고, 그 과정에서 나 스스로 알게 된 것도 또 아주 많았던 것 같다 😀

사실 도서 스터디라는 게 잘 진행되기가 은근히 정말 힘들다는 걸 알고 있는데(특히 책이 두꺼울수록)

이렇게 끝까지 진행될 수 있었던 건 각자의 역할을 잘 지켜주고 바빠도 성실하게 참여해 준 팀원들 덕분이 아닐까 싶다.

데보션 영 활동 중에 제일 잘한 활동 중에 하나였던 것 같다! 나중에 같은 분들과도 다른 분들과도 스터디를 더 진행해 보고 싶다 ☺️ 리액트 고수가 되는 그날까지 👊👊