This course was created with the
course builder. Create your online course today.
Start now
Create your course
with
Autoplay
Autocomplete
Previous Lesson
Complete and Continue
올인원 패키지 : 프론트엔드 (React)
HTML & CSS 첫걸음 / 개요
01. 첫 인사, 개요 소개 (4:44)
02. HTML, CSS 그리고 JS (6:09)
03. 웹 표준과 웹 접근성 (13:59)
04. 에디터 소개 (5:22)
05. VS code 설치 및 설정 (8:51)
06. VS code 한글 패치 (8:15)
07. Beautify & Live Server (10:30)
08. 그 외 확장 프로그램과 알아두면 좋은 단축키 (12:21)
09. 이미지에 대한 이해 (6:07)
10. JPG, PNG, GIF, WEBP, SVG (16:51)
11. 특수 기호 (11:14)
12. 오픈 소스와 라이선스 (8:34)
HTML & CSS 첫걸음 / HTML
01. 기본 문법 (7:57)
02. 속성(Attributes)과 값(Value) (6:20)
03. 부모 요소(Parent Element), 자식 요소(Child Element) (5:48)
04. 빈 태그(Empty tag) (5:06)
05. DOCTYPE(DTD) (9:05)
06. HEAD 태그(TITLE, META, LINK, STYLE, SCRIPT) (16:15)
07. BODY 태그(div, image), 웹 표준 검사 (7:02)
08. 예제 (19:05)
HTML & CSS 첫걸음 / CSS
01. 기본 문법과 선택자의 역할 (7:28)
02. 속성(Properties)과 값(Value) (5:21)
03. 선언 방식 (13:50)
04. 선언 방식 예제 (13:21)
05. 선택자 (7:35)
06. 속성 1 - 크기 (13:49)
07. 속성 2 - 여백 (13:28)
08. 속성 3 - 색상 (6:22)
09. 예제 1 (16:23)
10. 예제 2 (14:16)
11. 예제 3 (15:48)
HTML / 개요, 요소 - 주요범위 & 메타데이터
01. 블록(Block), 인라인(Inline) 1 (12:50)
02. 블록(Block), 인라인(Inline) 2 (10:05)
03. 블록(Block), 인라인(Inline) 3 (6:06)
04. 주요범위 & 메타데이터 - HTML, HEAD, BODY, TITLE (11:04)
05. 메타데이터 - META 1 (9:48)
06. 메타데이터 - META 2 (11:42)
07. 메타데이터 - LINK (8:24)
08. 메타데이터 - STYLE (4:38)
09. 메타데이터 - MIME Type (5:02)
10. 메타데이터 - BASE (12:45)
HTML / 요소 - 콘텐츠 구분 & 문자 콘텐츠
01. BODY 내 구조 개념 (4:38)
02. 콘텐츠 구분 - HEADER (3:43)
03. 콘텐츠 구분 - FOOTER (4:21)
04. 콘텐츠 구분 - H1~H6 (12:04)
05. 콘텐츠 구분 - MAIN (6:35)
06. 콘텐츠 구분 - ARTICLE (5:15)
07. 콘텐츠 구분 - SECTION (4:42)
08. 콘텐츠 구분 - ASIDE (2:41)
09. 콘텐츠 구분 - NAV (4:39)
10. 콘텐츠 구분 - ADDRESS (3:17)
11. 콘텐츠 구분 - DIV (1:30)
12. 콘텐츠 구분 - 예제 (19:17)
13. 문자 콘텐츠 - OL, UL, LI (17:02)
14. 문자 콘텐츠 - DL, DT, DD (8:30)
15. 문자 콘텐츠 - P, HR (12:02)
16. 문자 콘텐츠 - PRE (11:44)
17. 문자 콘텐츠 - BLOCKQUOTE (2:14)
HTML / 요소 - 인라인 텍스트 & 수정
01. 인라인 텍스트 - A 1 (17:45)
02. 인라인 텍스트 - A 2 (17:26)
03. 인라인 텍스트 - ABBR (4:00)
04. 인라인 텍스트 - B, MARK, EM, STRING, I 1 (9:32)
05. 인라인 텍스트 - B, MARK, EM, STRONG, I 2 - 예제 (15:55)
06. 인라인 텍스트 - DFN (2:44)
07. 인라인 텍스트 - CITE (2:16)
08. 인라인 텍스트 - Q (1:16)
09. 인라인 텍스트 - U (6:27)
10. 인라인 텍스트 - CODE (4:36)
11. 인라인 텍스트 - KBD (3:52)
12. 인라인 텍스트 - SUP, SUB (1:19)
13. 인라인 텍스트 - TIME (1:53)
14. 인라인 텍스트 - SPAN (4:55)
15. 인라인 텍스트 - BR (6:49)
16. 수정 - DEL, INS (5:44)
HTML / 요소 - 멀티미디어 & 내장 콘텐츠 & 스크립트
01. 멀티미디어 - IMG 1 (6:45)
02. 멀티미디어 - IMG 2 - srcset, sizes 속성 (5:03)
03. 멀티미디어 - IMG 3 - W, X 단위 (13:22)
04. 멀티미디어 - IMG 4 - sizes 속성 (8:28)
05. 멀티미디어 - AUDIO (7:40)
06. 멀티미디어 - VIDEO (7:53)
07. 멀티미디어 - FIGURE, FIGCAPTION (3:31)
08. 내장 콘텐츠 - IFRAME (11:43)
09. 내장 콘텐츠 - CANVAS (6:52)
10. 스크립트 - SCRIPT 1 (14:46)
11. 스크립트 - SCRIPT 2 (3:44)
12. 스크립트 - NOSCRIPT (5:12)
HTML / 요소 - 표 콘텐츠 & 양식
01. 표 콘텐츠 - TABLE (15:29)
02. 표 콘텐츠 - TH (17:26)
03. 표 콘텐츠 - TD (3:19)
04. 표 콘텐츠 - CAPTION (1:52)
05. 표 콘텐츠 - COLGROUP, COL (11:46)
06. 표 콘텐츠 - THEAD, TBODY, TFOOT (6:11)
07. 양식 - FORM (20:27)
08. 양식 - INPUT 1 (14:23)
09. 양식 - INPUT 2 (14:51)
10. 양식 - LABEL (6:34)
11. 양식 - BUTTON (5:38)
12. 양식 - TEXTAREA (3:06)
13. 양식 - FIELDSET, LEGEND (3:34)
14. 양식 - SELECT, DATALIST, OPTGROUP, OPTION (15:22)
15. 양식 - PROGRESS (4:13)
HTML / 전역 속성, 기타
01. 전역 속성 - class와 id (6:50)
02. 전역 속성 - style (1:24)
03. 전역 속성 - title (3:00)
04. 전역 속성 - lang (2:31)
05. 전역 속성 - data-* (7:31)
06. 전역 속성 - draggable (1:56)
07. 전역 속성 - hidden (3:36)
08. 전역 속성 - tabindex (8:15)
09. 절대 경로와 상대 경로 (11:06)
10. 주석(Comment) (5:56)
11. 특수기호(Entities) (7:57)
CSS / 개요, 선택자, 상속
01. 기본문법 (10:02)
02. 선언방식 (10:13)
03. 기본 선택자 (12:34)
04. 복합 선택자 (19:41)
05. 가상클래스 선택자 - hover, active, focus (14:13)
06. 가상클래스 선택자 - first-child, last-child (7:12)
07. 가상클래스 선택자 - nth-child (5:57)
08. 가상클래스 선택자 - xxx-child 주의사항 (8:32)
09. 가상클래스 선택자 - nth-of-type, not (8:59)
10. 가상요소 선택자 - before (10:24)
11. 가상요소 선택자 - after (8:55)
12. 속성 선택자 - [attr], [attr=value] (9:29)
13. 속성 선택자 - [attr^=value], [attr$=value] (6:53)
14. 상속(Inherit) (5:21)
15. 우선순위 (16:56)
CSS / 실습 환경
01. CSS Reset (7:26)
02. Codepen (7:33)
03. Emmet (10:29)
CSS / 단위
01. px, % (4:07)
02. em, rem (8:23)
03. vw, vh (4:09)
04. vmin, vmax (4:16)
CSS / 속성 - 박스 모델
01. width, height (8:50)
02. max-width, min-width, max-height, min-height (8:06)
03. margin (13:15)
04. margin - 중복(Collapse) (14:57)
05. padding (12:09)
06. border (23:23)
07. box-sizing (5:35)
08. display (13:48)
09. overflow (7:22)
10. opacity (6:12)
CSS / 속성 - 글꼴, 문자
01. font, font-style (8:36)
02. font-weight (9:34)
03. font-size (3:38)
04. line-height (8:27)
05. font-family (11:31)
06. color, 색상표현법 (6:16)
07. text-align (3:49)
08. text-indent (7:11)
09. text-decoration (2:52)
10. letter-spacing, word-spacing (4:41)
CSS / 속성 - 띄움(정렬), 위치
01. float (29:06)
02. float - display 수정 (5:30)
03. clear (1:36)
04. position 그리고 top, bottom, left, right (8:39)
05. position 속성값 - relative (6:07)
06. position 속성값 - absolute (12:21)
07. position 속성값 - fixed (3:41)
08. position 속성값 - sticky (8:48)
09. position 특징 - 요소 쌓임 순서 (11:31)
10. position 특징 - display 수정 (3:51)
11. z-index (2:46)
CSS / 속성 - 배경
01. background (3:20)
02. background-color (2:22)
03. background-image (12:57)
04. background-repeat (4:00)
05. background-position (11:20)
06. background-attachment (15:07)
07. background-size (6:37)
CSS / 속성 - 전환 & 변환
01. 전환(Transitions) (22:25)
02. 변환(Transforms) 개요 (3:22)
03. 변환 2D 속성 (18:14)
04. 변환 3D 속성 (10:53)
05. 변환 속성 - transform-origin (7:15)
06. 변환 속성 - transform-style (8:38)
07. 변환 속성 - perspective (4:21)
08. 변환 속성 - perspective-origin (4:35)
09. 변환 속성 - backface-visibility (3:54)
10. 변환 속성 - matrix() (9:01)
11. 변환 예제 - 카드 뒤집기 (23:09)
CSS / 속성 - 애니메이션 & 다단
01. 애니메이션(Animations) 개요 (7:13)
02. Keyframes rule (6:29)
03. 애니메이션 속성 - animation-name, animation-duration (3:24)
04. 애니메이션 속성 - animation-timing-function, animation-delay (12:16)
05. 애니메이션 속성 - animation-iteration-count, animation-direction (9:57)
06. 애니메이션 속성 - animation-fill-mode (10:04)
07. 애니메이션 속성 - animation-play-state (8:37)
08. 다단(Multi Columns) (14:41)
CSS / 속성 - 플랙스
01. Flex 개요 (10:52)
02. Flex Containers 속성 - display (3:55)
03. Flex Containers 속성 - flex-flow, flex-direction (2:51)
04. Flex 주축과 교차축, 시작점과 끝점 (4:42)
05. 01. Flex Containers 속성 - flex-wrap (7:27)
06. Flex Containers 속성 - justify-content (6:07)
07. Flex Containers 속성 - align-content (9:42)
08. Flex Containers 속성 - align-items (10:30)
09. Flex Items 속성 - order (8:05)
10. Flex Items 속성 - flex-grow (9:48)
11. Flex Items 속성 - flex-shrink (8:22)
12. Flex Items 속성 - flex-basis (9:40)
13. Flex Items 속성 - flex (5:35)
14. Flex Items 속성 - align-self (5:33)
CSS / 속성 - Grid
01. Grid 개요 (4:46)
02. Grid Containers 속성 - display (4:32)
03. Grid Containers 속성 기초 - grid-template-rows, grid-template-columns (7:26)
04. Grid Items 속성 기초 - grid-row, grid-column (13:51)
05. Grid Containers 속성 - grid-template-areas (8:27)
06. Grid Containers 속성 - row-gap, column-gap, gap (3:59)
07. Grid Containers 속성 - grid-auto-rows, grid-auto-columns (11:20)
08. Grid Containers 속성 - grid-auto-flow (12:10)
09. Grid Containers 속성 - grid-template-rows, grid-template-columns (12:01)
10. Grid Items 속성 - grid-row, grid-column, grid-area (10:25)
11. Grid Containers 속성 - grid-template (8:29)
12. Grid Containers 속성 - grid (8:45)
13. Grid Containers 속성 - align-content, justify-content (6:18)
14. Grid Containers 속성 - align-items, justify-items (4:29)
15. Grid Items 속성 - align-self, justify-self (2:47)
16. Grid Items 속성 - order, z-index (5:44)
17. Grid Items 함수 - repeat, minmax, fit-content (16:22)
18. Grid Items 단위 - fr, min-content, max-content (11:04)
19. Grid Items 단위 - auto-fill, auto-fit (9:38)
SCSS
Chapter 01. 개요 - 01. SCSS 개요 (5:52)
Chapter 01. 개요 - 02. Sass와 SCSS 차이점 (3:53)
Chapter 01. 개요 - 03. 컴파일 - SassMeister (3:46)
Chapter 01. 개요 - 04. 컴파일 - Parcel (7:34)
Chapter 02. 문법 - 01. 주석 (3:29)
Chapter 02. 문법 - 02. 데이터 종류 (5:01)
Chapter 02. 문법 - 03. 중첩 (2:25)
Chapter 02. 문법 - 04. 중첩 - 상위 선택자 참조 (6:58)
Chapter 02. 문법 - 05. 중첩 - 중첩 벗어나기 (5:41)
Chapter 02. 문법 - 06. 중첩 - 중첩된 속성 정의 (2:09)
Chapter 02. 문법 - 07. 변수 (2:34)
Chapter 02. 문법 - 08. 변수 - 유효범위, 재 할당 (2:34)
Chapter 02. 문법 - 09. 변수 - 전역 설정 (3:34)
Chapter 02. 문법 - 10. 변수 - 초깃값 설정, 문자 보간 (7:30)
Chapter 02. 문법 - 11. 가져오기 (4:13)
Chapter 02. 문법 - 12. 가져오기 - 여러 파일 가져오기, 파일 분할 (6:35)
Chapter 02. 문법 - 13. 연산 (4:28)
Chapter 02. 문법 - 14. 연산 - 숫자 (6:46)
Chapter 02. 문법 - 15. 연산 - 문자 (1:51)
Chapter 02. 문법 - 16. 연산 - 색상 (4:03)
Chapter 02. 문법 - 17. 연산 - 논리 (5:57)
Chapter 02. 문법 - 18. 재활용 - Mixin, Include 1 (6:28)
Chapter 02. 문법 - 19. 재활용 - Mixin, Include 2 (6:27)
Chapter 02. 문법 - 20. 재활용 - 인수 (3:55)
Chapter 02. 문법 - 21. 재활용 - 인수 - 기본값 설정 (2:26)
Chapter 02. 문법 - 22. 재활용 - 인수 - 키워드 인수 (3:30)
Chapter 02. 문법 - 23. 재활용 - 인수 - 가변 인수 (12:23)
Chapter 02. 문법 - 24. 재활용 - Content (5:37)
Chapter 02. 문법 - 25. 확장 - Extend (3:59)
Chapter 02. 문법 - 26. 확장 - 추천하지 않는 이유 (7:09)
Chapter 02. 문법 - 27. 함수 (3:31)
Chapter 02. 문법 - 28. 함수 - 예제 (7:11)
Chapter 02. 문법 - 29. 함수 - 함수 이름 중복 (2:11)
Chapter 02. 문법 - 30. IF함수 (5:24)
Chapter 02. 문법 - 31. 조건문 - IF (7:14)
Chapter 02. 문법 - 32. 조건문 - IF - 예제 (13:22)
Chapter 02. 문법 - 33. 반복문 - For (7:50)
Chapter 02. 문법 - 34. 반복문 - Each (4:31)
Chapter 02. 문법 - 35. 반복문 - Each - List 반복 (4:34)
Chapter 02. 문법 - 36. 반복문 - Each - Map 반복 (7:39)
Chapter 02. 문법 - 37. 반복문 - While (3:47)
Chapter 02. 문법 - 38. 내장함수 (13:25)
부트스트랩
01. Bootstrap (11:55)
02. 레이아웃 (8:37)
03. 콤포넌트 - 버튼 (5:06)
04. 콤포넌트 - 테이블 (4:19)
05. 콤포넌트 - 패널 (2:32)
06. 콤포넌트 - 폼 (7:07)
07. 콤포넌트 - 네비게이션 (8:02)
08. 실습 - 로그인 (7:10)
09. 실습 - font awesome (3:54)
10. 실습 - 게시판 (6:49)
11. Bootstrap 활용 - Summernote (6:53)
12. Bootstrap 활용 - Template (6:37)
처음 배우는 Git & GitHub - 진유림 강사
Chapter 00. Intro - 01. Introduction (6:23)
Chapter 01. Git & GitHub 환경 설정하기 - 01. 버전 관리가 뭔가요 (10:45)
Chapter 01. Git & GitHub 환경 설정하기 - 02. Git & GitHub 환경 설정하기 - Git 설치 (5:13)
Chapter 01. Git & GitHub 환경 설정하기 - 03. Git & GitHub 환경 설정하기 - GitHub, VSCode 설치 (8:14)
Chapter 02. Git&GitHub 익히기 feat.CLI - 01. Git 초기화와 로컬 저장소 (9:40)
Chapter 02. Git&GitHub 익히기 feat.CLI - 02. 첫번째 버전 만들기 (12:26)
Chapter 02. Git&GitHub 익히기 feat.CLI - 03. 만든 버전 GitHub에 올리기 (12:00)
Chapter 02. Git&GitHub 익히기 feat.CLI - 04. 다른 사람이 만든 저장소 받아오기 (15:04)
Chapter 03. Git&GitHub 다지기 feat. GUI - 01. 소스트리 GUI로 Git 다지기 (7:44)
Chapter 03. Git&GitHub 다지기 feat. GUI - 02. 그림으로 배우는 Add와 Commit (9:26)
Chapter 03. Git&GitHub 다지기 feat. GUI - 03.l GUI로 add, commit, push, pull 하기 (8:46)
Chapter 03. Git&GitHub 다지기 feat. GUI - 04. 평행세계 나누기 - 브랜치(branch) (13:34)
Chapter 03. Git&GitHub 다지기 feat. GUI - 05. 두 버전 합치기 - 머지(merge) (4:14)
Chapter 03. Git&GitHub 다지기 feat. GUI - 06. 합치다가 충돌이 났어요 - 컨플릭트(Conflict) (16:57)
Chapter 03. Git&GitHub 다지기 feat. GUI - 07. 저장소 통째로 복제하기 - 포크(fork) (13:02)
Chapter 03. Git&GitHub 다지기 feat. GUI - 08. 내 코드를 머지해주면 안되겠니 - 풀 리퀘스트(Pull request) (12:27)
Chapter 03. Git&GitHub 다지기 feat. GUI - 09. 리뷰 (11:35)
1장 | 벨로퍼트와 함께 하는 모던 자바스크립트 : JavaScript 입문 - 김민준 강사
Chapter #. 강의 자료
Chapter 01. JavaScript 입문 - 00. JavaScript는 뭔가요 (2:24)
Chapter 01. JavaScript 입문 - 01. Hello-JavaScript (4:46)
Chapter 01. JavaScript 입문 - 02. 변수 (10:22)
Chapter 01. JavaScript 입문 - 03. 연산자 - 산술연산자, 대입연산자 (4:12)
Chapter 01. JavaScript 입문 - 04. 연산자 - 논리연산자 (6:40)
Chapter 01. JavaScript 입문 - 05. 연산자 - 비교연산자, 문자열 붙이기 (7:04)
Chapter 01. JavaScript 입문 - 06. 조건문 - if, else, else if (8:09)
Chapter 01. JavaScript 입문 - 07. 조건문 - switch case (3:42)
Chapter 01. JavaScript 입문 - 08. 함수 (3:41)
Chapter 01. JavaScript 입문 - 09. 함수 - Template Literal (3:54)
Chapter 01. JavaScript 입문 - 10. 함수 - 연습 (3:28)
Chapter 01. JavaScript 입문 - 11. 함수 - 화살표 함수 (3:12)
Chapter 01. JavaScript 입문 - 12. 객체 (6:39)
Chapter 01. JavaScript 입문 - 13. 객체 - 비구조화 할당 (2:51)
Chapter 01. JavaScript 입문 - 14. 객체 - 객체 안에 함수 넣기 (4:06)
Chapter 01. JavaScript 입문 - 15. 객체 - Getter 와 Setter 함수 (11:09)
Chapter 01. JavaScript 입문 - 16. 배열 (7:29)
Chapter 01. JavaScript 입문 - 17. 반복문 - for (6:19)
Chapter 01. JavaScript 입문 - 18. 반복문 - while (4:30)
Chapter 01. JavaScript 입문 - 19. 반복문 - for...of, for...in (6:27)
Chapter 01. JavaScript 입문 - 20. 반복문 - continue 와 break (2:51)
Chapter 01. JavaScript 입문 - 21. 반복문 - 연습과 퀴즈 (4:56)
Chapter 01. JavaScript 입문 - 22. 배열 내장함수 - forEach (3:10)
Chapter 01. JavaScript 입문 - 23. 배열 내장함수 - map (10:58)
Chapter 01. JavaScript 입문 - 24. 배열 내장함수 - filter (2:11)
Chapter 01. JavaScript 입문 - 25. 배열 내장함수 - splice 와 slice (4:40)
Chapter 01. JavaScript 입문 - 26. 배열 내장함수 - shift, pop, unshift, push (8:06)
Chapter 01. JavaScript 입문 - 27. 배열 내장함수 - reduce (7:34)
Chapter 01. JavaScript 입문 - 28. 배열 내장함수 - reduce 다른 예시 (4:38)
Chapter 01. JavaScript 입문 - 29. 배열 내장함수 - 복습과 퀴즈 (7:23)
Chapter 01. JavaScript 입문 - 30. 프로토타입과 클래스 - 객체 생성자 (5:53)
Chapter 01. JavaScript 입문 - 31. 프로토타입과 클래스 - 객체 생성자 상속하기 (4:41)
Chapter 01. JavaScript 입문 - 32. 프로토타입과 클래스 - ES6 Class (5:31)
Chapter 01. JavaScript 입문 - 33. 프로토타입과 클래스 - 연습 - Food class 만들기 (6:01)
2장 | 벨로퍼트와 함께 하는 모던 자바스크립트 : 알고 있으면 유용한 JS 문법 - 김민준 강사
Chapter #. 강의 자료
Chapter 02. 알고있으면 유용한 JS 문법 - 01. 삼항연산자 (4:29)
Chapter 02. 알고있으면 유용한 JS 문법 - 02. Truthy와 Falsy (8:12)
Chapter 02. 알고있으면 유용한 JS 문법 - 03. 단축 평가 논리 계산법 (12:34)
Chapter 02. 알고있으면 유용한 JS 문법 - 04. 함수의 기본 파라미터 (3:03)
Chapter 02. 알고있으면 유용한 JS 문법 - 05. 조건문 더 스마트하게 쓰기 (12:37)
Chapter 02. 알고있으면 유용한 JS 문법 - 06. 비구조화 할당 (9:52)
Chapter 02. 알고있으면 유용한 JS 문법 - 07. spread 와 rest - spread 연산자 (7:54)
Chapter 02. 알고있으면 유용한 JS 문법 - 08. spread 와 rest - rest (4:10)
Chapter 02. 알고있으면 유용한 JS 문법 - 09. spread 와 rest - 함수 파라미터에서의 rest (2:55)
Chapter 02. 알고있으면 유용한 JS 문법 - 10. spread 와 rest - 함수 인자에서의 spread (3:02)
Chapter 02. 알고있으면 유용한 JS 문법 - 11. scope의 이해 - scope 이해하기 (10:02)
Chapter 02. 알고있으면 유용한 JS 문법 - 12. scope의 이해 - hoisting (5:46)
3장 | 벨로퍼트와 함께 하는 모던 자바스크립트 : 자바스크립트에서 비동기 처리 다루기 - 김민준 강사
Chapter #. 강의 자료
Chapter 03. 자바스크립트에서 비동기 처리 다루기 - 01. 비동기 처리의 이해 (9:09)
Chapter 03. 자바스크립트에서 비동기 처리 다루기 - 02. Promise (10:33)
Chapter 03. 자바스크립트에서 비동기 처리 다루기 - 03. async, await (4:07)
Chapter 03. 자바스크립트에서 비동기 처리 다루기 - 04. Promise all, Promise.race (8:04)
4장 | 벨로퍼트와 함께 하는 모던 자바스크립트 : HTML과 JavaScript 연동하기 - 김민준 강사
Chapter #. 강의 자료
Chapter 04. HTML 과 JavaScript 연동하기 - 01. 카운터 만들기 (7:49)
Chapter 04. HTML 과 JavaScript 연동하기 - 02. 모달 만들기 (6:56)
Chapter 05. 마무리 (1:07)
1장 | 벨로퍼트와 함께 하는 모던 리액트 : 리액트 입문 - 김민준 강사
Chapter #. 강의 자료
Chapter 00. 강의 소개 (3:19)
Chapter 01. 리액트 입문 - 01. 리액트는 어쩌다가 만들어졌을까? (7:00)
Chapter 01. 리액트 입문 - 02. 작업환경 준비 (9:27)
Chapter 01. 리액트 입문 - 03. 나의 첫번째 리액트 컴포넌트 (6:47)
Chapter 01. 리액트 입문 - 04. JSX (13:19)
Chapter 01. 리액트 입문 - 05. props 를 통해 컴포넌트에게 값 전달하기 (8:18)
Chapter 01. 리액트 입문 - 06. 조건부 렌더링 (5:02)
Chapter 01. 리액트 입문 - 07. useState 를 통해 컴포넌트에서 바뀌는 값 관리하기 (10:45)
Chapter 01. 리액트 입문 - 08. input 상태 관리하기 (5:15)
Chapter 01. 리액트 입문 - 09. 여러개의 input 상태 관리하기 (9:32)
Chapter 01. 리액트 입문 - 10. useRef 로 특정 DOM 선택하기 (4:10)
Chapter 01. 리액트 입문 - 11. 배열 렌더링하기 (12:32)
Chapter 01. 리액트 입문 - 12. useRef 로 useRef 로 컴포넌트 안의 변수 만들기 (6:05)
Chapter 01. 리액트 입문 - 13. 배열에 항목 추가하기 (12:21)
Chapter 01. 리액트 입문 - 14. 배열에 항목 제거하기 (8:11)
Chapter 01. 리액트 입문 - 15. 배열에 항목 수정하기 (6:03)
Chapter 01. 리액트 입문 - 16. useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기 (14:21)
Chapter 01. 리액트 입문 - 17. useMemo 를 사용하여 연산한 값 재사용하기 (4:36)
Chapter 01. 리액트 입문 - 18. useCallback 를 사용하여 함수 재사용하기 (6:43)
Chapter 01. 리액트 입문 - 19. React.memo 를 사용한 컴포넌트 리렌더링 방지 (8:32)
Chapter 01. 리액트 입문 - 20. useReducer - 기초 (7:16)
Chapter 01. 리액트 입문 - 21. useReducer - App 에서 useReducer 사용하기 (15:08)
Chapter 01. 리액트 입문 - 22. 커스텀 Hook 만들어서 사용하기 (8:12)
Chapter 01. 리액트 입문 - 23. Context API 를 사용한 전역 값 관리 (9:10)
Chapter 01. 리액트 입문 - 24. UserDispatch Context 만들기 (8:17)
Chapter 01. 리액트 입문 - 25. Immer 를 사용한 더 쉬운 불변성 지키기 (9:43)
Chapter 01. 리액트 입문 - 26. 리듀서 Immer 로 구현하기 (9:48)
Chapter 01. 리액트 입문 - 27. 클래스형 컴포넌트 소개 (5:22)
Chapter 01. 리액트 입문 - 28. 클래스형 컴포넌트의 state 와 setState (14:11)
Chapter 01. 리액트 입문 - 29. LifeCycle 메서드 (19:19)
Chapter 01. 리액트 입문 - 30. componentDidCatch 메서드 (11:22)
Chapter 01. 리액트 입문 - 31. componentDidCatch 와 Sentry 연동 (8:23)
Chapter 01. 리액트 입문 - 32. Prettier (9:58)
Chapter 01. 리액트 입문 - 33. ESLint 소개 (8:02)
Chapter 01. 리액트 입문 - 34. ESLint 설정 커스터마이징 (7:49)
Chapter 01. 리액트 입문 - 35. Snippet 사용하기 (9:55)
Chapter 01. 리액트 입문 - 36. 리액트 입문 끝 (0:37)
2장 | 벨로퍼트와 함께 하는 모던 리액트 : 컴포넌트 스타일링 - 김민준 강사
Chapter 02. 리액트 컴포넌트 스타일링하기 - 00. Intro (1:45)
Chapter 02. 리액트 컴포넌트 스타일링하기 - 01. Sass (11:42)
Chapter 02. 리액트 컴포넌트 스타일링하기 - 02. Sass 버튼 A - size props 설정하기 (8:24)
Chapter 02. 리액트 컴포넌트 스타일링하기 - 03. Sass 버튼 B- color props 설정하기 (6:36)
Chapter 02. 리액트 컴포넌트 스타일링하기 - 04. Sass 버튼 C - outline,fullWidth props 설정 (5:42)
Chapter 02. 리액트 컴포넌트 스타일링하기 - 05. Sass 버튼 D - ___rest props 전달하기 (7:11)
Chapter 02. 리액트 컴포넌트 스타일링하기 - 06. CSS Module (17:43)
Chapter 02. 리액트 컴포넌트 스타일링하기 - 07. Styled-components (16:04)
Chapter 02. 리액트 컴포넌트 스타일링하기 - 08. Styled-components 버튼만들기 (5:01)
Chapter 02. 리액트 컴포넌트 스타일링하기 - 09. Styled-components - Polished 스타일 유틸 함수 사용 (9:20)
Chapter 02. 리액트 컴포넌트 스타일링하기 - 10. Styled-components 버튼 사이즈 조정하기 (6:52)
Chapter 02. 리액트 컴포넌트 스타일링하기 - 11. Styled-components 버튼 outline, fullWidth 설정 (5:33)
Chapter 02. 리액트 컴포넌트 스타일링하기 - 12. Styled-components Dialog 만들기 (12:46)
Chapter 02. 리액트 컴포넌트 스타일링하기 - 13. Styled-components 트랜지션 구현하기 (11:01)
3장 | 벨로퍼트와 함께 하는 모던 리액트 : 멋진 투두리스트 만들기 - 김민준 강사
Chapter 03. 멋진 투두리스트 만들기 - 00. TodoList - 인트로 (1:36)
Chapter 03. 멋진 투두리스트 만들기 - 01. TodoList - 프로젝트 생성 UI 준비 - 1 (13:28)
Chapter 03. 멋진 투두리스트 만들기 - 02. TodoList - 프로젝트 생성 UI 준비 - 2 (20:31)
Chapter 03. 멋진 투두리스트 만들기 - 03. Context API 를 활용한 상태관리 (18:02)
Chapter 03. 멋진 투두리스트 만들기 - 04. 기능 구현하기 (11:51)
4장 | 벨로퍼트와 함께하는 모던 리액트 : API 연동 - 김민준 강사
00. 소개 (1:30)
01. API 연동의 기본 (13:45)
02. useReducer로 요청 상태 관리하기 (8:31)
03. useAsync 커스텀 Hook 만들어서 사용하기 (16:25)
04. react-async로 요청 상태 관리하기 (8:25)
05. Context 에서 비동기작업 상태 관리하기 (20:29)
06. Context에서 비동기 작업 상태 관리하기 - 리팩토링 (15:26)
정리 (2:08)
5장 | 벨로퍼트와 함께하는 모던 리액트 : Router - 김민준 강사
00. 소개 (8:50)
01. 프로젝트 준비 및 기본적인 사용법 (8:53)
02. 파라미터와 쿼리 (10:44)
03. 서브라우트 (5:44)
04. 라우터 부가기능 - history, withRouter (12:53)
05. 라우터 부가기능 - Switch, NavLink, 기타.. (7:48)
06. useReactRouterHook 사용하기 (2:14)
정리 (0:58)
6장 | 벨로퍼트와 함께하는 모던 리액트 : Redux - 김민준 강사
06. redux-00. 소개 (7:00)
06. redux-01. 리덕스에서 사용되는 키워드 숙지하기 (7:26)
06. redux-02. 리덕스의 3가지 규칙 (3:44)
06. redux-03. 리덕스 사용 할 준비하기 (14:25)
06. redux-04. 리덕스 모듈 만들기 (15:28)
06. redux-05. 카운터 구현하기 (11:14)
06. redux-06. 리덕스 개발자 도구 적용하기 (3:01)
06. redux-07. 할 일 목록 구현 A - 프리젠테이셔널 컴포넌트 만들기 (10:20)
06. redux-08. 할 일 목록 구현 B - 컨테이너 컴포넌트 만들기 (5:19)
06. redux-09. 할 일 목록 구현 C - 컴포넌트 최적화를 위한 작업 (3:15)
06. redux-10. useSelector 최적화 (8:42)
06. redux-11. connect, HOC 함수 소개 (4:42)
06. redux-12. connect 를 사용해서 컨테이너 구하기 (11:12)
06. redux-13. connect에 대해 알아두면 좋은것들 (4:06)
06. redux-14. 정리 (2:08)
7장 | 벨로퍼트와 함께하는 모던 리액트 : 리덕스 미들웨어 - 김민준 강사
07. redux 미들웨어-00. 소개 (4:42)
07. redux 미들웨어-01. 리덕스 프로젝트 준비하기 (10:10)
07. redux 미들웨어-02. 리덕스 미들웨어 만들어보고 이해하기 (10:18)
07. redux 미들웨어-03. redux-logger 사용 및 미들웨어와 DevTools 함께 사용 (5:05)
07. redux 미들웨어-04. redux-thunk (9:24)
07. redux 미들웨어-05. redux-thunk로 Promise 다루기 A - thunk 작성하기 (14:19)
07. redux 미들웨어-06. redux-thunk로 Promise 다루기 B - reucerUtils 작성 (13:29)
07. redux 미들웨어-07. redux-thunk로 Promise 다루기 C - createPromiseThunk 로 리팩토링하기 (12:49)
07. redux 미들웨어-08. redux-thunk로 Promise 다루기 D - handleAsyncActions (8:15)
07. redux 미들웨어-09. redux-thunk로 Promise 다루기 E - 포스트 리스트 구현하기 (7:01)
07. redux 미들웨어-10. redux-thunk로 Promise 다루기 F - 라우터 연동, 특정 포스트 읽기 (12:42)
07. redux 미들웨어-11. 사용자 경험 개선 A - 포스트 리스트 데이터 유지 및 포스트 데이터 초기화 (8:13)
07. redux 미들웨어-12. 사용자 경험 개선 B - 포스트 데이터 상태 구조 바꾸기 (12:52)
07. redux 미들웨어-13. 사용자 경험 개선 C - createPromiseThunkBlyd, handleAsyncActionsByld 유틸함수 작성 (9:33)
07. redux 미들웨어-14. Thunk 함수에서 리액트 라우터 History 사용하기 (5:16)
07. redux 미들웨어-15. json-server (6:54)
07. redux 미들웨어-16. CORS and Proxy (5:13)
07. redux 미들웨어-17. redux-saga A - 소개, Generator 문법 (12:26)
07. redux 미들웨어-18. redux-saga B - 기초 비동기 카운터 구현 (14:19)
07. redux 미들웨어-19. redux-saga C - 프로미스 다루기 (11:35)
07. redux 미들웨어-20. redux-saga D - 프로미스 관련 saga 리팩토링 (7:20)
07. redux 미들웨어-21. redux-saga E - 라우터 연동 (3:50)
07. redux 미들웨어-22. redux-saga F - select로 현재 상태 조회하기 (3:15)
8장 | 벨로퍼트와 함께하는 모던 리액트 : 타입스크립트와 리액트 함께 사용하기 - 김민준 강사
08. 타임스크립트,리액트 함께사용-00. 소개 (3:19)
08. 타임스크립트,리액트 함께사용-01. 타입스크립트 연습 A - 작업환경 설정, 기본타입, 함수 (15:43)
08. 타임스크립트,리액트 함께사용-02. 타임스크립트 연습 B - Interface, Type Alias (13:35)
08. 타임스크립트,리액트 함께사용-03. 타입스크립트 연습 C - Generics (9:56)
08. 타임스크립트,리액트 함께사용-04. 타입스크립트로 리액트 컴포넌트 만들기 (16:33)
08. 타임스크립트,리액트 함께사용-05. 타입스크립트로 리액트 상태 관리 A - useState, 이벤트 (13:04)
08. 타임스크립트,리액트 함께사용-06. 타입스크립트로 리액트 상태 관리 B - useReducer (16:33)
08. 타임스크립트,리액트 함께사용-07. 타입스크립트와 Context API 활용하기 (12:09)
08. 타임스크립트,리액트 함께사용-08. 타입스크립트와 리덕스 A - 기초 (21:20)
08. 타임스크립트,리액트 함께사용-09. 타입스크립트와 리덕스 B - 투두리스트 민들기 (21:00)
08. 타임스크립트,리액트 함께사용-10. typesafe-actions 로 리덕스 모듈 리팩토링 (16:23)
08. 타임스크립트,리액트 함께사용-11. 리덕스 모듈 여러 파일로 분리하기 (7:59)
08. 타임스크립트,리액트 함께사용-12. 타입스크립트와 리덕스 미들웨어 사용하기 A - redux-thunk (19:33)
08. 타임스크립트,리액트 함께사용-13. 타입스크립트와 리덕스 미들웨어 사용하기 B - 프리젠테이셔널 컴포넌트 (11:00)
08. 타임스크립트,리액트 함께사용-14. 타입스크립트와 리덕스 미들웨어 사용하기 C - 컨테이너 컴포넌트 (4:53)
08. 타임스크립트,리액트 함께사용-15. 타입스크립트와 리덕스 미들웨어 사용하기 D - thunk, 리듀서 리팩토링 (24:19)
08. 타임스크립트,리액트 함께사용-16. 타입스크립트와 리덕스 미들웨어 사용하기 E - redux-saga (7:26)
08. 타임스크립트,리액트 함께사용-17. 타입스크립트와 리덕스 미들웨어 사용하기 F - saga 리팩토링 (11:12)
08. 타임스크립트,리액트 함께사용-18. 마무리 (3:16)
TypeScript
Chapter 00. Intro - 01. 코스소개 (2:43)
Chapter 01. TypeScript 시작하기 - 01. TypeScript 소개 및 개발환경 구성 (10:03)
Chapter 01. TypeScript 시작하기 - 02. TypeScript 컴파일러 (20:15)
Chapter 01. TypeScript 시작하기 - 03. TypeScript 컴파일러 설정파일 (11:34)
Chapter 01. TypeScript 시작하기 - 04. 변수선언 (16:36)
Chapter 01. TypeScript 시작하기 - 05. 기본타입 (17:50)
Chapter 01. TypeScript 시작하기 - 06. 인터페이스 (18:39)
Chapter 01. TypeScript 시작하기 - 07. 함수형 타입 (14:41)
Chapter 01. TypeScript 시작하기 - 08. enum 타입 (9:34)
Chapter 02. TypeScript - 01. 클래스 - 1 (15:25)
Chapter 02. TypeScript - 02. 클래스 - 2 (12:57)
Chapter 02. TypeScript - 03. 제네릭 - 1 (8:47)
Chapter 02. TypeScript - 04. 제네릭 - 2 (4:49)
Chapter 02. TypeScript - 05. 제네릭 - 3 (11:04)
Chapter 03. 고급타입 - 01. Intersection & Union Types (18:06)
Chapter 03. 고급타입 - 02. 타입 별칭 (7:59)
Chapter 03. 고급타입 - 03. 인덱스타입 (9:28)
Chapter 04. 실습 - 01. Parcel과 모듈 (11:58)
마크다운
Chapter 01. 개요 - 01. 개요 (9:56)
Chapter 02. 문법 - 01. 제목 (4:51)
Chapter 02. 문법 - 02. 강조 (6:09)
Chapter 02. 문법 - 03. 목록 (6:51)
Chapter 02. 문법 - 04. 링크 (10:06)
Chapter 02. 문법 - 05. 이미지 (5:18)
Chapter 02. 문법 - 06. 코드 강조 (8:11)
Chapter 02. 문법 - 07. 표 (7:47)
Chapter 02. 문법 - 08. 인용문 (2:32)
Chapter 02. 문법 - 09. 원시 HTML (3:26)
Chapter 02. 문법 - 10. 수평선과 줄바꿈 (2:42)
더 나은 사용자 경험을 위한 UI 컴포넌트 제작
01. 강좌 소개 (3:05)
02. 개발 환경 안내 (2:16)
03. 개발 환경 설정 (6:25)
04. 2019 UX 트렌드 (5:59)
Github 따라 만들기 예제 실습
Ch 01. 준비 - 01. 준비 (7:41)
Ch 02. HEAD 설정 - 01. Viewport, IE 랜더링 (7:52)
Ch 02. HEAD 설정 - 02. 오픈그래프와 트위터카드 (6:40)
Ch 02. HEAD 설정 - 03. 파비콘(Favicon) (5:06)
Ch 02. HEAD 설정 - 04. Google Fonts (7:03)
Ch 02. HEAD 설정 - 05. 브라우저 스타일 초기화(Reset) (7:36)
Ch 03. 공통 - 01. 최상위 요소, BEM (8:39)
Ch 03. 공통 - 02. 전역 스타일 - 버튼 (15:08)
Ch 03. 공통 - 03. 전역 스타일 - 입력 양식 (10:45)
Ch 03. 공통 - 04. 전역 스타일 - 입력 양식 - Vendor Prefix (6:02)
Ch 04. Header - 01. 구조 파악 (3:16)
Ch 04. Header - 02. 왼쪽 콘텐츠 구조 (6:47)
Ch 04. Header - 03. SVG 배경과 대체텍스트 - 1 (9:34)
Ch 04. Header - 04. SVG 배경과 대체텍스트 - 2 (13:27)
Ch 04. Header - 05. 오른쪽 콘텐츠 구조 (13:15)
Ch 04. Header - 06. 좌우 분할(Float), 요소 정렬(Flex)과 순서(Order) - 1 (8:05)
Ch 04. Header - 07. 좌우 분할(Float), 요소 정렬(Flex)과 순서(Order) - 2 (10:58)
Ch 05. Visual - 01. 구조 파악 (2:37)
Ch 05. Visual - 02. Summary 구조 (5:33)
Ch 05. Visual - 03. Section 배경, Summary의 공통 스타일 - 1 (10:10)
Ch 05. Visual - 04. Section 배경, Summary의 공통 스타일 - 2 (11:06)
Ch 05. Visual - 05. Visual - 회원가입 양식 구조 (8:03)
Ch 05. Visual - 06. Visual - 회원가입 양식 스타일 - 1 (10:28)
Ch 05. Visual - 07. Visual - 회원가입 양식 스타일 - 2 (9:26)
Ch 06. Feature - 01. 구조 파악 (4:00)
Ch 06. Feature - 02. 비디오(Youtube) 구조 (3:24)
Ch 06. Feature - 03. 개별 정렬(Margin), 16대9 반응형 비디오 (11:07)
Ch 06. Feature - 04. Tiles 구조 (7:05)
Ch 06. Feature - 05. Tiles 반응형 이미지 (7:01)
Ch 06. Feature - 06. Tiles 4컬럼 스타일(Grid) (6:23)
Ch 06. Feature - 07. Tiles 4컬럼 스타일(Float) (4:10)
Ch 07. Where is - 01. 구조 파악, API란 (6:13)
Ch 07. Where is - 02. 스타일 (4:37)
Ch 07. Where is - 03. Google 지도 API (9:53)
Ch 08. Pricing - 01. 구조 파악 및 정의 (3:27)
Ch 08. Pricing - 02. 스타일 (6:40)
Ch 09. Footer - 01. 구조 파악, 메뉴 링크와 카피라이트 (5:46)
Ch 09. Footer - 02. 메뉴 스타일, 순서가 다른 좌우 분할(Float) (6:03)
Ch 09. Footer - 03. SVG 태그와 fill 속성, 중앙 배치(Position) (5:50)
Ch 10. 반응형 - 01. 미디어쿼리 (14:23)
Ch 10. 반응형 - 02. 미디어옵션 (4:37)
Ch 10. 반응형 - 03. Medium Device - 토글 버튼 - 1 (9:57)
Ch 10. 반응형 - 04. Medium Device - 토글 버튼 - 2 (8:35)
Ch 10. 반응형 - 05. Medium Device - Header 콘텐츠 - 1 (13:42)
Ch 10. 반응형 - 05. Medium Device - Header 콘텐츠 - 2 (15:11)
Ch 10. 반응형 - 07. Medium Device - 리사이즈 이벤트 (9:58)
Ch 10. 반응형 - 08. Medium Device - Visual 콘텐츠 (5:44)
Ch 10. 반응형 - 09. Medium Device - Feature, Where is, Pricing, Footer 콘텐츠 (7:43)
Ch 10. 반응형 - 10. Medium Device - 미디어쿼리 파일 관리 (6:57)
Ch 10. 반응형 - 11. Small Device - 전체 콘텐츠 - 1 (10:11)
Ch 10. 반응형 - 12. Small Device - 전체 콘텐츠 - 2 (7:54)
JavaScript - 이웅재 강사님
01. 자바스크립트란 무엇인가? (3:34)
02. 다양한 자바스크립트 (2:13)
03. 실습을 위한 준비 (3:14)
04. Expression, Statement (5:05)
05. Keywords, Reserved Words (3:39)
06. Identifer (4:39)
07. Comments (2:31)
08. 변수와 상수 (5:04)
09. 변수의 유효 범위 (12:24)
10. var 와 호이스팅 (7:02)
11. 변수와 자료형 - 04. 자료형 (22:26)
12. 조건문 (1) (10:12)
13. 조건문 (2) (7:23)
14. 조건문 (3) (11:57)
15. 조건문 (4) (8:57)
16_1. 반복문 - 1 (8:10)
16_2. 반복문 - 2 (5:10)
17. 함수 A (10:57)
18. 함수 B (9:40)
19. 함수 C (9:26)
20_1. 객체 A (8:33)
20_2. 객체 B (11:43)
20_3. 객체 C (7:25)
20_4. 객체 D (5:14)
25. Promise (1) (10:00)
26. Promise (2) (10:26)
27. Promise (3) (8:38)
28. Promise (4) (14:03)
29. async function 과 await (1) (12:04)
30. async function 과 await (2) (11:54)
31. 프로젝트 개요 (4:23)
32. 리스트 페이지 (20:25)
33. 로그인 페이지
34. 책 추가하기
35. 책 정보 보기 (13:51)
36. 책 정보 수정
Webpack
01. Module 이해하기 (4:23)
02. CommonJS 모듈 예제 (8:30)
03. Module Keyword - 가져오기 (ESM) (4:58)
04. Module의 종류 (1:57)
05. redline 모듈 예제 (2:20)
06. 도형의 넓이 예제 (7:52)
07. Module 마무리 (1:22)
08. Bundle이란 (3:14)
09. Webpack 이해하기 (3:30)
10. Webpack의 기본구조 (4:37)
11. 웹팩의 기본구조 소개 (entry, output), 예제 A (9:55)
12. 웹팩의 기본구조 (entry, output) 예제 B (5:54)
13. Mode & Loader & Plugin (4:15)
14. Development Mode & Production Mode (10:07)
15. Loader (17:11)
16. Plugin (5:56)
17. 웹팩 기본구조 정리하기 (2:31)
18. Webpack 설정하기 (8:08)
19. Caching & Webpack (14:54)
20. Chunk & chunkhash (8:47)
21. Minification & Mangling (17:56)
22. Development Mode & Production Mode (13:23)
23. Development Mode & Production Mode - 2 (8:00)
24. Development Mode & Production Mode - 3 (12:13)
25. File loader (22:21)
26. URL-loader (9:00)
27. SASS loader (18:24)
28. POSTCSS (12:24)
29. BROWSERSLIST (6:31)
30. stylelint (9:29)
31. BABEL (14:22)
32. WEBPACK 마무리 (3:02)
Chapter 01. 리액트 입문 - 21. useReducer - App 에서 useReducer 사용하기
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock
course builder. Create your online course today.
Start now
course builder. Create your online course today.
Start now
course builder. Create your online course today.
Start now