[HD]페이스북에서 만든 오픈 소스 자바스크립트 React(리액트) 프로그래밍 입문 Part.1

과정 소개

리액트(React)는 페이스북에서 만든 오픈 소스 자바스크립트 라이브러리입니다. 자바스크립트를 사용하여 컴포넌트 기반으로 UI를 만들 수 있습니다.

SPA(Single Page Application)을 만드는데 최적화된 현재 가장 인기있는 프런트엔드 개발 라이브러리인 리액트를 사용하여 웹 개발을 하는데 필요한 모든 구성 요소를 학습합니다.

강의 대상

리액트(React)를 사용한 웹 개발에 대한 기본 개념을 학습합니다.

리액트의 컴포넌트를 만드는 여러가지 방법을 학습합니다.

닷넷코어를 사용하여 백엔드 API를 만드는 방법을 학습합니다.

하나의 완성된 데이터베이스 처리 웹앱을 만들어봅니다.

강의 목표

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

학습 내용

1. 섹션 1
   1. 리액트 프로그래밍 입문 강의 시작
   2. 리액트 개발 환경 구축 및 클라우드 기반 데브옵스 설정하는 전체적인 절차에 대한 데모
   3. Windows 환경에서 리액트 개발 환경 구축 및 리액트 프로젝트 생성하는 2가지 방법 설명
   4. 두 가지 방식으로 리액트 프로젝트를 만드는 방법 설명(create react app과 dotnet new react)
2. 섹션 2
   1. 참고_ReactDemo_프로젝트 생성 후 로컬 테스트 후 GitHub 리포지토리에 게시하는 전체 절차 설명
   2. Temp 폴더에 dotnet new react 명령으로 풀스택 프로젝트 생성 및 실행 그리고 여러 가지 사용법 데모
   3. Create React App으로 만든 리액트 프로젝트의 구조 간단히 살펴보기
   4. 현재 강의에서 만들어지는 최종 소스인 ReactMemo와 BookApp.React 프로젝트 다운 및 설치 그리고 실행하기 데모
3. 섹션 3
   1. 순수 HTML 파일에 리액트 적용하기 소개
   2. HelloReact_순수한 HTML 파일에서 리액트 헬로월드 예제 만들고 실행해보기
   3. HelloReact_React Developer Tools 설치 및 createElement 함수에 속성 적용하기
   4. HelloReact_중첩된 HTML 요소를 React_createElement 함수를 여러 번 사용해서 구현하기
4. 섹션 4
   1. HelloReact_Babel 라이브러리를 사용하여 JSX로 HTML 요소 작성하기
   2. HelloReact_JSX에서 스타일 사용하기_className으로 CSS Class 적용하기
   3. HelloReact_JSX 표현식 사용하기
   4. HelloReact_함수 컴포넌트 만들고 JSX 표현식에 적용하기
5. 섹션 5
   1. HelloReact_Props_동적 개체인 props를 사용하여 컴포넌트에 전달된 속성 이름과 속성 값을 받아 사용하기
   2. HelloReact_구조 파괴 할당(구조 분해 할당)을 사용하여 props를 좀 더 간결하게 사용하기
   3. HelloReact_JSX에서 조건(3항) 연산자 사용하기
   4. HelloReact_함수 컴포넌트와 클래스 컴포넌트_클래스로 컴포넌트 만들기
6. 섹션 6
   1. HelloReact_state와 setState로 상태 데이터를 저장하고 onClick 이벤트 처리기에서 상태 데이터를 수정하기
   2. HelloReact_컬렉션 형태의 데이터 출력 및 부트스트랩으로 UI 꾸미기

교강사

훈련 비용

과정 후기