44,000원
초급자를 위해 준비한
[프론트엔드, 프로그래밍 언어] 강의입니다.
React 기본을 배울 수 있습니다. React와 관련된 HTML, JavaScript, DOM, Event, Object, Module, OOP 등을 정리할 수 있습니다.
✍️
이런 걸
배워요!
이런 걸
배워요!
React 기본 개념
React 기능과 관련된 JavaScript, DOM, Event, Object 등의 기본 개념과 용어
내공이 튼튼한 개발자가 되고 싶다면!
기초와 기본기를 튼튼하게,
React & 프론트엔드 근본 다지기
React 애플리케이션 개발의 밑바탕
React 애플리케이션 개발에 필요한 기본 그리고 기초를 확실하게 다질 수 있습니다.
- ✅ React 애플리케이션 개발 감각 만들기
- ✅ React와 관련된 HTML, JavaScript, DOM, Event, Object, Module 등
- ✅ React 관련 기술 용어의 뜻과 뉘앙스
- ✅ 자바스크립트의 객체 지향 프로그래밍 개념 정리
이런 분들께
추천합니다.
- React 기본을 배우려는 비기너
- React와 관련된 기술을 정리하려는 개발자 (HTML, JavaScript, DOM, Event, Object, Module 등)
- React 환경에서 시스템을 설계하려는 설계자, 기획자
- React 환경에서 요구분석을 하려는 분석가
여러분의 고민에 대한 해답, 모두 ‘기본기’입니다!
💬 리액트, 어떻게 배워야 할지 잘 모르겠습니다.
초등학교 과정, 중학교 과정 순서로 배우듯 배우는 순서가 중요합니다. 강의는 배우는 시나리오를 갖고 있습니다. 기초에서 기본으로 하나씩 배울 수 있습니다.
💬 리액트를 배웠는데, 정리가 잘 되지 않습니다.
기초, 기본을 다지면서 탑을 쌓아야 합니다. 그렇다고 시간이 오래 걸리지 않습니다. 강의 자체가 이를 염두에 두고 하나씩 탑을 쌓아가게 되어 있습니다.
💬 리액트를 배웠지만 리액트로 앱을 개발하는 데 어려움이 있습니다.
프로그램 개발의 감을 잡지 못했기 때문입니다. 기초, 기본을 논리적으로 이해하는 것이 중요합니다. 하나씩 바탕을 만들어 가면 프로그램 개발의 감을 잡을 수 있습니다.
처음부터 끝까지, 강의 전체가
하나의 시나리오입니다.
💡 한 흐름으로, 바닥부터 자세하게
강의 전체가 처음부터 끝까지 하나의 시나리오입니다. 너무하다 할 정도로 바닥부터 자세하게 다룹니다. 튼튼하면서도 흔들리지 않는 바탕을 갖출 수 있습니다.
💡 토대 개념부터 완벽하게 정리
React를 다루기 전 먼저 HTML, JavaScript, DOM, Event, Object, Module 등을 정리합니다. 이 과정을 통해 강의자가 사용하는 용어와 내용을 정확하게 이해할 수 있는 공감대를 이루게 됩니다.
그래서, 수강 후에는...
- ✅ 프로그램 개발의 자신감을 느끼게 됩니다.
- ✅ 흔들리지 않을 것 같은 바탕이 튼튼함을 느낄 수 있습니다.
- ✅ 찐 개발자가 되기 위해 무엇을 배워야 하는지, 무엇을 해야 하는지를 알 수 있습니다.
- ✅ 웹 개발 전체를 보는 안목이 넓어집니다.
- ✅ 정확하게 용어를 사용할 수 있게 됩니다.
Q&A 💬
Q. 자바스크립트와 DOM을 어느 정도 알아야 할까요?
강의에서 이에 대해 가이드를 하고 있습니다. 우선 가볍게 전체 강의를 들으면서 무엇을 배워야 하는지 체크하기를 바랍니다.
Q. 프로그램 개발 개념이 없는데 들어도 될까요?
프로그램 개발 개념이 없으면 곤란하지만, 강의를 반복해서 들으면서 개념을 만들어 보세요. 강의에서 이에 대해 가이드를 하고 있습니다. (수강을 위해서는 HTML/CSS 및 JavaScript에 대한 기본적인 이해가 필요합니다.)
Q. React 경험자인데, 강의가 도움이 될까요?
React 기능 자체는 도움이 되지 않지만, 바탕 개념을 다루므로 정리할 수 있습니다. 특히, 관련된 HTML, JavaScript, DOM, Event, Object, Module 등을 정리할 수 있습니다.
📢 수강 전 참고 사항
- 설명에 집중하기 위해 라이브 코딩을 하지 않습니다.
- HTML을 깊게 알 필요는 없지만, 강의를 따라올 수 있는 이해력은 필요합니다.
- CSS는 다루지 않으므로 몰라도 되지만 CSS를 작성할 수 있는 정도의 이해는 필요합니다.
- 자바스크립트는 깊게 알면 알수록 좋습니다만, 맛보기 정도로 알고 있다면 강의에서 가이드하므로 따라가면 되겠습니다.
📚 React 비기너 강의 수강 팁
- 처음 한 번은 코딩하지 말고 전체를 파악하기 위해 이해가 안되더라도 처음부터 끝까지 듣습니다.
- 전체가 연상되지 않으면 코딩하지 말고 다시 듣습니다.
- 3번째부터는 하나씩 코딩하면서 감을 만듭니다. 같은 코드라도 되도록 복사하지 말고 코딩합니다. 이것은 코딩 감각을 만들기 위한 것입니다.
💾 실습 환경 및 후속 강의 안내
- Windows 기준으로 강의를 진행하지만, OS를 다루는 것이 아니므로 다른 환경에서도 수강할 수 있습니다.
- Node.js, Visual Studio Code를 사용합니다. 강의에서 설치를 가이드하므로 필요한 시점에 설치해도 됩니다.
- 별도의 강의 자료 및 소스 코드는 제공하지 않습니다.
- React 비기너 강의에 이어 후속 강의를 개설할 예정입니다.
함께 들으면 좋은
연관 강의를 확인해보세요.
이런 분들께 추천드려요!
🎓
학습 대상은
누구일까요?
학습 대상은
누구일까요?
React를 시작하는 분
React의 바탕을 같이 배우려는 분
React 기능과 관련된 JavaScript, DOM, Event, Object 등의 기본 개념과 용어를 정리하려는 분
📚
선수 지식,
필요할까요?
선수 지식,
필요할까요?
HTML, CSS
JavaScript: React 기능과 관련된 JavaScript와 DOM을 다루지만, 개념 이해는 필요합니다.
안녕하세요
김영보 입니다.
김영보 입니다.
40년 넘게 소프트웨어를 개발했으며, 지금도 개발하고 있습니다.
23년 넘게 JavaScript 중심으로 개발했습니다.
동영상: 10개
자바스크립트 비기너, 자바스크립트 중고급
모던 자바스크립트(ES6+) 기본, 모던 자바스크립트(ES6+) 심화
DOM 기본, DOM 인터랙션
React 비기너, React 완전 끝내기
요구분석 구현 방법
자바스크립트 머신러닝 TensorFlow.js
저서: 9권
몰입! 자바스크립트, ECMAScript 6, HTML5, DOM 스크립팅
자바스크립트 정규표현식, 요구분석을 위한 Event Process 모델링
머신러닝 TensorFlow.js JavaScript, Ajax 활용, prototype.js 완전분석
9권 중에서 8권은 국내 최초 저자입니다.
특히, "머신러닝 TensorFlow.js JavaScript"는 출판하는 시점에 amazon.com에 관련된 책이 없었습니다.
커리큘럼
총 115 개
˙ 11시간 1분의 수업
이 강의는 영상이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강좌 소개
2 강
∙ 11분
섹션 1. React 개요
1 강
∙ 4분
섹션 2. HTML 용어 정리
5 강
∙ 30분
1. 용어 정리 목적
미리보기
01:44
2. 용어 기준: 용어는 스펙이 기준, 강좌의 용어 사용 기준
미리보기
07:20
3. HTML5의 핵심, HTML 태그와 엘리먼트, 속성, 콘텐츠
10:19
4. HTML 구조, HTML 구성
05:22
5. HTML 아웃라인, 아웃라인 렌더링
05:22
섹션 3. React 개발 환경 설정
5 강
∙ 20분
1. Visual Studio Code 설치
02:30
2. Node.js 개요, Node.js 설치/확인, NPM 설치/확인
03:32
3. 폴더 생성/열기, 자바스크립트 코드 작성, Node.js로 실행
04:34
4. package.json 파일, package.json 파일 생성, package.json 파일 형태, package.json 파일의 프로퍼티
05:23
5. package.json 파일의 scripts에 프로퍼티 추가: start 프로퍼티, scripts에 프로퍼티 추가
04:53
섹션 4. React 앱 생성, 실행, 종료
3 강
∙ 15분
1. React 앱 생성: Create React App, React 앱 생성, NPX
미리보기
05:52
2. React 앱 실행, React 앱 종료
03:38
3. App.js 파일 코드 정리, HTML 마크업 바꾸기, React 앱 실행, 개발자가 할 것
06:00
섹션 5. 노짱 개발자의 개발 경험 이야기
1 강
∙ 5분
섹션 6. 자바스크립트 개념
5 강
∙ 32분
1. 자바스크립트 개념
01:50
2. 문장, console.log(), const 변수, 값 변경 불가 설정
07:31
3. 데이터 타입, Undefined 데이터 타입, Null 데이터 타입
07:15
4. 프로퍼티, 프로퍼티 확장, Object 데이터 타입
09:28
5. 프로퍼티 속성
06:22
섹션 7. 함수(Function)
6 강
∙ 37분
1. 함수 형태, 함수 이름, prototype
06:02
2. 대문자 작성 관례
04:13
3. React 컴포넌트의 대문자
06:08
4. 함수 호출, 함수와 메소드 구분
07:03
5. 함수와 메소드, class의 함수
05:52
6. 스코프 개요, 변수 선언 식별자 해결, 변숫값을 구하는 식별자 해결, 블록 스코프
07:48
섹션 8. 객체 지향 프로그래밍
5 강
∙ 33분
1. 객체 지향의 객체, Object는 클래스의 인스턴스
08:47
2. 자바스크립트 OOP 개요; class-based와 다르다, prototype-based, 프로퍼티 동적 추가
05:36
3. 메소드 호출, 자바스크립트의 Object
06:04
4. Object와 객체: Object로 인스턴스를 생성, 엔진이 인스턴스 생성, Object와 객체
09:06
5. Object Objects, 강좌의 Object 표기 기준
03:45
섹션 9. Array 오브젝트
3 강
∙ 16분
1. 배열 개요, Array 인스턴스 생성 방법, 배열과 Array 오브젝트
03:54
2. 콜백 함수를 가진 메소드: forEach(), map(), filter()
06:28
3. Array-like Object, Array.from()
06:30
섹션 10. 분리, 결합, 분할 할당
3 강
∙ 14분
1. 분리(spread), 결합(rest)
05:55
2. Array 분할 할당, Object 분할 할당, Shorthand property names, 나머지 할당(Array), 나머지 할당(Object)
03:33
3. default value: Array 할당, Object 할당, 디폴트 값 적용 순서, 함수 파라미터
05:10
섹션 11. DOM: Document Object Model
6 강
∙ 32분
1. DOM 개요, DOM 책/동영상
05:10
2. DOM 코드 형태, DOM 구성
07:29
3. HTML과 DOM 트리, 노드, 노드 트리 차이
05:27
4. 노드 트리의 노드 관계, 노드 관계는 구성이다, Tree Order
04:03
5. 관계 오브젝트, Node Tree Position, Node Tree 포지션 명칭, Node Tree 포지션 프로퍼티
03:54
6. HTML 스펙의 엘리먼트, 노드 트리/인터페이스
06:01
섹션 12. 노짱 개발자의 개발 경험 이야기
1 강
∙ 4분
1. 동네 한 바퀴, 코딩할 시간, 95% 이상
04:35
섹션 13. JSX
9 강
∙ 44분
1. React 컴포넌트 정의, React 컴포넌트 이름 작성 규칙
03:41
2. React 앱 생성: 폴더 생성, React 앱 생성, 소스 코드 정리
02:45
3. JSX 개요, 자바스크립트 문법 확장
05:30
4. JSX 작성 규칙, 루트 엘리먼트, Fragment
03:41
5. 끝 태그 작성, self-closing tag, 끝 태그 작성 형태, 웹 기술 검색 팁
08:38
6. 카멜 케이스로 작성, 카멜 케이스 작성 이유, JSX 변환기
06:55
7. 데이터 표시, 중괄호 { }, 표현식 사용
04:15
8. 이미지 URL 참조, 함수 호출
03:41
9. CSS Style 적용: className, style 속성 작성 방법, className 사용 권장
05:43
섹션 14. Module
4 강
∙ 13분
1. Module 개요: Module 접근 바탕, Module 코드 형태, html 파일 작성 방법
02:45
2. export, import 형태, 변수/함수의 export/import, Class의 export/import, 리스트 형태의 export
04:21
3. 전체 import, 이름 변경: as로 export/import 이름 변경, *로 export 전체를 import
03:34
4. default: default 작성, default를 리스트 형태로 작성, 함수 이름이 없는 함수, *로 default를 import
03:13
섹션 15. 컴포넌트 네스팅(Nesting)
4 강
∙ 25분
1. 컴포넌트 네스팅 개요, React 앱 생성
05:44
2. 컴포넌트 생성, 네스팅: 재사용 체크, 컴포넌트 분리, 컴포넌트 네스팅
05:11
3. 컴포넌트를 파일로 분리, 컴포넌트 파일 작성, import 컴포넌트 작성
05:56
4. 컴포넌트 구성: 요구 사항, Button 컴포넌트 작성, 파일에 다수의 컴포넌트 작성, 컴포넌트 렌더링, 렌더링
08:23
섹션 16. Props
4 강
∙ 20분
1. Props 개요, 컴포넌트의 독립성
04:12
2. props 작성 방법: Element 표기 정리, Object 분할 할당
06:12
3. props 넘겨주기: props는 Object 데이터 타입, default value
04:12
4. root/header 생성, 자식 컴포넌트 생성, children prop
06:12
섹션 17. JSX 조건 렌더링
4 강
∙ 19분
1. 자바스크립트 연산자 정리: 표현식, 표현식 평가 순서, true/false 평가
05:32
2. 논리 OR(||) 연산자, 논리 AND(&&) 연산자, 조건(삼항) 연산자
05:29
3. if 문 사용, 조건(삼항) 연산자 사용, null undefined return
05:23
4. JSX에 자바스크립트 작성: 요구 사항, JSX에 작성한 형태, 자바스크립트로 사전 처리
03:23
섹션 18. 리스트와 키
4 강
∙ 23분
1. 배열 데이터로 리스트 만들기: 리스트란?, 리스트 데이터 추출, 배열 데이터 렌더링
06:40
2. Object 데이터로 리스트 만들기: 리스트 데이터 추출, Object 데이터 렌더링
05:05
3. 함수 호출, 호출 시간: 메소드 이름 시맨틱, 함수 호출 시간
03:54
4. 배열의 엘리먼트에 key 작성: React의 key 사용 목적, 네스트 리스트에 key 작성
07:36
섹션 19. 노짱 개발자의 개발 경험 이야기
1 강
∙ 8분
1. 용어, 킬러 문항
08:25
섹션 20. DOM Event
5 강
∙ 34분
1. Event 개요, 동적 콘텐츠 표현
08:11
2. 이벤트 리스너: 이벤트 설정, 이벤트 발생
08:28
3. 이벤트 설정 삭제
04:03
4. DOM Event Flow: Capture
10:13
5. DOM Event Flow: Bubbling
03:50
섹션 21. 이벤트 핸들러
5 강
∙ 38분
1. HTML 속성 형태, 콘텐트 속성/IDL 속성
07:55
2. 이벤트 설정: IDL 속성, 이벤트 삭제: IDL 속성
07:26
3. 이벤트 핸들러: 콘텐트 속성
07:16
4. 이벤트 발생 순서
07:45
5. Event 오브젝트 구성
08:35
섹션 22. React Event
6 강
∙ 41분
1. Event 설정, 발생 시나리오
04:51
2. 이벤트 핸들러 작성
04:58
3. 이벤트 핸들러를 inline으로 작성
02:55
4. 이벤트 핸들러에서 props 사용
09:10
5. 이벤트 핸들러를 props로 넘겨주기
09:21
6. 컴포넌트 props 네이밍
09:47
섹션 23. DOM 합성 Event
3 강
∙ 19분
1. 합성 Event 개념
05:16
2. DOM 합성 이벤트 생성, 발생
07:56
3. 합성 이벤트 오브젝트
05:55
섹션 24. React Event 오브젝트
4 강
∙ 23분
1. React Event 오브젝트 형태
07:51
2. React 이벤트 플로우
04:01
3. React의 이벤트 전파, 이벤트 전파 방지
06:22
4. React의 이벤트 캡처, 디폴트 액션 방지
05:02
섹션 25. State 개요
4 강
∙ 21분
1. React 앱 환경 설정
02:02
2. DOM의 노드 트리 렌더링
06:41
3. 변숫값 트리거
07:55
4. useState Hook 사용
05:07
섹션 26. useState Hook
5 강
∙ 29분
1. useState Hook 작성, 실행
07:03
2. React의 컴포넌트 렌더링
07:34
3. set 함수(값)
07:51
4. batch state update
03:30
5. set 함수(함수)
03:35
섹션 27. useState 활용
6 강
∙ 36분
1. set 함수 다수 호출(값)
07:09
2. set 함수 다수 호출(함수)
06:12
3. updater function
04:53
4. state 변수의 독립성
07:24
5. 문자열 트리거
07:08
6. 체크박스 트리거
04:00
섹션 28. 노짱 개발자의 개발 경험 이야기
1 강
∙ 1분
1. 2%
01:13
강의 게시일 : 2023년 09월 27일
(마지막 업데이트일 : 2023년 10월 24일)
수강평
총 9개
수강생분들이 직접 작성하신 수강평입니다.
5
9개의 수강평
5점
4점
3점
2점
1점
VIEW
추천 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
리액트 무료강의이지만 엄청 디테일합니다. 혹시 리액트 비기너 이후 커리큘럼이 어떻게 진행될까요?
2023-10-27
너무 쉽게 원리를 설명해주시니 너무 좋습니다!
2024-01-29
단순히 만들어내는 공부만 하다가 기본을 다지러 왔습니다. 기본의 중요성을 체감하고 갑니다. 강의 감사합니다
2023-12-21
js에 대한 심도있는 설명 및 문서로 규정된 내용을 설명해주셔서 감사합니다.
2023-12-11
가장중요한 기초강의를 무료로 만들어주셔서 감사합니다. 잘듣겠습니다.
2023-10-27
