풀스택 개발자를 위한 React 프로그래밍 입문

Description

[리액트(React) 프레임워크에 입문하기 위한 최고의 강좌]

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

본 강의는 SPA(Single Page Application)를 만드는데 최적화된 현재 가장 인기있는 프런트엔드 개발 라이브러리인 리액트(React) 학습에 성공적으로 입문할 수 있도록 기획된 강의입니다.

본 강의에서는 다음과 같은 내용들이 다뤄집니다.

<강의 목차>

• 리액트 프로그래밍 입문 강의 시작

• 리액트 개발 환경 구축 및 클라우드 기반 데브옵스 설정하는 전체적인 절차에 대한 데모

• Windows 환경에서 리액트 개발 환경 구축 및 리액트 프로젝트 생성하는 2가지 방법 설명

• 두 가지 방식으로 리액트 프로젝트를 만드는 방법 설명(create react app과 dotnet new react)

• (참고) ReactDemo 프로젝트 생성 후 로컬 테스트 후 GitHub 리포지토리에 게시하는 전체 절차 설명

• Temp 폴더에 dotnet new react 명령으로 풀스택 프로젝트 생성 및 실행 그리고 여러 가지 사용법 데모

• Create React App으로 만든 리액트 프로젝트의 구조 간단히 살펴보기

• 현재 강의에서 만들어지는 최종 소스인 ReactMemo와 BookApp.React 프로젝트 다운 및 설치 그리고 실행하기 데모

• 순수 HTML 파일에 리액트 적용하기 소개

• HelloReact 순수한 HTML 파일에서 리액트 헬로월드 예제 만들고 실행해보기

• HelloReact React Developer Tools 설치 및 createElement 함수에 속성 적용하기

• HelloReact 중첩된 HTML 요소를 React createElement 함수를 여러 번 사용해서 구현하기

• HelloReact Babel 라이브러리를 사용하여 JSX로 HTML 요소 작성하기

• HelloReact JSX에서 스타일 사용하기 className으로 CSS Class 적용하기

• HelloReact JSX 표현식 사용하기

• HelloReact 함수 컴포넌트 만들고 JSX 표현식에 적용하기

• HelloReact Props 동적 개체인 props를 사용하여 컴포넌트에 전달된 속성 이름과 속성 값을 받아 사용하기

• HelloReact 구조 파괴 할당(구조 분해 할당)을 사용하여 props를 좀 더 간결하게 사용하기

• HelloReact JSX에서 조건(3항) 연산자 사용하기

• HelloReact 함수 컴포넌트와 클래스 컴포넌트 클래스로 컴포넌트 만들기

• HelloReact state와 setState로 상태 데이터를 저장하고 onClick 이벤트 처리기에서 상태 데이터를 수정하기

• HelloReact 컬렉션 형태의 데이터 출력 및 부트스트랩으로 UI 꾸미기

• SeeSharpGuide 01 create react app으로 프로젝트 만들고 기본 컴포넌트와 함수 컴포넌트를 사용하여 강좌 리스트

• SeeSharpGuideTitle className과 style을 사용하여 자식 컴포넌트에 스타일 적용하는 방법 설명

• 리액트 라우팅 경로 지정 이론 설명

• About 컴포넌트 생성 및 라우팅에 추가

• Contact 컴포넌트 생성 및 실행 데모

• ContactDetails와 Copyright 서브 컴포넌트 생성 및 부모 컴포넌트에 포함해서 실행

• TechList와 SiteList 서브 컴포넌트 생성 및 Home 컴포넌트에 포함해서 실행

• About과 Contact 컴포넌트 UI 변경하기

• 버튼에 인라인 스타일 적용하기

• React.Fragment를 사용하여 컴포넌트에서 동일 레벨의 여러 HTML 요소 표현하기

• 리액트 state 개체로 상태 관리하기 이론

• StateDescription state 개체를 사용하여 클래스 컴포넌트에서 title과 message 속성을 저장하고 출력하는 상태 관리 데모

• 리액트 컴포넌트 라이프 사이클 componentDidMount

• 리액트 onClick 이벤트 처리기 이론

• OnClickEventHandler onCLick 이벤트 처리기에서 클릭 이벤트를 처리하는 3가지 모양 정리

• OneWayBinding React에서 텍스트박스의 값을 읽어 sate 개체에 저장 후 다시 출력하는 초간단 양방향 바인딩 구현하기

• 초간단 인메모리 TodoList 만들기 데모

최종적으로, 하나의 완성된 데이터베이스 처리 웹앱을 직접 만들어보는 실습을 합니다.

리액트(React)를 한 번도 사용해보지 않으신 분, 리액트(React)에 입문하고 싶으신 분, 리액트(React)를 다뤄봤지만 좀 더 심도 깊은 이해와 설명이 필요하신 분들에게 이 강의를 추천드립니다.

TAKE THIS COURSE