로그인을 해주세요
리액트/뷰 필수 지식┃프론트엔드 핵심 마스터
장바구니
수강신청
“리액트(React)와 뷰(Vue)를 시작하기 전 꼭 알아야 할 모든 것!
개발 환경 설정부터 VS Code 사용법, 모던 자바스크립트 문법까지 한 번에 끝내세요!”
본 강좌는 리액트(React)나 뷰(Vue)와 같은 프론트엔드 프레임워크를 배우기 전, 필수적으로 갖춰야 할 지식을 담은 기초 강좌입니다.
Node.js, npm, VS Code 등 개발 환경을 설정하는 방법부터, 생산성을 높여주는 Emmet 문법, 그리고 프레임워크 학습에 꼭 필요한 모던 자바스크립트의 핵심 문법까지 체계적으로 다룹니다.
특히, let, const, 화살표 함수, 구조 분해 할당, 배열 메서드 등 최신 문법을 풍부한 예제와 함께 학습하여, 프레임워크 공부를 위한 탄탄한 기초를 다질 수 있습니다.
🔹리액트나 뷰 개발을 위한 최적의 환경을 직접 구축하고, VS Code의 주요 기능을 능숙하게 사용할 수 있습니다.
🔹Emmet 문법을 활용해 HTML과 CSS 코드를 빠르고 효율적으로 작성할 수 있습니다.
🔹let/const, 화살표 함수, 구조 분해 할당, 스프레드 연산자 등 모던 자바스크립트의 핵심 개념을 완벽하게 이해하고 활용할 수 있습니다.
🔹리액트 또는 뷰를 배우고 싶지만, 기초 지식이 부족하다고 느끼는 분
🔹개발 환경 설정부터 막히는 프론트엔드 입문자
🔹모던 자바스크립트 문법을 체계적으로 정리하고 싶은 분
강좌는 프론트엔드 개발의 필수 요소들을 크게 세 가지 주제로 나누어 구성되어 있습니다.
Part 1. 프론트엔드 학습 환경 설정 및 VS Code 기초
개발의 첫 단계인 환경 설정부터 시작합니다.
Node.js와 npm을 설치하고, 프론트엔드 개발에 필수적인 도구인 VS Code의 주요 기능과 단축키를 익힙니다.
이 과정을 통해 개발에 필요한 모든 도구를 준비하고, 효율적인 코딩 환경을 구축할 수 있습니다.
Part 2. Emmet 핵심 문법 마스터 (VS Code 자동 완성 기능)
빠른 코딩을 위한 Emmet 문법을 집중적으로 학습합니다.
HTML과 CSS에서 사용하는 다양한 Emmet 문법을 배우고, 반복, 병렬, 그룹핑 기능 등을 활용한 연습문제를 통해 코딩 생산성을 극대화합니다.
Part 3. Modern JavaScript 핵심 문법 마스터
프레임워크 학습의 핵심인 모던 자바스크립트 문법을 상세히 다룹니다.
let, const, 화살표 함수, 구조 분해 할당과 같은 기본 문법부터 스프레드 연산자, map, filter, reduce와 같은 배열 메서드까지, 실제 프레임워크에서 자주 사용되는 기능들을 예제와 함께 학습합니다.
특히, slice와 splice, 얕은 복사와 깊은 복사 등 개발자들이 헷갈리기 쉬운 개념들을 명확하게 정리해 드립니다.
강의목차(총 74강)
-
1. 01강 강의개요 22분
- Part 1. FrontEnd 학습 환경 설정 및 VS Code 기초
-
2. 02강 프론트엔드 개발 공부 순서 및 설치해야 하는 것들 33분
3. 03강 내 PC에 Node.js 및 npm 삭제 후 재설치하기 29분
4. 04강 VS Code 개발 툴 설치 후 제일 먼저 알아야 하는 것들1 31분
5. 05강 VS Code 개발 툴 설치 후 제일 먼저 알아야 하는 것들2 25분
6. 06강 리액트(React) 설치 시 꼭 알아야 하는 백그라운드 지식과 관련 용어 이해 26분
7. 07강 리액트(React) 설치 실습 및 메인 화면 구동하기 34분
8. 08강 VS Code 터미널 모드에서 리액트(React) 설치하기 19분
9. 09강 Live Server 설치 및 기본 사용법 28분
10. 10강 VS Code 에서 JavaScript 코드 실행하기 29분
11. 11강 VS Code 사용 시 꼭 알아야 하는 기능(1) - 멀티 선택 34분
12. 12강 VS Code 사용 시 꼭 알아야 하는 기능(2) - 스틱키(Sticky) 기능 23분
13. 13강 VS Code 단축키 연습문제 19분
14. 14강 VS Code 사용 시 꼭 알아야 하는 기능(3) - 행 관련 주요 기능 36분
15. 15강 VS Code 사용 시 꼭 알아야 하는 기능(4) - 기타 34분
16. 16강 VS Code 사용 시 꼭 알아야 하는 기능(5) - 커스텀 HTML Template 만들기 34분
17. 17강 나만의 커스텀 HTML Template 만들기 - 실습 22분
- Part 2. Emmet 핵심 문법 마스터 (VS Code 자동 완성 기능)
-
18. 01강 VS Code 설치 후 제일 먼저 알아야 하는 것 - Emmet 문법이란 24분
19. 02강 VS Code 설치 후 제일 먼저 알아야 하는 것 - Emmet 문법 기초(1) 30분
20. 03강 VS Code 설치 후 제일 먼저 알아야 하는 것 - Emmet 문법 기초(2) 28분
21. 04강 VS Code 설치 후 제일 먼저 알아야 하는 것 - Emmet 반복 기능 23분
22. 05강 VS Code 설치 후 제일 먼저 알아야 하는 것 - Emmet 병렬 기능 35분
23. 06강 Emmet 연습문제1 34분
24. 07강 Emmet 연습문제2 18분
25. 08강 Emmet 연습문제3 - 캐럿 기능 24분
26. 09강 10분 Break Time - Emmet 공부 가이드 12분
27. 10강 Emmet 연습문제4 20분
28. 11강 VS Code 설치 후 제일 먼저 알아야 하는 것 - Emmet 그룹핑(grouping) 기능 34분
29. 12강 VS Code 설치 후 제일 먼저 알아야 하는 것 - Emmet 그룹핑(grouping) 실습 26분
30. 13강 CSS 에서 사용하는 Emmet 핵심 기능(1) - 기본 31분
31. 14강 CSS 에서 사용하는 Emmet 핵심 기능(2) - CSS ID 사용법 30분
32. 15강 CSS 에서 사용하는 Emmet 핵심 기능(3) - 순차적인 마크 30분
33. 16강 CSS 에서 사용하는 Emmet 핵심 기능(4) - 속성 추가하기 다른 방법 18분
34. 17강 CSS 에서 사용하는 Emmet 핵심 기능(5) - Text 추가 18분
35. 18강 중급 연습문제 실습1 20분
36. 19강 중급 연습문제 실습2 31분
37. 20강 중급 연습문제 실습3 25분
38. 21강 중급 연습문제 실습4 33분
- Part 3. Modern JavaScript 핵심 문법 마스터
-
39. 01강 강의개요 20분
40. 02강 Let, Const, Var 차이점1 및 VS Code에서 JS 실행 35분
41. 03강 [연습문제] const 변수임에도 값 변경이 가능한 경우 - 배열 예제 및 기타 연습 25분
42. 04강 Let, Const, Var 차이점2 - 변수 Scope 30분
43. 05강 For 문에서 Var 사용 시 문제점 33분
44. 06강 For 문에서 값으로 함수를 넣을 때 문제점과 해결 방법 31분
45. 07강 Scope 개념 그림 설명 22분
46. 08강 [연습문제] 선택한 li 메뉴 배경색 바꾸기 36분
47. 09강 화살표 함수(Arrow Function) 33분
48. 10강 Arrow Function 다양한 예제 실습 및 return 사용 시 주의점 33분
49. 11강 return문 중괄호 생략 시 주의점 38분
50. 12강 구조 분해 할당(Destructuring Assignment) - 배열편 27분
51. 13강 구조 분해 할당(Destructuring Assignment) - 객체편 25분
52. 14강 구조 분해 할당 - 원하는 값만 담기, 날짜 분할 대입 31분
53. 15강 구조 분해 할당 - 두 변수의 값 교환하기, Rest 주의할 점 29분
54. 16강 기본값(Default Value) 사용 28분
55. 17강 매개변수 기본값(Default Parameter Value) 30분
56. 18강 Spread 연산자 28분
57. 19강 Spread 연산자 연습문제(1) - 함수에 값 전달하기 21분
58. 20강 Spread 연산자 연습문제(2) - 일반 객체에서 사용하기 25분
59. 21강 Spread 연산자 연습문제(3) - 함수의 인자로 전달 29분
60. 22강 Spread 연산자 연습문제(4) - 순서 위치 32분
61. 23강 Slice vs Splice 차이점과 실습1 29분
62. 24강 Slice vs Splice 차이점과 실습2 18분
63. 25강 복사 이야기(1) 28분
64. 26강 복사 이야기(2) - 등호와 스프레드 차이 vs 객체 생략 표기법 28분
65. 27강 복사 이야기(3) - Shallow Copy vs Deep Copy 29분
66. 28강 배열 작업 시 많이 사용하는 메서드 - map 30분
67. 29강 배열 작업 시 많이 사용하는 메서드 - filter vs 다양한 인덱스 출력 32분
68. 30강 map vs filter 함수 어떤걸 사용하지 30분
69. 31강 reduce(1) - 개념 이해 33분
70. 32강 reduce(2) - 실습 코딩 31분
71. 33강 map, filter, reduce, forEach 메서드 특징들 종합 정리 27분
72. 34강 연습문제(1) - 객체 배열에서 원하는 항목 총합 구하기 29분
73. 35강 연습문제(2) - 20대 비회원 기부금 20만원 이상 총합 구하기 20분
74. 36강 연습문제(3) - reduce로 평균 나이 구하기 17분
