리액트를 다루는 기술
1장 리액트 시작
- 왜 리액트인가?
- 리액트의 특징
- 작업 환경 설정
2장 JSX
- 코드 이해하기
- JSX란?
- JSX의 장점
- JSX 문법
- ESLint와 Prettier 적용하기
- 정리
3장 컴포넌트
- 클래스형 컴포넌트
- 첫 컴포넌트 생성
- props
- state
- state를 사용할 때 주의 사항
- 정리
4장 이벤트 핸들링
- 리액트의 이벤트 시스템
- 예제로 이벤트 핸들링 익히기
- 함수 컴포넌트로 구현해 보기
- 정리
5장 ref: DOM에 이름 달기
- ref는 어떤 상황에서 사용해야 할까?
- ref 사용
- 컴포넌트에 ref 달기
- 정리
6장 컴포넌트 반복
- 자바스크립트 배열의 map() 함수
- 데이터 배열을 컴포넌트 배열로 변환하기
- key
- 응용
- 정리
7장 컴포넌트의 라이플사이클 메서드
- 라이프사이클 메서드의 이해
- 라이프사이클 메서드 살펴보기
- 라이프사이클 메서드 사용하기
- 정리
8장 Hooks
- useState
- useEffect
- useReducer
- useMemo
- useCallback
- useRef
- 커스텀 Hooks 만들기
- 다른 Hooks
- 정리
9장 컴포넌트 스타일링
- 가장 흔한 방식, 일반 CSS
- Sass 사용하기
- CSS Module
- styled-components
- 정리
10장 일정 관리 웹 애플리케이션 만들기
11장 컴포넌트 성능 최적화
12장 immer를 사용하여 더 쉽게 불변성 유지하기
13장 리액트 라우터로 SPA 개발하기
- 라우팅이란?
- 싱글 페이지 애플리케이션이란?
- 리액트 라우터 적용 및 기본 사용법
- URL 파라미터와 쿼리스트링
- 중첩된 라우트
- 리액트 라우터 부가 기능
- 정리
14장 외부 API를 연동하여 뉴스 뷰어 만들기
15장 Context API
- Context API를 사용한 전역 상태 관리 흐름 이해하기
- Context API 사용법 익히기
- 동적 Context 사용하기
- Consumer 대신 Hooks 또는 static contextType 사용하기
- 정리
16장 리덕스 라이브러리 이해하기
- 개념 미리 정리하기
- 리액트 없이 쓰는 리덕스
- 리덕스의 세 가지 규칙
- 정리
17장 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기
- 작업 환경 설정
- UI 준비하기
- 리덕스 관련 코드 작성하기
- 리액트 애플리케이션에 리덕스 적용하기
- 컨테이너 컴포넌트 만들기
- 리덕스 더 편하게 사용하기
- Hooks를 사용하여 컨테이너 컴포넌트 만들기
- 정리
18장 리덕스 미들웨어를 통한 비동기 작업 관리
- 작업 환경 준비
- 미들웨어란?
- 비동기 작업을 처리하는 미들웨어 사용
- 정리
19장 코드 스플리팅
- 자바스크립트 함수 비동기 로딩
- React.lazy와 Suspense를 통한 컴포넌트 코드 스플리팅
- 정리
20장 서버 사이드 렌더링
21장 백엔드 프로그래밍: Node.js의 Koa 프레임워크
22장 mongoose를 이용한 MongoDB 연동 실습
23장 JWT를 통한 회원 인증 시스템 구현하기
- JWT의 이해
- User 스키마/모델 만들기
- 회원 인증 API 만들기
- 토큰 발급 및 검증하기
- posts API에 회원 인증 시스템 도입하기
- username/tags로 포스트 필터링하기
- 정리