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)
01. 기본 문법
Complete and Continue
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