생활코딩 – 리액트(React)
생활코딩의 리액트(React) 강좌입니다.
15명의 학생들이 수강
샵투는 생활코딩님의 허락을 얻어 생활코딩의 youtube 동영상을 강좌로 구성했습니다.
생활코딩은 일반인에게 프로그래밍을 알려주는 활동입니다.
더 많은 정보를 원하시면 http://opentutorials.org/course/1 를 방문해주세요.
생활코딩님의 CLC 라이선스 규정은 Creative Commons 저작자 표시 2.0 문서를 참고해주세요.
*이 강좌는 생활코딩님이 제휴관계나 강사로서 직접 샵투스쿨에 강의로서 올린것이 아니므로
해당 강좌의 평가 기능과 강의 후기 작성 기능이 비활성화 되어 있습니다.학습 중 질문의 경우
생활코딩 사이트나 샵투스쿨의 회원분들께서 도움 요청 하시기 바랍니다.
1. 강좌 소개
리액트(React)는 프론트엔드를 위한 자바스크립트 라이브러리입니다.페이스북과 인디 개발자와 커뮤니티에서 개발 유지되며, 모바일 어플리케이션이나 웹 개발에 있어서 사용됩니다.
이 수업은 아래와 같은 웹애플리케이션을 React를 이용해서 완성하는 것이 큰 목표입니다.
https://egoing.github.io/react-tutori…
이 수업에서는 아래와 같은 내용을 다루고 있습니다.
- 리액트를 사용하는 이유
- 리액트의 컴포넌트를 만드는 법
- 리액트와 불변(immutable)의 관계
아래 내용은 다루고 있지 않습니다.
- 데이터베이스
- 서버와 연동
- redux
2.강의 대상
- 초보자
- 선수 과정으로 WEB2 JavaScript 를 들으신분 (추천)
- 웹개발자
3. 강좌 관련 특징
입문자를 위한 개념을 상세히 설명하여 리액트의 개념을
탄탄히 잡으시려는 분에게 추천드립니다.
강좌 교육과정 소개 (COURSE CURRICULUM)
| 섹션 1. 오리엔테이션 | |||
| 수업소개 | 00:09:00 | ||
| 공부 전략 | 00:02:00 | ||
| 섹션 2. React.js 개발환경 | |||
| 개발환경의 종류 | 00:04:00 | ||
| npm을 이용해서 create react app 설치 | 00:05:00 | ||
| create react app을 이용해서 개발환경구축 | 00:04:00 | ||
| 샘플 앱 실행 하기 | 00:03:00 | ||
| JavaScript 코딩하는 법 | 00:07:00 | ||
| CSS 코딩하는 법 | 00:03:00 | ||
| 배포하는 법 | 00:06:00 | ||
| 섹션 3. React의 핵심 - 컴포넌트(Component) 제작 | |||
| 리액트가 없다면 | 00:05:00 | ||
| 컴포넌트 만들기 1 | 00:07:00 | ||
| 컴포넌트 만들기 2 | 00:04:00 | ||
| 프롭스(props) 의 사용방법 | 00:08:00 | ||
| React의 컴포넌트 개발 도구 | 00:06:00 | ||
| 섹션 4. State | |||
| 컴포넌트 파일로 분리하기 | 00:07:00 | ||
| State 소개 | 00:04:00 | ||
| State 사용 | 00:06:00 | ||
| key | 00:07:00 | ||
| 섹션 5. 리액트의 이벤트 | |||
| 이벤트 state props 그리고 render 함수 | 00:10:00 | ||
| 이벤트 설치 | 00:07:00 | ||
| 이벤트에서 state 변경하기 | 00:04:00 | ||
| 이벤트 bind 함수 이해하기 | 00:06:00 | ||
| 이벤트 setState 함수 이해하기 | 00:03:00 | ||
| 컴포넌트 이벤트 만들기 1 | 00:07:00 | ||
| 컴포넌트 이벤트 만들기 2 | 00:04:00 | ||
| 컴포넌트 이벤트 만들기 3 | 00:13:00 | ||
| 섹션 6. 베이스 캠프 | |||
| 베이스 캠프 | 00:09:00 | ||
| 섹션 7. Create 기능 구현 | |||
| 소개 | 00:07:00 | ||
| mode 변경 기능 | 00:07:00 | ||
| mode 전환 기능 | 00:06:00 | ||
| form | 00:05:00 | ||
| onSubmit 이벤트 | 00:06:00 | ||
| Content 변경 | 00:09:00 | ||
| ShouldComponentUpdate 소개 | 00:15:00 | ||
| Immutable (불변) | 00:09:00 | ||
| 섹션 8. Update 기능 구현 | |||
| update 구현 | 00:07:00 | ||
| form 작업 | 00:10:00 | ||
| state 변경 | 00:11:00 | ||
| delete 구현 | 00:07:00 | ||
| 섹션 9. 마무리 | |||
| 수업을 마치며 | 00:07:00 | ||