현업에서 통하는 React+Typescript 올인원 패키지
강의소개
강의정보
| 학습개요 |
프론트엔드 개발자가 가장 많이 쓰는 React! 다양한 기능을 구현하는 문법을 하나씩 학습하면서 현업에서 원하는 개발자가 될 수 있습니다. 해커스HRD에서 프론트엔드 개발자의 꿈을 이룰 수 있습니다! |
|---|---|
| 학습목표 |
1. React의 기초 내용에 대해 이해할 수 있다. 2. React에 Typesc |
| 학습대상 |
|
강사이력
| 現 해커스HRD 리액트 대표강사
前 앤노바랩스 수석연구원
前 엘씨케이티 수석연구원
前 (주)텔레웍스 안드로이드 앱, 인공지능 로봇 개발
前 나눔정보통신 기술연구소 차장 前 머큐리움 기술연구소 수석연구원 (본사 소프트웨어 개발 총괄) |
강의목차
-
강의정보 번호 강의명 1강오리엔테이션- 리액트란?
- 리액트의 특징 이해하기
- 타입스크립트 소개
2강리액트 시작하기- 개발 환경 구축하기
- JSX 이해하기
- 컴포넌트와 Props
- State와 생명주기
3강이벤트 관리하기- 이벤트 핸들링 이해하기
- onClick 및 onChange 이벤트
- 콤보박스 이벤트
- 라디오 버튼 이벤트
4강컴포넌트 반복- 배열과 맵 이해하기
- map( )함수 이해하기
- To-do List 추가 기능 만들기
- To-do List 삭제 기능 만들기
5강useState로 상태 관리- UseState 이해하기
- UseState 기본 동작
- UseState 응용 동작
6강useEffect로 생명 주기 관리- UseEffect 이해하기
- useEffect 기본 동작
- useEffect 응용 동작
7강useMemo와 useCallback- useMemo 이해하기
- useCallback 이해하기
8강useRef로 DOM 접근하기- useRef 이해하기
- useRef DOM 제어
- useRef로 값 유지하기
9강컴포넌트 스타일링- 스타일드 컴포넌트란?
- 스타일드 컴포넌트 설치 방법
- 스타일드 컴포넌트 작성 방법
- Props에 따른 조건부 스타일링
- 스타일드 컴포넌트를 활용한 반응형 디자인
10강리액트 라우터 (1)- 리액트 라우터 이해하기
- 프로젝트 생성 및 패키지 설치 방법
- 라우터 적용 및 페이지 이동
- Link로 페이지 이동
-
강의정보 번호 강의명 11강리액트 라우터 (2)- 데이터 전달을 위한 URL 파라미터
- URL 파라미터 전달
- useNavigate로 페이지 이동
12강리액트 라우터 (3)- 중첩 라우터란?
- 중첩 라우터 기본 코드 작성 방법
- 공통 레이아웃 컴포넌트 만들기
13강비동기 통신 - axios- 비동기 작업 이해하기
- axios란?
- async와 await
14강axios와 API 연동으로 뉴스 웹페이지 구현하기 (1)- 프로젝트 생성 및 패키지 설치 방법
- Item 컴포넌트 만들기
- List 컴포넌트 만들기
15강axios와 API 연동으로 뉴스 웹페이지 구현하기 (2)- 외부 데이터 연동하기
- 카테고리 선택 UI 만들기
- 카테고리와 axios API
16강타입스크립트 주요 문법 알아보기- 타입스크립트 적용을 위한 프로젝트 생성
- 정적 타입 지정과 타입 추론
- 인터페이스와 제네릭
17강리액트에서 타입스크립트 적용하기- 함수형 컴포넌트에 타입스크립트 활용
- 이벤트 처리에 타입스크립트 적용
- Hooks에 타입스크립트 적용
18강스프링 부트 백엔드 협업으로 로그인 기능 구현하기- 타입스크립트 프로젝트 생성 및 폴더 구성
- 스웨거를 통한 API 확인
- 페이지 이동을 위한 라우팅 설정
- 로그인 페이지 만들기
- 로그인 기능을 위한 서버 연결하기
19강스프링부트 백엔드 협업으로 게시글 기능 구현하기- 홈 메뉴 및 게시글 목록 업데이트 기능
- 게시글 보기 기능
- 게시글 쓰기 기능
- 상세 보기 및 댓글 추가 기능
20강전역 상태 관리 및 컴포넌트 최적화- 전역 상태 관리(Context API)란?
- 전역 상태 관리를 활용한 사용자 정보 생성 및 변경
- Headless 컴포넌트를 활용한 컴포넌트 모듈화
- 빌드 및 배포 방법 검토
