모던 리액트 Deep Dive

• 저자 : 김용찬
• 리액트의 핵심 개념과 동작 원리부터 Next.js까지, 리액트의 모든 것

스터디

마님	핵기	주트롱	지윤

• 2023년 12월 01일 ~
• 주 1회 금요일 자정까지 각자 챕터 요약
• 주 1회 토요일 오전 10시 발표 및 Q&A 진행
• 진행 후 발표자 요약본 README.md 변경 및 Q&A 요약

목차

들어가며

• 왜 리액트인가?
• 리액트의 역사

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

• 1.1 자바스크립트의 동등 비교
• 1.2 함수
• 1.3 클래스
• 1.4 클로저
• 1.5 이벤트 루프와 비동기 통신의 이해
• 1.6 리액트에서 자주 사용하는 자바스크립트 문법
• 1.7 선택이 아닌 필수, 타입스크립트

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

• 2.1 JSX란?
• 2.2 가상 DOM과 리액트 파이버
• 2.3 클래스형 컴포넌트와 함수형 컴포넌트
• 2.4 렌더링은 어떻게 일어나는가?
• 2.5 컴포넌트와 함수의 무거운 연산을 기억해 두는 메모이제이션

03. 리액트 훅 깊게 살펴보기

• 3.1 리액트의 모든 훅 파헤치기
• 3.2 사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야 할까?

04. 서버 사이드 렌더링

• 4.1 서버 사이드 렌더링이란?
• 4.2 서버 사이드 렌더링을 위한 리액트 API 살펴보기
• 4.3 Next.js 톺아보기

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

• 5.1 상태 관리는 왜 필요한가?
• 5.2 리액트 훅으로 시작하는 상태 관리

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

• 6.1 리액트 개발 도구란?
• 6.2 리액트 개발 도구 설치
• 6.3 리액트 개발 도구 활용하기

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

• 7.1 크롬 개발자 도구란?
• 7.2 요소 탭
• 7.3 소스 탭
• 7.4 네트워크 탭
• 7.5 메모리 탭
• 7.6 Next.js 환경 디버깅하기
• 7.7 정리

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

• 8.1 ESLint를 활용한 정적 코드 분석
• 8.2 리액트 팀이 권장하는 리액트 테스트 라이브러리

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

• 9.1 Next.js로 리액트 개발 환경 구축하기
• 9.2 깃허브 100% 활용하기
• 9.3 리액트 애플리케이션 배포하기
• 9.4 리액트 애플리케이션 도커라이즈하기

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

• 10.1 리액트 17 버전 살펴보기
• 10.2 리액트 18 버전 살펴보기

11. Next.js 13과 리액트 18

• 11.1 app 디렉터리의 등장
• 11.2 리액트 서버 컴포넌트
• 11.3 Next.js에서의 리액트 서버 컴포넌트
• 11.4 웹팩의 대항마, 터보팩의 등장(beta)
• 11.5 서버 액션(alpha)
• 11.6 그 밖의 변화
• 11.7 Next.js 13 코드 맛보기
• 11.8 정리 및 주의사항

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

• 12.1 웹사이트와 성능
• 12.2 핵심 웹 지표란?
• 12.3 최대 콘텐츠풀 페인트(LCP)
• 12.4 최초 입력 지연(FID)
• 12.5 누적 레이아웃 이동(CLS)
• 12.6 정리

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

• 13.1 애플리케이션에서 확인하기
• 13.2 구글 라이트하우스
• 13.3 WebPageTest
• 13.4 크롬 개발자 도구
• 13.5 정리

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

• 14.1 리액트에서 발생하는 크로스 사이트 스크립팅(XSS)
• 14.2 getServerSideProps와 서버 컴포넌트를 주의하자
• 14.3 태그의 값에 적절한 제한을 둬야 한다
• 14.4 HTTP 보안 헤더 설정하기
• 14.5 취약점이 있는 패키지의 사용을 피하자
• 14.6 OWASP Top10
• 14.7 정리

15. 마치며

• 15.1 리액트 프로젝트를 시작할 때 고려해야 할 사항
• 15.2 언젠가 사라질 수도 있는 리액트