입문자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.
[프론트엔드, 웹 개발] 강의입니다.
자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다.
✍️
이런 걸
배워요!
이런 걸
배워요!
자바스크립트 기초 문법
CSS 기초 문법
리액트 기초 탄탄하게 다지기
미니 프로젝트를 통한 웹애플리케이션 개발
깔끔한 강의자료, 꼼꼼한 설명으로
쉽게 배우는 리액트 강의입니다. 👨🏫
리액트의 세계로
초대합니다 💫
리액트는 메타에서 만든 오픈소스 자바스크립트 UI 라이브러리입니다.
현재 웹 애플리케이션 개발에 가장 많이 사용되고 있으며
빠른 업데이트와 렌더링 속도, 컴포넌트 기반의 구조 등 많은 장점을 갖고 있어요.
강의의 특징을
알려드려요 🔎
- JavaScript 기초 문법을 익힙니다.
- CSS의 개념과 자주 사용되는 속성을 배웁니다.
- 리액트에 대한 기초 개념을 쌓고 사용법을 익힙니다.
- 미니 프로젝트를 통해 실제 리액트 애플리케이션을 개발합니다.
- 입문자분들을 위해 HTML, CSS, JS의 기초 내용을 포함하고 있습니다.
강의를 책으로도
만나볼 수 있어요! 📖
강의를 들은 후 수강생의 변화 🙋♂️
JS 기초 문법에 대해
이해할 수 있어요!
자주 사용되는 CSS를
이해할 수 있어요!
리액트의 기초를
잘 다질 수 있어요!
실전 프로젝트 경험을
쌓을 수 있습니다.
학습 내용 엿보기 📚
섹션 0 [준비하기]
- HTML, CSS의 개념과 자바스크립트 기초 문법에 대해 배우고, 실습을 위한 환경을 세팅합니다.
섹션 1, 2 [리액트 소개, 시작하기]
- 리액트에 대한 소개, 장단점에 대해 학습합니다.
- 리액트를 직접 연동하는 방법과 create-react-app에 대해 학습합니다.
섹션 3 [JSX]
- JSX의 정의와 역할, 그리고 사용법에 대해 학습합니다.
섹션 4 [Rendering Elements]
- 리액트 엘리먼트의 정의와 특징 및 렌더링 방법에 대해 학습합니다.
섹션 5 [Components and Props]
- 리액트 컴포넌트와 Props의 정의 및 사용법에 대해 학습합니다.
섹션 6 [State and Lifecycle]
- State의 개념과 컴포넌트 Lifecycle에 대해 학습합니다.
섹션 7 [Hooks]
- 리액트 훅의 개념과 대표적인 훅들 및 커스텀 훅에 대해 학습합니다.
섹션 8 [Handling Events]
- 리액트에서 이벤트를 다루는 방법에 대해 학습합니다.
섹션 9 [Conditional Rendering]
- 조건부 렌더링의 개념과 구현 방법에 대해 학습합니다.
섹션 10 [Lists and Keys]
- 리스트와 키의 개념과 실제 렌더링 방법에 대해 학습합니다.
섹션 11 [Forms]
- 다양한 Form과 제어 컴포넌트에 대해 학습합니다.
섹션 12 [Lifting State Up]
- Shared State와 컴포넌트간 State를 공유하는 방법에 대해 학습합니다.
섹션 13 [Composition vs Inheritance]
- 다양한 컴포넌트 합성 방법과 상속의 의미에 대해 학습합니다.
섹션 14 [Context]
- Context의 개념과 Context API에 대해 학습합니다.
섹션 15 [Styling]
- 대표적인 CSS의 속성들과 styled-components에 대해 학습합니다.
섹션 16 [미니프로젝트]
- 지금까지 배운 내용들을 종합하여 미니 블로그를 함께 만들어봅니다.
예상 질문 Q&A 💬
Q. 자바스크립트를 잘 몰라도 들을 수 있는 강의인가요?
네! 자바스크립트에 대해 잘 모르시는 분이라고 해도, 강의에서 기초 문법을 포함하여 설명드리기 때문에 상관없이 들으실 수 있습니다.
Q. CSS에 대해 잘 몰라도 들을 수 있는 강의인가요?
네, CSS의 대표적인 속성들을 함께 다루기 때문에 잘 몰라도 강의를 수강하실 수 있습니다.
Q. 리액트를 배우면 뭐가 좋은가요?
리액트를 통해 내가 원하는 대로 웹 애플리케이션을 개발할 수 있습니다.
학습 관련자료 💡
3강 ~ 15강. 실습 소스코드
리액트 v17 소스코드
https://github.com/soaple/first-met-react-practice
리액트 v18 소스코드
https://github.com/soaple/first-met-react-practice-v18
16강. 미니 블로그 소스코드
지식공유자가 알려주는
강의 수강 꿀팁!
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
이런 분들께
추천드려요!
웹애플리케이션 개발에 관심있는 분
리액트를 처음 접하시는 분
안녕하세요
Inje Lee (소플) 입니다.
Inje Lee (소플) 입니다.
이인제(소플)
- Hottest Lab Inc. 대표
- 개발 경력
- 前 소플 Software Engineer
- 前 DDRAGON GAMES Manager
- 前 KAIST ISILAB Researcher
- 前 Lingofly Inc. CTO
- 前 NemusTech Co.,Ltd Senior Researcher
- 前 KTNET Assistant Manager
- 강의 콘텐츠
- 처음 만난 리액트
- 처음 만난 AWS
- 무료 강의 유튜브 채널 소플TV(https://www.youtube.com/c/소플TV) 운영
커리큘럼
총 56
개 ˙ 5시간 7분의 수업
이 강의는 영상이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 준비하기
5
강 ∙ 37분
HTML과 CSS
미리보기
07:38
JavaScript 소개 및 자료형
미리보기
10:52
JavaScript의 연산자
12:05
JavaScript의 함수
02:01
(실습) 개발환경 설정하기
04:41
섹션 1. 리액트 소개
2
강 ∙ 20분
섹션 2. 리액트 시작하기
2
강 ∙ 11분
(실습) 직접 리액트 연동하기
07:31
(실습) create-react-app
03:46
섹션 3. JSX
3
강 ∙ 13분
JSX의 정의와 역할
05:59
JSX의 장점 및 사용법
04:17
(실습) JSX 코드 작성해보기
03:13
섹션 4. Rendering Elements
3
강 ∙ 15분
Elements의 정의와 생김새
07:29
Elements의 특징 및 렌더링하기
05:58
(실습) 시계 만들기
01:53
섹션 5. Components and Props
5
강 ∙ 25분
Components와 Props의 정의
06:55
Props의 특징 및 사용법
05:33
Component 만들기 및 렌더링
04:51
Component 합성과 추출
03:58
(실습) 댓글 컴포넌트 만들기
04:24
섹션 6. State and Lifecycle
2
강 ∙ 12분
State와 Lifecycle의 정의
05:24
(실습) state 사용하기
06:38
섹션 7. Hooks
4
강 ∙ 29분
Hooks의 개념과 useState, useEffect
08:54
useMemo, useCallback, useRef
07:35
Hook의 규칙과 Custom Hook 만들기
08:17
(실습) Hooks 사용해보기
04:31
섹션 8. Handling Events
2
강 ∙ 9분
Event의 정의 및 Event 다루기
07:00
(실습) 클릭 이벤트 처리하기
02:57
섹션 9. Conditional Rendering
2
강 ∙ 12분
Conditional Rendering의 정의와 Inline Conditions
09:22
(실습) 로그인 여부를 나타내는 툴바 만들기
02:52
섹션 10. List and Keys
4
강 ∙ 10분
List와 Key
01:16
여러 개의 Component 렌더링 하기
03:06
List의 Key
03:12
(실습) 출석부 출력하기
02:33
섹션 11. Forms
3
강 ∙ 11분
Form과 Controlled Component
04:03
다양한 Forms
04:49
(실습) 사용자 정보 입력 받기
02:56
섹션 12. Lifting State Up
3
강 ∙ 10분
Shared State
01:56
하위 컴포넌트에서 State 공유하기
05:03
(실습) 섭씨온도와 화씨온도 표시하기
03:09
섹션 13. Composition vs Inheritance
2
강 ∙ 10분
Composition 방법과 Inheritance
08:10
(실습) Card 컴포넌트 만들기
02:44
섹션 14. Context
3
강 ∙ 17분
Context란?
06:42
Context API
07:23
(실습) Context를 사용하여 테마 변경 기능 만들기
03:45
섹션 15. Styling
5
강 ∙ 30분
CSS와 selector
06:13
레이아웃과 관련된 CSS 속성
08:50
Font와 관련된 CSS 속성, 기타 많이 사용하는 CSS 속성
05:43
styled-components
05:56
(실습) styled-components를 사용하여 스타일링 해보기
03:45
섹션 16. Mini Project
6
강 ∙ 29분
(실습) 미니 블로그 기획, 프로젝트 생성 및 필요한 패키지 설치
05:14
(실습) 주요 컴포넌트 및 폴더 구성하기
03:17
(실습) UI 컴포넌트 및 List 컴포넌트 구현하기
05:56
(실습) 가짜 데이터 만들기
01:31
(실습) Page 컴포넌트 구현 및 각 페이지별 경로 구성하기
06:56
(실습) App.js 파일 수정, 애플리케이션 실행하기, Production 빌드하기
06:09
강의 게시일 : 2022년 05월 19일
(마지막 업데이트일 : 2022년 05월 19일)
수강평
총 111개
수강생분들이 직접 작성하신 수강평입니다.
4.9
111개의 수강평
5점
4점
3점
2점
1점
VIEW
좋아요 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
f모 강의에서 공식문서 읽어주는 강의를 듣다가 시간도 너무 길고 이해도 안되고 너무 어려워서 때려치고 리액트 강의를 뒤적이던 중에 보석 같은 강의를 발견했습니다. 이게 무료라니.. 이게 무료라니잇....!
이렇게 쉽게 친근하게 접근할 수 있다니 강의력에 감탄했습니다. 컴포넌트 붕어빵이 너무 귀여워요 짱짱맨
한눈 안팔고 핵심만 찔러줍니다. 시간절약 시켜주셔서 감사합니다. 이 강의는 살아있는 공식문서 실습판입니다.
배속으로 해도 발음이 워낙 정확해서 뭉개지지않고 잘들립니다.
2022-05-30
Swift로 현업에서 일하고 있는 개발자입니다. 아무것도 모르는상태로 머리부터 들이밀고 공부하기 시작해서 이제는 리액트를 공부하게 되었습니다.
JS도 잘 모르고 웹에대해 잘 아는게 없다보니 기초부터 들으면 좋을것 같아 강의를 수강하게 되었는데 필요한 내용으로 잘 구성되어 있고 제 코딩스타일과 다른 코드를 보니 신기하네요
강의 잘 들었습니다 감사합니다!
2022-10-26
우연히 듣게 된 강의인데 너무 좋았습니다! 리액트 처음 접하시는 분들은 html, css, 자바스크립트 간단하게 아는 상태에서 수강하기 너무 좋을 것 같네요. 여러 장점이 있지만 그 중에서도 1) 깔끔하고 군더더기 없는 설명 2) 실습 기반으로 수강한 내용 복습 3) 강의력을 장점으로 꼽을 수 있을 것 같습니다! 여러 강좌를 수강하려고 시도..는 해봤지만 완강한 강의는 이게 처음이에요! 오래만난 리액트도 있으면 좋을거 같아요...ㅎㅎ 좋은 강의 너무 감사드리고 앞으로도 새로운 강좌 오픈하시면 꼭 들을게요! 아직 안들으신 분들은 적극 추천드려요.
2022-07-20
차분히 설명을 잘해주시네요.!!
2023-02-07
리액트 기본을 아는데 도움이 됩니다.
2023-02-06