리액트 강의

안녕하세요 :)

강의 목표

1. 리액트를 사용해서 내가 원하는 간단한 페이지는 고민 없이 만들 수 있다.

2. 앞으로 복잡한 리액트 앱을 개발하게 될 때, 이 강의를 통해서 더 어려운 내용의 학습을 쉽게 진행한다.

3. 생각하는 개발자

강의대상

리액트를 잘 모르는 분. 프론트엔드 요새 많이 복잡해졌다는데 그래봤자 Jquery 비슷한 거 아니야? 라고 생각하시는 분. 리액트 기초에 대한 지식이 부족한 분.

새로운 프레임워크를 배워보고 싶은 분들

강의를 통해서 얻어갈 수 있는 것

리액트 기초 지식

리액트 뿐만 아닌 다른 컴포넌트 기반 프레임워크를 더욱 쉽게 배울 수 있는 개념 정립

목차

리액트를 시작하기 전에 먼저 할 일
ES6에 대한 학습
- Arrow function
- class
- spread syntax

• React 기초와 맛보기

• 리액트를 시작하기 전에
• 리액트가 뭐야 ?
• 리액트를 왜 배우니 ?
• CRA를 활용한 5분만에 리액트 클라이언트 앱 만들기
• CRA 리액트 프로젝트 환경설정
• JSX 문법
• 컴포넌트 생성해보기
• Props와 State에 대해 알아보기
• 컴포넌트 생성 주기에 따른 LifeCycle API 알아보기
• 전화번호부 만들기 (생성, 수정, 삭제, 검색) (시간이 된다면)

• React 꾸미기

• CRA에 sass, scss 주입 방법
• Styled-component
• 리액트 메모장 만들기 (생성, 수정, 삭제, 검색)
• React로 본격적인 웹앱 만들기

• CSR은 SSR과 뭐가 다른거지 ?
• react-router-dom을 이용한 간단한 라우팅 학습
• NavLink를 통한 특정 라우트 페이지 스타일 주입
• history를 이용한 이전 페이지로 이동 실습해보기
• 라우팅을 통한 한국 전통 음식 소개 페이지 만들기
• 1. 전체적인 음식 리스트
  2. 세부 음식 정보
• API (Ajax) 사용을 통한 데이터 요청 및 핸들링과 State 효율적으로 관리하기

• Ajax & API (axios)

• API 요청 간단 실습해보기

• Unsplash API를 이용한 사진첩 만들기

• API 요청으로 추가 데이터 로드하기

• API 실패 시 에러 핸들링하기

• 데이터 상태 관리

• 리덕스를 이용한 상태 관리

• 1. 왜 리덕스가 필요한가요?

  2. 리덕스를 사용해야할 상황 구분하기

  3. 리덕스를 사용한 간단한 투두리스트 실습

• 번외

  • ESlint

  • Prettier

  • ESlint + Prettier 적용하기

  • Typescript와 함께 리액트 사용하기

  • Vscode 에디터 꿀팁