Thumbnail
개발 · 프로그래밍 프론트엔드

오픈 소스 자바스크립트 React 프로그래밍 입문 Part.1 대시보드

(4.4)
50개의 수강평 ∙  60,069명의 수강생

38,500원

지식공유자: 유용한IT학습
총 23개 수업 (6시간 5분)
수강기한: 
12개월
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변: 미제공
폴더에 추가 공유

초급자를 위해 준비한
[웹 개발, 프론트엔드] 강의입니다.

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

✍️
이런 걸
배워요!
리액트를 사용한 웹 개발에 대한 기본 개념
리액트의 컴포넌트를 만드는 여러가지 방법
닷넷코어를 사용하여 백엔드 API를 만드는 방법
하나의 완성된 데이터베이스 처리 웹앱 만들기

페이스북에서 만든 오픈 소스 자바스크립트
React 프로그래밍 입문 (1)

📢 알려드립니다

  • 본 강의는 지식공유자의 질의응답을 제공하지 않는 강의입니다. 수강에 참고해 주시기 바랍니다.
  • 해당 강의는 2020년 9월에 만들어진 강의로 최신 React와 차이가 있을 수 있습니다.
  • 녹음 환경의 문제로 약간의 화이트 노이즈가 발생하고 있습니다.

리액트로 하는 웹개발, 함께 시작해볼까요? 💁‍♀️

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


학습 목표 ✍

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

함께 코드를 작성하면서 진행되는 실습

리액트로 만들어보는 웹앱


연관 강의 

오픈 소스 자바스크립트 React 프로그래밍 입문

오픈 소스 자바스크립트 React 프로그래밍 입문 Part.1 현재 강의
리액트(React)를 사용한 웹 개발에 대한 기본 개념

오픈 소스 자바스크립트 React 프로그래밍 입문 Part.2
리액트의 컴포넌트를 만드는 여러가지 방법

오픈 소스 자바스크립트 React 프로그래밍 입문 Part.3
하나의 완성된 데이터베이스 처리 웹앱 제작


이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
리액트를 사용한 웹 개발을 배우고 싶으신 분
리액트와 닷넷코어 기반 풀스택 개발을 하고 싶은 분
📚
선수 지식,
필요할까요?
자바스크립트

안녕하세요
유용한IT학습 입니다.
유용한IT학습의 썸네일

유용한 IT 강의를 통해 여러분의 성장을 돕겠습니다.

커리큘럼 총 23 개 ˙ 6시간 5분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의 자료
강의 자료
섹션 1. 리액트 프로그래밍 입문
리액트 프로그래밍 입문 강의 시작 미리보기 14:21 리액트 개발 환경 구축 및 클라우드 기반 데브옵스 설정하는 전체적인 절차에 대한 데모 미리보기 01:22:21 Windows 환경에서 리액트 개발 환경 구축 및 리액트 프로젝트 생성하는 2가지 방법 설명 미리보기 32:38
두 가지 방식으로 리액트 프로젝트를 만드는 방법 설명(create react app과 dotnet new react) 13:28
참고_ReactDemo_프로젝트 생성 후 로컬 테스트 후 GitHub 리포지토리에 게시하는 전체 절차 설명 06:51
Temp 폴더에 dotnet new react 명령으로 풀스택 프로젝트 생성 및 실행 그리고 여러 가지 사용법 데모 20:31
Create React App으로 만든 리액트 프로젝트의 구조 간단히 살펴보기 05:51
현재 강의에서 만들어지는 최종 소스인 ReactMemo와 BookApp.React 프로젝트 다운 및 설치 그리고 실행하기 데모 13:32
순수 HTML 파일에 리액트 적용하기 소개 06:43
HelloReact_순수한 HTML 파일에서 리액트 헬로월드 예제 만들고 실행해보기 18:22
HelloReact_React Developer Tools 설치 및 createElement 함수에 속성 적용하기 16:16
HelloReact_중첩된 HTML 요소를 React_createElement 함수를 여러 번 사용해서 구현하기 09:00
HelloReact_Babel 라이브러리를 사용하여 JSX로 HTML 요소 작성하기 06:29
HelloReact_JSX에서 스타일 사용하기_className으로 CSS Class 적용하기 11:04
HelloReact_JSX 표현식 사용하기 12:30
HelloReact_함수 컴포넌트 만들고 JSX 표현식에 적용하기 12:18
HelloReact_Props_동적 개체인 props를 사용하여 컴포넌트에 전달된 속성 이름과 속성 값을 받아 사용하기 19:34
HelloReact_구조 파괴 할당(구조 분해 할당)을 사용하여 props를 좀 더 간결하게 사용하기 09:22
HelloReact_JSX에서 조건(3항) 연산자 사용하기 11:15
HelloReact_함수 컴포넌트와 클래스 컴포넌트_클래스로 컴포넌트 만들기 07:38
HelloReact_state와 setState로 상태 데이터를 저장하고 onClick 이벤트 처리기에서 상태 데이터를 수정하기 15:48
HelloReact_컬렉션 형태의 데이터 출력 및 부트스트랩으로 UI 꾸미기 19:08
강의 게시일 : 2021년 10월 25일 (마지막 업데이트일 : 2021년 11월 22일)
수강평 총 50개
수강생분들이 직접 작성하신 수강평입니다.
4.4
50개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
PANDA K thumbnail
4
생각보다 세팅 무지 오래 걸리네요.. 원래 이런가요..?? Azure까지 사용하고...;; 다양한 경험을 보는 게 좋긴 합니다만 따라하기엔 약간 무리...ㅠㅠ
2023-01-13
sort print thumbnail
5
환경설정 부분만 잘 견디고 넘어가면 좋은강의라고 생각합니다
2023-01-15
할수있다 thumbnail
5
감사합니다 잘 들었습니다
2023-01-11
조재언 thumbnail
5
리액트의 기본 뿐만 아니라 백엔드 기본까지 가져갈 수 있는 강의
2023-01-23
980513k thumbnail
5
흥미롭습니다!
2022-02-07
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!