[HD]페이스북에서 만든 오픈 소스 자바스크립트 React(리액트) 프로그래밍 입문 Part.1
여기를 클릭하면, 샘플강의가 재생됩니다.
박용준 강사
강좌코드 : la_H090115
박용준 강사
- - 인터넷교육방송 팀장
- - 다수의 직업학교 C#/ASP.NET 프로그래밍 강사 역임
- - 다수의 IT학원 닷넷 전문 강사 역임
[HD]페이스북에서 만든 오픈 소스 자바스크립트 React(리액트) 프로그래밍 입문 Part.1
담당강사 : 박용준
| 강의구성 | 총 22강좌 (강의시간 : 총 ) | 수강기간 | 30일 |
|---|---|---|---|
| 강의형식 | 동영상 | 증빙서류 |
이 강좌의 80% 이상 수강 시 출력이 가능합니다. |
- 과정소개
- 리액트(React)는 페이스북에서 만든 오픈 소스 자바스크립트 라이브러리입니다. 자바스크립트를 사용하여 컴포넌트 기반으로 UI를 만들 수 있습니다. SPA(Single Page Application)을 만드는데 최적화된 현재 가장 인기있는 프런트엔드 개발 라이브러리인 리액트를 사용하여 웹 개발을 하는데 필요한 모든 구성 요소를 학습합니다.
- 학습목표
- 리액트(React)를 사용한 웹 개발에 대한 기본 개념을 학습합니다. 리액트의 컴포넌트를 만드는 여러가지 방법을 학습합니다. 닷넷코어를 사용하여 백엔드 API를 만드는 방법을 학습합니다. 하나의 완성된 데이터베이스 처리 웹앱을 만들어봅니다.
- 교육대상
- 리액트와 닷넷코어를 기반으로 풀스택으로 웹 개발을 하고자하는 개발자
차시별 학습목표
- 01. 1. 리액트 소개 2. React 소개 3. SPA 소개
- 02. 1.리액트전체 환경 데모 2. Visual Studio Code 설치 3. DevOps 구축 데모
- 03. 1. 리액트 개발환경구축 2. Visual Studio 설치 3. Visual Studio Code 설치
- 04. 1. 리액트 프로젝트 생성 2. CLI 환경으로 프로젝트 생성 3. DotNet CLI로 풀스택 구성
- 05. 1. 리액트 데모 소스 생성 2. GitHub에 소스 게시 3. React 프로젝트
- 06. 1. 리액트 프로젝트 2. DotNet CLI로 리액트 프로젝트 생성 3. 프로젝트 생성 및 실행
- 07. 1. 리액트 프로젝트 2. Create React App 3. CLI
- 08. 1. 리액트 프로젝트 2. ReactMemo 강의소스 3. 프로젝트 생성 및 실행
- 09. 1. React 적용 2. Babel 소개 3. 리액트 컴포넌트
- 10. 1. React 적용 2. Babel 소개 3. 리액트 HelloWorld
- 11. 1. React 적용 2. createElement 3. React Developer Tools
- 12. 1. HelloReact 2. HTML중첩 3. createElement
- 13. 1. Babel 소개 2. 바벨 적용 3. JSX
- 14. 1. SX 2. 스타일 3. className
- 15. 1. Babel 소개 2. 바벨 적용 3. JSX
- 16. 1. 컴포넌트 2. 함수컴포넌트 3. JSX
- 17. 1. 리액트 컴포넌트 2. Props 3. 컴포넌트 매개 변수
- 18. 1. props 2. 구조파괴할당 3. 구조분해할당
- 19. 1. JSX 2. 조건연산자 3. 3항연산자
- 20. 1. 컴포넌트 2. 클래스 3. 함수
- 21. 1. state 2. setState 3. onClick
- 22. 1. 컬렉션 2. map 3. 부트스트랩
- 참고사항
- - 수강 기간 중 언제든지 반복 수강이 가능합니다.
- - 수강 여부 : 해당 차시의 80%를 수강하면 (회색) 배경으로 표시됩니다.
- - 수강 신청 완료 후 수강할 수 있습니다.
- - 즐겨찾기 한 강좌는 MY Class에서 확인할 수 있습니다.
- 강좌 리스트
- 01. 리액트 프로그래밍 입문 강의 시작 [14:20]
- 02. 리액트 개발 환경 구축 및 클라우드 기반 데브옵스 설정하는 전체적인 절차에 대한 데모 [82:21]
- 03. Windows 환경에서 리액트 개발 환경 구축 및 리액트 프로젝트 생성하는 2가지 방법 설명 [32:37]
- 04. 두 가지 방식으로 리액트 프로젝트를 만드는 방법 설명(create react app과 dotnet new react) [13:27]
- 05. 참고_ReactDemo_프로젝트 생성 후 로컬 테스트 후 GitHub 리포지토리에 게시하는 전체 절차 설명 [06:50]
- 06. Temp 폴더에 dotnet new react 명령으로 풀스택 프로젝트 생성 및 실행 그리고 여러 가지 사용법 데모 [20:31]
- 07. Create React App으로 만든 리액트 프로젝트의 구조 간단히 살펴보기 [05:51]
- 08. 현재 강의에서 만들어지는 최종 소스인 ReactMemo와 BookApp.React 프로젝트 다운 및 설치 그리고 실행하기 데모 [13:32]
- 09. 순수 HTML 파일에 리액트 적용하기 소개 [06:42]
- 10. HelloReact_순수한 HTML 파일에서 리액트 헬로월드 예제 만들고 실행해보기 [18:21]
- 11. HelloReact_React Developer Tools 설치 및 createElement 함수에 속성 적용하기 [16:15]
- 12. HelloReact_중첩된 HTML 요소를 React_createElement 함수를 여러 번 사용해서 구현하기 [09:00]
- 13. HelloReact_Babel 라이브러리를 사용하여 JSX로 HTML 요소 작성하기 [06:29]
- 14. HelloReact_JSX에서 스타일 사용하기_className으로 CSS Class 적용하기 [11:03]
- 15. HelloReact_JSX 표현식 사용하기 [12:29]
- 16. HelloReact_함수 컴포넌트 만들고 JSX 표현식에 적용하기 [12:18]
- 17. HelloReact_Props_동적 개체인 props를 사용하여 컴포넌트에 전달된 속성 이름과 속성 값을 받아 사용하기 [19:34]
- 18. HelloReact_구조 파괴 할당(구조 분해 할당)을 사용하여 props를 좀 더 간결하게 사용하기 [09:22]
- 19. HelloReact_JSX에서 조건(3항) 연산자 사용하기 [11:14]
- 20. HelloReact_함수 컴포넌트와 클래스 컴포넌트_클래스로 컴포넌트 만들기 [07:37]
- 21. HelloReact_state와 setState로 상태 데이터를 저장하고 onClick 이벤트 처리기에서 상태 데이터를 수정하기 [15:48]
- 22. HelloReact_컬렉션 형태의 데이터 출력 및 부트스트랩으로 UI 꾸미기 [19:08]