모던 리액트 Deep Dive: 10주간의 집중 스터디 이야기
1. 도입
프론트엔드 개발자로서 기술 스택을 넓히기 위해 '모던 리액트 딥 다이브' 스터디를 시작했습니다. 리액트는 현재 가장 인기 있는 프론트엔드 라이브러리 중 하나로, 깊이 있는 이해와 숙련된 사용이 필수적이라고 생각했습니다. 책이 두껍고 범위가 넓어서 집중해서 읽을 시간도 필요하다고 생각했습니다.
이 스터디의 목표는 단순한 이론 학습을 넘어 실제 프로젝트에서의 적용 능력을 키우는 것이었습니다. 스터디는 주 1회 모임과 개인 학습, 실습 과제로 구성되어 있었고, 총 10주 동안 진행되었습니다.
모집은 인프런의 커뮤니티 > 스터디 게시판을 통해 진행했습니다. 모집 게시글 인원이 부족할까 걱정도 있었는데, 다행히 초과로 모집되어 모집종료를 할 수 있었습니다.
2. 스터디 주요 내용
리액트의 기본 원리와 가상 DOM
스터디 첫 주에는 리액트의 기본 원리와 가상 DOM에 대해 깊이 있게 다뤘습니다. 리액트의 주요 개념인 컴포넌트와 JSX, 그리고 리액트의 렌더링 방식과 가상 DOM의 작동 원리에 대해 학습했습니다. 가상 DOM이 실제 DOM 조작보다 성능이 좋은 이유와, 이를 통해 리액트가 어떻게 효율적인 업데이트를 수행하는지 이해할 수 있었습니다.
상태 관리
두 번째 주부터는 상태 관리에 대한 학습을 했습니다. Context API와 Recoil, Jotai, Zustand와 같은 상태관리 라이브러리를 비교하며 각각의 장단점과 사용 사례를 공부했습니다.
환경 구축하기 (린트, Next)
나만의 ESLint 규칙을 만드는 방법에 대해 자세히 알게 되었습니다. 일일이 코드를 수정하는 것 보다 빠르고 쉬우며, 이후에 반복되는 실수도 방지할 수 있습니다. 이미 있는 규칙이어도 약간의 설정을 통해 프로젝트만의 코드 규칙을 명시할 수 있다는 것을 알게 되었습니다.
최적화 기법
리액트 애플리케이션의 성능 최적화는 매우 중요한 주제입니다. 메모이제이션 기법과 코드 분할을 통해 성능을 최적화하는 방법을 다루었습니다. React.memo와 useMemo, useCallback을 활용한 메모이제이션 기법을 공부하고, React.lazy와 Suspense를 사용해 코드 분할을 통해 초기 로딩 속도를 개선하고, 사용자 경험을 향상시키는 방법을 배웠습니다.
배포 환경 구축하기
Next.js로 리액트 개발 환경을 구축하는 방법을 배웠습니다. create-react-app의 대안으로 수동 설정을 강조하며, npm을 사용해 패키지를 설치하고 tsconfig.json과 next.config.js를 설정합니다. GitHub 템플릿과 Docker를 활용해 애플리케이션을 관리하고 배포합니다. 실습을 통해 GitHub Actions와 Docker 사용법을 익히며, 실제 배포과정을 명확하게 알 수 있었습니다..
3. 스터디 진행 방식
스터디는 매주 정해진 시간에 온라인으로 진행되었으며, 함께 읽기와 토론, 정리 시간으로 구성되었습니다. 삼색볼펜 독서법을 사용해 30분씩 읽고 5분씩 쉬며 이후에는 자유로운 토론 시간과 주요 내용을 마크다운으로 정리하는 시간을 가졌습니다.
아래는 실제 주로 진행했던 스터디 방식입니다. 분량이나 난이도에 따라 시간은 조정했습니다.
이를 통해 각자의 경험과 의견을 공유하고, 더 깊이 있는 이해를 도울 수 있었습니다. 또한 실습이 주된 내용의 챕터일 경우 실습을 진행하고, 각자 적용해 보며 어려운 부분을 논의하는 시간을 가졌습니다.
4. 개인적인 성찰
스터디를 통해 리액트에 대한 깊이 있는 이해를 할 수 있었고, 실제 프로젝트에서 적용할 수 있는 다양한 기술들을 배울 수 있었습니다.
특히 상태 관리와 최적화 기법, 테스트 작성의 중요성을 실감하게 되었습니다. 실제로 회사 프로젝트에서 책에서 읽은 내용을 참고해 상태 관리 라이브러리를 선택하기도 했습니다. 커스텀 린트 설정을 통해 코드 규칙을 강화하기도 했습니다. 또한 다른 개발자들과의 토론과 통해 다양한 시각을 접할 수 있었고, 참고 자료를 공유받아 더 자세하게 공부했습니다.
화요일 저녁을 10주 동안 빼두고 있는다는 것이 쉽지만은 않았습니다. 그래도 스터디장이어서 모두 출석을 했다는 점에서 개인적으로 성과가 있는 것 같습니다. 하기 싫어도 막상 디스코드를 켜두고 있으면 집중을 하게 됐습니다.
5. 스터디의 성과와 앞으로의 계획
스터디를 통해 리액트의 주요 개념과 기술들을 체계적으로 학습할 수 있었고, 이를 실제 프로젝트에 적용할 수 있는 자신감을 얻었습니다. 혼자서 읽었다면 더 오래 걸렸을 긴 호흡의 책이었는데, 완독하게 될 수 있게 된 것부터 큰 성과인 것 같습니다.
그리고 책을 읽으면서 생각한 내용을 바로 여러 사람들과 공유할 수 있다는 점이 책의 기억을 살리는 데에 도움이 많이 되었습니다. 내가 별로 중요하게 읽지 않았던 부분을 다시 생각해 볼 수도 있고, 중요하게 읽은 부분은 더 자세히 얘기하면서 현황도 얘기하게 되어 좋았습니다.
1~2주 정도 쉬었다가 다른 스터디를 시작하려고 합니다. 아직은 무엇을 할지 생각해 보지 않았는데, 본격적으로 실습을 할 수 있는 책이면 좋을 것 같습니다. 서점을 한 번 방문해야 하겠습니다.
6. 결론
'모던 리액트 딥 다이브' 스터디는 매우 유익한 경험이었습니다. 리액트에 대한 깊이 있는 이해와 실제 적용 능력을 키울 수 있었고, 다른 개발자들과의 소통을 통해 다양한 시각을 배울 수 있었습니다. 리액트 학습을 고민하는 개발자들에게 이 스터디를 추천하며, 함께 성장할 수 있기를 바랍니다.
10주 간의 스터디 주요 내용은 아래 블로그에 정리되어 있습니다.
이상으로 '모던 리액트 딥 다이브' 스터디 후기를 마칩니다. 감사합니다.