'리액트를 다루는 기술' Blog 만들기 최종 프로젝트
1장 리액트 시작(//////)
1.1 왜 리액트인가?
1.2 리액트의 특징
1.3 작업 환경 설정
2장 JSX(////)
2.1 코드 이해하기
2.2 JSX란?
2.3 JSX의 장점
2.4 JSX 문법
2.5 ESLint와 Prettier 적용하기
3장 컴포넌트(////)
3.1 클래스형 컴포넌트
3.2 첫 컴포넌트 생성
3.3 props
3.4 state
3.5 state를 사용할때 주의 사항
4장 이벤트 핸들링(////)
4.1 리액트의 이벤트 시스템
4.2 예제로 이벤트 핸들링 익히기
4.3 함수형 컴포넌트 구현해 보기
5장 ref:DOM에 이름 달기(////)
5.1 ref는 어떤 상황에서 사용해야 할까
5.2 ref 사용
5.3 컴포넌트에 ref 달기
6장 컴포넌트 반복(////)
6.1 자바스크립트 배열의 map()함수
6.2 데이터 배열을 컴포넌트 배열로 변환하기
6.3 key
6.4 응용
8장 Hooks(////)
8.1 useState
8.2 useEffect
8.3 useReducer
8.4 useMemo
8.5 useCallback
8.6 useRef
8.7 커스텀 Hooks 만들기
9장 컴포넌트 스타일링(////)
9.2 Sass 사용하기
9.4 styled-components
10장 일정 관리 웹 애플리케이션 만들기(////)
10.1 프로젝트 준비하기
10.2 UI 구성하기
10.3 기능 구현하기
11장 컴포넌트 성능 최적화(////)
11.1 많은 데이터 렌더링하기
11.2 크롬 개발자 도구를 통한 성능 모니터링
11.3 느려지는 원인 분석
11.4 React.memo를 사용하여 컴포넌트성능 최적화
11.5 onToggle, onRemove 함수가 바뀌지 않게 하기
11.6 불변성의 중요성
11.7 TodoList 컴포넌트 최적화하기
11.8 react-virtualized를 사용한 렌더링 최적화
12장 immer를 사용하여 더 쉽게 불변성 유지하기(////)
12.1 immer를 설치하고 사용법 알아보기
13장 리액트 라우터로 SPA 개발하기(////)
13.1 SPA란?
13.2 프로젝트 준비 및 기본적인 사용법
13.3 Route 하나에 여러 개의 path 설정하기
13.4 URL 파라미터와 쿼리
13.5 서브 라우트
13.6 리액트 라우터 부가 기능
14장 외부 API를 연동하여 뉴스 뷰어 만들기(///)
15장 Context API(///)
15.1 Context API를 사용한 전역 상태 관리 흐름 이해하기
15.2 Context API 사용법 익히기
15.3 동적 Context 사용하기
15.4 Consumer 대신 Hook 또는 static contextType 사용하기
16장 리덕스 라이브러리 이해하기(///)
16.1 개념 미리 정리하기
16.2 리액트 없이 쓰는 리덕스
16.3 리덕스의 세 가지 규칙
17장 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기(///)
17.1 작업 환경 설정
17.2 UI 준비하기
17.3 리덕스 관련 코드 작성하기
17.4 리액트 애플리케이션에 리덕스 적용하기
17.5 컨테이너 컴포넌트 만들기
17.6 리덕스 더 편하게 사용하기
17.7 Hooks를 사용하여 컨테이너 컴포넌트 만들기
18장 리덕스 미들웨어를 통한 비동기 작업 관리
18.1 작업 환경 준비
18.2 미들웨어란
18.3 비동기 작업을 처리하는 미들웨어 사용
19장 코드 스플리팅
19.1 자바스크립트 함수 비동기 로딩
19.2 React.lazy와 Suspense를 통한 컴포넌트 코드 스플리팅
20장 서버 사이드 렌더링
21장 백엔드 프로그래밍:Node.js의 Koa 프레임워크
21.1 소개하기
21.2 작업 환경 준비
21.3 Koa 기본 사용법
21.4 nodemon 사용하기
21.5 koa-router 사용하기
22장 mongoose를 이용한 MongoDB 연동 실습
22.1 소개하기
22.2 MongoDB 서버 준비
22.3 mongoose의 설치 및 적용
22.4 esm으로 ES 모듈 import/export 문법 사용하기
22.5 데이터베이스의 스키마와 모델
22.6 MongoDB Compass의 설치 및 사용
22.7 데이터 생성과 조회
22.8 데이터 삭제와 수정
22.9 요청 검증
22.10 페이지네이션 구현
23장 JWT를 통한 회원 인증 시스템 구현하기
23.1 JWT의 이해
23.2 User 스키마/모델 만들기
23.3 회원 인증 API 만들기
23.4 토큰 발급 및 검증하기
23.5 posts API에 회원 인증 시스템 도입하기
23.6 username/tags로 포스트 필터링하기
24장 프런트엔드 프로젝트: 시작 및 회원 인증 구현
24.1 작업 환경 준비하기
24.2 회원가입과 로그인 구현
24.3 헤더 컴포넌트 생성 및 로그인 유지
25장 프런트엔트 프로젝트: 글쓰기 기능 구현하기
25.1 에디터 UI 구현하기
25.2 에디터 하단 컴포넌트 UI 구현하기
25.3 리덕스로 글쓰기 상태 관리하기
26장 프런트엔드 프로젝트: 포스트 조회 기능 구현하기
26.1 포스트 읽기 페이지 구현하기
26.2 포스트 목록 페이지 구현하기
27장 프런트엔드 프로젝트: 수정/삭제 기능 구현 및 마무리
27.1 포스트 수정
27.2 포스트 삭제
27.3 react-helemt-async로 meta 태그 설정하기
27.4 프로젝트 마무리