정가
131,000원
총 결제 금액
131,000원
웹 프론트엔드 개발에 필요한 것들을 모두 담았다. 프론트엔드 기본부터 프로젝트 실습까지!
HTML/CSS 기초부터
리액트 포트폴리오까지
비전공자를 위한 취업 로드맵
현직 5년 차 개발자의 멘토링으로 정적 웹페이지부터 API 연동 SPA까지, 실무형 프로젝트 3종으로 4주 만에 완성하세요.
혹시 이런 고민을 하고 계신가요?
"왜 독학으로 리액트를 공부하면 중도 포기하게 될까요?"
"HTML/CSS를 배웠는데 왜 나만의 웹사이트는 디자인이 깨질까요?"
"비전공자가 4주 만에 실무 투입 가능한 수준으로 성장할 수 있을까요?"
강의 핵심 포인트
POINT 01
검증된 로드맵
현직 시니어 개발자가 설계하여 취업과 실무에 꼭 필요한 핵심 기술 스택(Tech Stack)만 담았습니다.
POINT 02
최신 리액트
현업 표준인 함수형 컴포넌트와 Hooks 패턴을 중심으로 학습하여 입사 후 즉시 적응 가능합니다.
POINT 03
포트폴리오 완성
깃허브에 즉시 업로드하고 이력서에 기재할 수 있는 수준의 완성도 높은 프로젝트 3종을 확보합니다.
무엇을 배우게 되나요?
01
웹 표준 & SEO 최적화
검색엔진이 좋아하는 시맨틱 마크업(Semantic Markup)과 반응형 구조를 설계합니다.
02
자바스크립트 핵심 로직
ES6+ 문법과 DOM 조작, 비동기 처리를 통해 동적인 기능을 완벽하게 제어합니다.
03
리액트 실무 워크플로우
컴포넌트 설계부터 Hooks 상태 관리까지 SPA 개발 프로세스를 익힙니다.
04
취업용 포트폴리오
서류 합격률을 높이는 고퀄리티 결과물(도감, 반응형 사이트)을 완성합니다.
커리큘럼 상세
HTML5 & 시멘틱 웹
웹 접근성과 SEO를 고려한 시맨틱 태그 활용법, 폼 요소 마스터를 통해 탄탄한 뼈대를 구축합니다.
CSS3 & Responsive Layout
Flexbox와 Grid 시스템의 완벽 이해, 미디어 쿼리를 활용한 반응형 웹 제작을 학습합니다.
자바스크립트 ES6+
변수(let/const), 화살표 함수, 비동기 처리(Promise) 등 모던 자바스크립트 핵심을 정복합니다.
리액트 & SPA 아키텍처
컴포넌트 생명주기, Hooks 패턴, Axios를 이용한 서버 통신까지 실무형 애플리케이션을 구축합니다.
실전 프로젝트 3종
자주 묻는 질문
Q.코딩 경험이 전무한 비전공자도 4주 만에 가능한가요?
네, 가능합니다. 본 강의는 '노베이스'를 기준으로 설계되었습니다. HTML 기초부터 시작해 단계별로 살을 붙여가며 완성하기 때문에 포기하지 않고 따라오실 수 있습니다.
Q.리액트를 위해 자바스크립트를 따로 공부해야 하나요?
별도의 선행 학습이 필요 없습니다. 커리큘럼 내에 '리액트를 위한 핵심 자바스크립트' 과정이 포함되어 있어, 필요한 문법을 익히고 자연스럽게 프레임워크로 넘어갑니다.
Q.수강 후 취업이나 이직에 도움이 될까요?
물론입니다. 단순 문법 암기가 아닌, 현업 개발자의 사고방식과 문제 해결 능력을 기르는 데 초점을 맞췄습니다. 완성된 프로젝트 코드는 기술 면접에서 강력한 무기가 됩니다.
강사
메타 브레인
Meta Brains는 코딩, 금융, 그리고 엑셀에 대한 깊은 열정을 가진 숙련된 소프트웨어 개발자와 금융 전문가들이 함께 설립한 전문 교육 브랜드입니다. 폭넓은 실무 경험과 교육적 전문성을 바탕으로 누구나 접근할 수 있는 세계 수준의 교육 프로그램을 제공하고 있습니다.
현재 Meta Brains는 차세대 컴퓨팅 혁명으로 주목받는 메타버스에 집중하고 있으며, 미래 기술과 혁신을 함께 이끌어 갈 다음 세대 인재를 양성하는 것을 목표로 하고 있습니다. 협업과 학습을 통해 모두가 함께 메타버스를 구축하고 개발해 나갈 수 있도록 돕는 것이 이들의 핵심 미션입니다.
커리큘럼
01-1차시 소개
02
01-2차시 HTML5 기능들
03
01-3차시 HTML5 사용의 이점
04
01-4차시 HTML5의 활용 범위 및 사용 맥락
05
01-5차시 HTML5 편집기 소개
06
01-6차시 비주얼 스튜디오 코드 다운로드 및 설치
07
02-1차시 HTML 태그란 무엇인가
08
02-2차시 HTML5 파일 구조
09
02-3차시 파일 및 폴더 구조 설계
10
02-4차시 HTML5 파일 만들기 (기초)
11
03-1차시 HTML 헤딩 태그 사용법
12
03-2차시 HTML5 인용 및 출처 태그
13
03-3차시 HTML 코드 주석 처리 방법
14
03-4차시 HTML5 속성 사용법
15
03-5차시 HTML 내에서 스타일 적용하기
16
04-1차시 앵커 태그 사용법
17
04-2차시 이미지 태그 사용법
18
04-3차시 단락 태그 사용법
19
04-4차시 줄바꿈 태그 사용법
20
04-5차시 테이블 태그 사용법
21
04-6차시 리스트 태그 사용법
22
04-7차시 비디오 요소 사용법
23
04-8차시 오디오 요소 사용법
24
05-1차시 폼(form) 태그 기본
25
05-2차시 입력(input) 타입들
26
05-3차시 입력 속성: 크기, 읽기-전용, 비활성 등
27
05-4차시 추가 입력 속성: 최소/최대, 복수 입력, 플레이스홀더 등
28
05-5차시 필수 입력 (required) 설정
29
06-1차시 블록 요소 vs 인라인 요소 — 개념 소개
30
06-2차시 블록 / 인라인 요소의 실제 동작 분석
31
07-1차시 HTML5 파트 정리 및 요약
32
08-1차시 CSS3 소개
33
08-2차시 CSS3 문법
34
08-3차시 CSS3의 활용 방식들
35
08-4차시 CSS3의 종류
36
08-5차시 CSS 선택자와 색상 설정
37
09-1차시 배경 스타일
38
09-2차시 테두리(border) 스타일
39
09-3차시 외곽선(outline) 스타일
40
09-4차시 높이와 너비 설정
41
09-5차시 여백(margin)과 안쪽 여백(padding) 설정
42
10-1차시 텍스트 정렬 (text-align)
43
10-2차시 텍스트 장식 (text-decoration)
44
10-3차시 텍스트 변환 (text-transform)
45
10-4차시 텍스트 간격 (letter/line spacing)
46
10-5차시 글꼴 패밀리 설정 (font-family)
47
10-6차시 아이콘(font-awesome) 사용법
48
11-1차시 display 속성
49
11-2차시 위치 지정 (position)
50
11-3차시 z-index
51
11-4차시 overflow 속성
52
11-5차시 float 속성
53
11-6차시 DOM 모델 관련 속성
54
11-7차시 Pseudo-Classes (1)
55
11-8차시 Pseudo-Classes (2)
56
11-9차시 Pseudo-Elements
57
12-1차시 불투명도(opacity)와 !important
58
12-2차시 border-radius
59
12-3차시 box-shadow
60
13-1차시 Grid 시스템
61
13-2차시 Flexbox
62
13-3차시 미디어 쿼리 (반응형 디자인)
63
14-1차시 미니 프로젝트
64
15-1차시 자바스크립트 소개 및 역사
65
15-2차시 자바스크립트 문법 및 개요
66
15-3차시 자바스크립트 실행 방식
67
15-4차시 자바스크립트에서 HTML 태그 사용하기
68
16-1차시 자바스크립트의 var
69
16-2차시 전역 및 지역 변수
70
16-3차시 고급 console.log 사용법
71
17-1차시 if 문
72
17-2차시 if-else 문
73
17-3차시 삼항 연산자
74
17-4차시 switch 문
75
17-5차시 if-else if 문
76
17-6차시 break / continue
77
17-7차시 데이터 타입
78
18-1차시 산술 연산자
79
18-2차시 할당 연산자
80
18-3차시 비교 연산자
81
19-1차시 alert 팝업
82
19-2차시 confirm 팝업
83
19-3차시 prompt 팝업
84
19-4차시 함수 기본
85
19-5차시 매개변수 있는 함수
86
19-6차시 반환값 있는 함수
87
20-1차시 이벤트 처리
88
21-1차시 while 루프
89
21-2차시 do-while 루프
90
21-3차시 for 루프
91
21-4차시 중첩 루프
92
22-1차시 배열 기초
93
22-2차시 배열 수정 및 삭제
94
22-3차시 sort / reverse
95
22-4차시 pop / push
96
22-5차시 shift / unshift
97
22-6차시 concat / join
98
22-7차시 slice / splice
99
22-8차시 isArray 메서드
100
22-9차시 indexOf / lastIndexOf
101
22-10차시 forEach 메서드
102
22-11차시 toString(), valueOf(), fill 메서드
103
22-12차시 includes 메서드
104
22-13차시 some / every 메서드
105
22-14차시 find / findIndex 메서드
106
22-15차시 filter 메서드
107
23-1차시 객체 (Objects)
108
23-2차시 배열을 객체로 취급 (Arrays as Objects)
109
23-3차시 for-in 루프
110
24-1차시 문자열 메서드 — 1부
111
24-2차시 문자열 메서드 — 2부
112
24-3차시 문자열 메서드 — 3부
113
25-1차시 숫자 메서드 (Number methods)
114
25-2차시 Math 메서드 — 1부
115
25-3차시 Math 메서드 — 2부
116
25-4차시 Date 메서드
117
26-1차시 DOM 모델 기초
118
26-2차시 DOM 기타 객체들
119
26-3차시 DOM 요소 가져오기 (Get Methods)
120
26-4차시 DOM 스타일 지정
121
26-5차시 addEventListener (이벤트 리스너)
122
26-6차시 useCapture 옵션
123
26-7차시 classList 메서드
124
26-8차시 부모 노드 다루기 (Parent Nodes)
125
26-9차시 자식 노드들 (Children Nodes)
126
26-10차시 first / last 자식 노드
127
26-11차시 이전 / 다음 형제 노드
128
26-12차시 요소 생성 / 텍스트 노드 생성
129
26-13차시 요소 삽입: appendChild / insertBefore
130
26-14차시 요소 삽입: insertAdjacentElement / insertAdjacentHTML
131
27-1차시 마무리 및 정리
132
28-1차시 리액트 소개
133
28-2차시 첫 리액트 앱 만들기
134
28-3차시 리액트에서 JSX 사용법
135
29-1차시 리액트에서 인라인 / 내부 스타일링
136
29-2차시 리액트에서 템플릿 리터럴 활용
137
29-3차시 리액트 컴포넌트 기본
138
29-4차시 리액트 Props
139
29-5차시 리액트 Hooks
140
30-1차시 리액트 컴포넌트 계층 구조 이해
141
30-2차시 조건부 렌더링 (Conditional Rendering)
142
30-3차시 리액트 useEffect 훅
143
31-1차시 리액트 라우터 DOM
144
31-2차시 라우팅 링크 설정
145
31-3차시 에러 페이지 처리 (리액트 라우터)
146
31-4차시 useNavigate() 훅 사용
147
32-1차시 첫 프로젝트 — Part 1
148
32-2차시 첫 프로젝트 — Part 2
149
33-1차시 계산기 앱 만들기 — Part 1
150
33-2차시 계산기 앱 만들기 — Part 2
151
34-1차시 RESTful API를 React로 구현 — Part 1
152
34-2차시 RESTful API를 React로 구현 — Part 2
153
34-3차시 RESTful API를 React로 구현 — Part 3
154
34-4차시 JSX 내부에서 array.map() 사용하기
155
34-5차시 리액트에서 Material UI 사용법
156
35-1차시 마무리 / 총정리
수강 후기
첫번째 리뷰어가 되어주세요.
소중한 후기가 다른 분들께 도움이 될 거에요.
정가
131,000원
총 결제 금액
131,000원
131,000원
131,000원