⚛️리액트(React JS) 풀스택 왕기초 강좌
프론트 앤드 계발자로 취업을 위한 리액트 기초 강좌입니다.
⚛️1. 장좌 소개
리액트(React JS) 는 웹의 프론트앤드 개발용 라이브러리입니다.
모든 작업들이 프론트 앤드에서 SPA(Single Page App)으로 작동 됩니다. php같은 경우 처럼 서버쪽 처리를
통해 페이지가 보이지 않는것이죠.
버튼 등 UI 요소를 컴포넌트 기반으로 처리하기에 빠른 사용자 경험을 제공하며, 또 쉽고 빠르게 배울 수 있는 특징을 가지고
광범위한 사용자 층을 확보 하고 있습니다.
리액트를 사용하는 이유는 다음과 같습니다.
– 웹/앱의 View를 개발할 수 있도록 하는 라이브러리이다.
MVC(모델 – 데이터베이스, 뷰 -사용자 UI ,컬트롤러 -라우팅 등) 의 형태로 웹 개발 구조를 처리할 수 있다.
-DOM 트리를 사용하므로 변화가 바로바로 반영된다.php 같이 변화된 것을 리로딩 할 필요가 없다.
따라서 더 빠르고 다이나믹한 웹 경험을 줄 수 있다.
-취업 등에서 요구되는 시장이 크다.
⚛️2.강의 대상
처음으로 리액트를 배우실 분.
프론트 앤드 개발자 과정을 진행 하실 분
자바스크립트의 기본 지식을 가지신 분
– 예) 데이터형,변수, 함수, 루프, 배열 관련 map 등의 지식
⚛️3. 강좌 관련 특징
실제 사용 가능한 프로젝트 기반으로 진행하는 강좌입니다.
프로젝트를 만들면서 이 강좌는 프론트 앤드와 백앤드 모두를 다룹니다. 여러분의 프로젝트인
일정관리 앱 제작을 통해 프론트앤드의 앱을 제작하면서
리액트의 컴포넌트, state, react hook 처리를 공부하게 되며, 또 JSON 서버를 사용하여 일정관리의 데이터를
프론트앤드 UI와 연결해 데이터의 업데이트, 추가, 삭제 작업을 하게 됩니다.
이 과정을 통해 리액트를 통한 프론트앤드와 백앤드 작업의 경험을 가지게 됩니다.
강좌 교육과정 소개 (COURSE CURRICULUM)
오리엔테이션과 리액트 설치 | |||
1 강의 안내와 리액트 기본 개념🈚 | 00:09:00 | ||
환경 구성과 리액트 앱 설치🈚 | 00:09:00 | ||
3 – 1. 리액트 폴더와 JSX🈚 | 00:08:00 | ||
리액트 프론트 앤드 작업 | |||
3-2. 리액트의 콤포넌트와 Props | 00:12:00 | ||
4. 기본 CSS적용시키기 | 00:07:00 | ||
5.리액트 콤퍼넌트와 이벤트 처리 | 00:11:00 | ||
6. 리액트 컴포넌트와 State 과 useState Hook | 00:16:00 | ||
7.리액트 아이콘 이벤트 처리 | 00:11:00 | ||
8.리액트 조건 스타일링 처리와 입력 기능 | 00:00:00 | ||
9.리액트 콤포넌트 콘트롤 | 00:11:00 | ||
10.리액트 프론트앤드 작업 마무리 | 00:10:00 | ||
리액트 서버쪽 작업 | |||
1.리액트 프로덕션 빌드 만들기 | 00:05:00 | ||
2.JSON 서버 설치와 useEffect 와 Fetch 이용 일정 데이터 가져오기 | 00:14:00 | ||
3.리액트 서버쪽 작업 – 데이터 추가 삭제 변경 | 00:15:00 | ||
4. 리액트 라우팅 작업과 프로젝트 마무리 | 00:16:00 |