ALL FREEPASS | C# | ASP.NET | ASP.NET Core | MVC Framework | WPF | JAVA | I/O Thread | JSP | MVC JSP | Spring / SpringBoot
Python | Data Analysis | Android / Kotlin | Android Pro | Unity | C / C++ | Algorithm | Data Structure | Design Pattern | Console Game | ASP/PHP | Git / IDE
HTML5 / CSS3 | JavaScript | jQuery | JSON / Ajax / DOM | Node.js / React / Vue.js | Angular | Server | SQL | Linux | Oracle | Notion | FREE ( 무료 강좌 )
React(리액트) SPA 프로그래밍 Start - 초급 입문편
1 01_01_리액트 프로그래밍 입문 강의 시작 14:20     泥⑤??뚯씪?ㅼ슫 동영상다운
2 01_02_리액트 개발 환경 구축 및 클라우드 기반 데브옵스 설정하는 전체적인 절차에 대한 데모 82:21     동영상다운
3 01_03_Windows 환경에서 리액트 개발 환경 구축 및 리액트 프로젝트 생성하는 2가지 방법 설명 32:37     동영상다운
4 01_04_두 가지 방식으로 리액트 프로젝트를 만드는 방법 설명(create react app과 dotnet new react) 13:27     동영상다운
5 01_05_참고_ReactDemo_프로젝트 생성 후 로컬 테스트 후 GitHub 리포지토리에 게시하는 전체 절차 설명 06:50     동영상다운
6 01_06_Temp 폴더에 dotnet new react 명령으로 풀스택 프로젝트 생성 및 실행 그리고 여러 가지 사용법 데모 20:31     동영상다운
7 01_07_Create React App으로 만든 리액트 프로젝트의 구조 간단히 살펴보기 05:51     동영상다운
8 01_08_현재 강의에서 만들어지는 최종 소스인 ReactMemo와 BookApp.React 프로젝트 다운 및 설치 그리고 실행하기 데모 13:32     동영상다운
9 02_00_순수 HTML 파일에 리액트 적용하기 소개 06:42     동영상다운
10 02_01_HelloReact_순수한 HTML 파일에서 리액트 헬로월드 예제 만들고 실행해보기 18:21     동영상다운
11 02_02_HelloReact_React Developer Tools 설치 및 createElement 함수에 속성 적용하기 16:15     동영상다운
12 02_03_HelloReact_중첩된 HTML 요소를 React_createElement 함수를 여러 번 사용해서 구현하기 09:00     동영상다운
13 02_04_HelloReact_Babel 라이브러리를 사용하여 JSX로 HTML 요소 작성하기 06:29     동영상다운
14 02_05_HelloReact_JSX에서 스타일 사용하기_className으로 CSS Class 적용하기 11:03     동영상다운
15 02_06_HelloReact_JSX 표현식 사용하기 12:29     동영상다운
16 02_07_HelloReact_함수형 컴포넌트 만들고 JSX 표현식에 적용하기 12:18     동영상다운
17 02_08_HelloReact_Props_동적 개체인 props를 사용하여 컴포넌트에 전달된 속성 이름과 속성 값을 받아 사용하기 19:34     동영상다운
18 02_09_HelloReact_구조 파괴 할당(구조 분해 할당)을 사용하여 props를 좀 더 간결하게 사용하기 09:22     동영상다운
19 02_10_HelloReact_JSX에서 조건(3항) 연산자 사용하기 11:14     동영상다운
20 02_11_HelloReact_함수형 컴포넌트와 클래스형 컴포넌트_클래스로 컴포넌트 만들기 07:37     동영상다운
21 02_12_HelloReact_state와 setState로 상태 데이터를 저장하고 onClick 이벤트 처리기에서 상태 데이터를 수정하기 15:48     동영상다운
22 02_13_HelloReact_컬렉션 형태의 데이터 출력 및 부트스트랩으로 UI 꾸미기 19:08     동영상다운
23 03_01_SeeSharpGuide_01_create-react-app으로 프로젝트 만들고 기본 컴포넌트와 함수 컴포넌트를 사용하여 강좌 리스트 13:47     동영상다운
24 03_02_SeeSharpGuideTitle_className과 style을 사용하여 자식 컴포넌트에 스타일 적용하는 방법 설명 11:51     동영상다운
25 04_00_리액트 라우팅 경로 지정 이론 설명 03:21     동영상다운
26 04_01_About 컴포넌트 생성 및 라우팅에 추가 07:38     동영상다운
27 04_02_Contact 컴포넌트 생성 및 실행 데모 08:07     동영상다운
28 04_03_ContactDetails와 Copyright 서브 컴포넌트 생성 및 부모 컴포넌트에 포함해서 실행 12:41     동영상다운
29 04_04_TechList와 SiteList 서브 컴포넌트 생성 및 Home 컴포넌트에 포함해서 실행 16:38     동영상다운
30 04_05_About과 Contact 컴포넌트 UI 변경하기 15:52     동영상다운
31 05_01_버튼에 인라인 스타일 적용하기 01:49     동영상다운
32 05_02_React.Fragment를 사용하여 컴포넌트에서 동일 레벨의 여러 HTML 요소 표현하기 10:33     동영상다운
33 05_03_리액트 state 개체로 상태 관리하기 이론 03:30     동영상다운
34 05_04_StateDescription_state 개체를 사용하여 클래스 컴포넌트에서 title과 message 속성을 저장하고 출력하는 상태 관리 데모 04:57     동영상다운
35 05_05_리액트 컴포넌트 라이프 사이클 componentDidMount 01:13     동영상다운
36 06_01_리액트 onClick 이벤트 처리기 이론 02:23     동영상다운
37 06_02_OnClickEventHandler_onCLick 이벤트 처리기에서 클릭 이벤트를 처리하는 3가지 모양 정리 09:10     동영상다운
38 06_03_OneWayBinding_React에서 텍스트박스의 값을 읽어 sate 개체에 저장 후 다시 출력하는 초간단 양방향 바인딩 구현하기 12:58     동영상다운
39 07_00_초간단 인-메모리 TodoList 만들기 데모 29:27     동영상다운
40 08_01_FunctionStateDemo_useState()를 사용하여 함수형 컴포넌트에서 상태 관리 07:01     동영상다운
41 08_02_useEffect Hook를 사용하여 페이지 로드할 때 필요한 기능 수행 09:01     동영상다운
42 08_03_useEffect를 사용하여 페이지 로드할 때 fetch 함수로 Web API 호출하기 06:39     동영상다운
43 09_01_FetchApiPractice_fetch api를 사용하여 Web API를 호출하여 JSON 데이터 출력하기 15:51     동영상다운
44 09_02_TextBoxOnChangeEventHandler_텍스트박스의 change 이벤트에서 텍스트박스의 값을 가져와 상태 데이터에 저장하기 12:22     동영상다운
45 10_00_JSON 데이터를 주고 받을 수 있도록 닷넷코어 백엔드 기술을 사용하여 Web API 만들기 시작 데모 12:57     동영상다운
46 10_01_BookApp.React 프로젝트 생성 및 SQL Server 데이터베이스 프로젝트 추가 후 Books 테이블 생성 23:35     동영상다운
47 10_02_Books 테이블과 일대일로 매핑되는 Book 모델 클래스 생성 14:20     동영상다운
48 10_03_모델 클래스를 기본으로 리포지토리 인터페이스와 클래스 코드 구현 34:23     동영상다운
49 10_04_테스트 프로젝트 생성 및 5개 메서드에 대한 테스트 코드 작성 19:59     동영상다운
50 10_05_리액트에서 사용될 REST 서비스를 위한 Web API 프로젝트 생성 및 종속성 주입 후 GET 메서드 테스트 24:02     동영상다운
51 10_06_Web API 상세, 입력, 수정, 삭제 메서드 구현 16:57     동영상다운
52 10_07_React 프로젝트에서 CORS를 설정한 Web API 프로젝트를 fetch 함수로 호출 테스트 13:32     동영상다운
53 10_08_ASP.NET Core Web API를 사용하여 백엔드 파트 구현 완료 08:47     동영상다운
54 11_01_책 리스트를 출력하는 BooksIndex 클래스 컴포넌트 생성 및 기본 모양 테스트 18:34     동영상다운
55 11_02_fetch 함수를 사용하여 Web API 호출 후 JSON 데이터를 리스트 페이지에 출력하기 11:20     동영상다운
56 11_03_Promise 기반 HTTP 클라이언트인 axios를 사용하여 Web API 호출하기 11:12     동영상다운
57 11_04_Create, Edit, Delete 버튼 및 클릭 이벤트 처리기 생성 20:21     동영상다운
58 11_05_라우팅에 Index, Create, Edit, Delete 컴포넌트 등록 및 history 개체를 사용하여 이동 기능 구현 14:57     동영상다운
59 11_06_부트스트랩으로 Create 페이지에 대한 UI 작성 및 axios의 post 함수 호출로 입력 기능 구현 완료 22:48     동영상다운
60 11_07_넘어온 id 값에 해당하는 자료를 표시한 후 수정 페이지 기능 구현 그리고 삭제 컴포넌트 기능 구현 완료 20:26     동영상다운
61 11_08_보강_화살표 함수(람다 식)로 이벤트 핸들러 바인딩_강의 완료 04:18     동영상다운
수강기간 : 2개월 / 수강료 : \220,000 원

과정소개

리액트(React)는 페이스북에서 만든 오픈 소스 자바스크립트 라이브러리입니다. 자바스크립트를 사용하여 컴포넌트 기반으로 UI를 만들 수 있습니다.
SPA(Single Page Application)을 만드는데 최적화된 현재 가장 인기있는 프런트엔드 개발 라이브러리인 리액트를 사용하여 웹 개발을 하는데 필요한 모든 구성 요소를 학습합니다.


학습목표

리액트(React)를 사용한 웹 개발에 대한 기본 개념을 학습합니다.
리액트의 컴포넌트를 만드는 여러가지 방법을 학습합니다.
닷넷코어를 사용하여 백엔드 API를 만드는 방법을 학습합니다.
하나의 완성된 데이터베이스 처리 웹앱을 만들어봅니다."


교육대상

리액트와 닷넷코어를 기반으로 풀스택으로 웹 개발을 하고자하는 개발자


총 차시:61


총 강의 시간: 14시간 34분 06초
VIP Freepass 전과정 자유이용권 혜택보기