BEST

The 'Perfect' Front-End Course Created at [Code Camp] Bootcamp

Name: The 'Perfect' Front-End Course Created at [Code Camp] Bootcamp
Price: 297000 KRW
Rating: 5 (13 reviews)

This is the perfect front-end curriculum from a "real" boot camp that has produced hundreds of developers. With this one course, you can grow to the level of a junior developer and gain the skills and knowledge to utilize the front-end tech stack. [Code Camp] has prepared this so that anyone can build a career regardless of their social, economic, or educational background :)

(5.0) 13 reviews

416 learners

이론 실습 모두

코드캠프

코딩독학

React

Next.js

GraphQL

React Native

Hybrid App

What you will gain after the course

A friendly [CSS & Javascript] to prepare you for advanced courses.
Web Frontend Using the Latest Tech Stack
Hybrid App Frontend for Practical Skills
2 mini portfolios, 2 practical portfolios
Complete understanding of the entire development cycle

Core technologies of the front-end
Why should we use React.js and Next.js?

Next.js is a framework for the React library . Unlike React, Next.js uses server-side rendering (SSR) by default, making it ideal for search engine optimization (SEO) . It also allows for pre-rendering, allowing pages to be loaded with pre- rendered data, improving the user experience.

In addition to this , it provides page-based routing, image optimization, built-in CSS, etc. to improve project performance and provide a convenient development environment for developers, so you can develop efficiently and with high performance :)

Finally, it's the era of hybrid apps!
Based on React and Next, you can develop hybrid apps more conveniently and efficiently using React.Native and Expo, and build services for Android and iOS .

In addition, one of the Wanp lectures
Get this much stack at once!

In this course, you'll learn through projects utilizing a variety of major stacks, including React and Next.js, as well as TypeScript and GraphQL. You'll learn how to use these languages organically to implement a single function, naturally gaining a deeper understanding of various technology stacks.

In real-world practice, you need to be able to use various languages and technology stacks appropriately to achieve maximum efficiency!

*version: This is the main stack version used during the course. (Please refer to this if necessary!)

 - "next" : "14.2.13" ,
- "react" : "^18" ,
- "react-dom" : "^18" ,
- "typescript" : "^5"
- "@apollo/client" : "^3.11.8" ,
- "graphql" : "^16.9.0" ,
- "react-hook-form" : "^7.53.1" ,
- "zod" : "^3.23.8" ,
- "zustand" : "^5.0.0" ,
- "tailwindcss" : "^3.4.1" ,

Don't worry if you don't understand 'Version' and its corresponding technology stack. I'll explain it thoroughly and helpfully in the lecture :)

💡 Please check your computer specifications .

 · Mac OS specifications are irrelevant.  
· If you are using Window OS, you need to install git-bash. 
- Please refer to Class Materials > Environment Settings.  
- Intel Core i5 9th generation or higher / AMD RYZEN 5 2nd generation or higher 

- RAM 16GB or more recommended

💡 I recommend that you create a schedule and study regularly and consistently . 💡 Please create an account for the collaboration tool ‘Notion’ to receive learning materials. 💡 Learning materials required for the course are provided through Notion (link) . ※ The copyright of the learning materials belongs to Code Camp. Unauthorized use, distribution, or reproduction is prohibited.

`Q. Can I take the course without any knowledge?`

Yes. It's okay if you don't know the 'code' of coding. To help you understand more deeply and broadly, we offer a 'Start with Free Camp' course, which is a complete beginner course , and a 'CSS&JS Master Course' course, which is an intermediate course to go to the boot camp.

`Q. If I have basic knowledge, where should I start taking the course?`

If you only understand basic HTML, CSS, and Javascript, I recommend starting with the 'CSS&JS Master Course '. If you have a solid understanding of CSS and Javascript through government-funded education or other online education, you can start with the 'Web Front-End Bootcamp' .

`Q. Is there an efficient way to take the Web Front-End Bootcamp course?`

Please take the lectures by section! On average, each section is divided into 3 to 5 subtopics. Since it is a systematic class, I recommend making a schedule and studying regularly!
If you have a learning assignment, please do it! The learning assignment is divided into sections with and without it. It would be helpful if you did the learning assignment before doing the portfolio assignment!
Please complete the required assignments (portfolio assignments)! The required assignments for each section provided based on the section content are mandatory for portfolio creation! However, reference codes for reference are only provided up to the middle part! Please keep in mind that you must be able to write all the codes yourself after that to use the real portfolio.

`Q. What is a stepped curriculum?`

The curriculum for Perfect Front-End has a continuous lecture structure that goes on and on ! For example, in order to take [Section 26-02 Refresh Token], you have to copy the code written in [Section 23-07] and continue the class. In other words, you have to take [Section 23-07] and write the code, and also review it to know what the code is, right? Don't worry if you want to skip certain sections and just take the ones you're curious about! The instructor's class code is provided separately for you to download! However, if it's not the code you wrote yourself in class, but the code you downloaded, you need to understand that code to follow along!

`Q. I have a question during class.`

Please leave your questions in the community and we will give you a quick and refreshing answer 😁

`Recommended for these people`

Who is this course right for?

Anyone who wants to grow properly with a professional curriculum
Anyone who feels lacking in government-funded or other lectures
Anyone who wants to study coding systematically with sufficient assignments
Junior developers who need a mentor
Job seekers who want to build a trendy portfolio

Need to know before starting?

Passion and determination for coding 💪🏻

`Hello This is`

15,396

Learners

448

Reviews

227

Answers

4.8

Rating

14

Courses

"Try anything, Try everything!" 코드캠프는 유능한 개발자를 양성하며 개발의 미래를 바꾸고자 하는 목표를 가지고 있습니다. 사회적, 경제적, 교육적 배경에 상관없이 누구에게나 커리어 전환의 기회를 제공하기 위해 인프런에 나타났답니다. 코캠과 함께 커리어 점프에 도전하세요!

Co-instructor

`Curriculum`

All

444 lectures ∙ (162hr 6min)

Course Materials:

Lecture resources


1. 👉 Section 01: Understanding Web App Services & Program Installation
2. [01-01] What is a Web App Service?
03:21
3. [01-02] Program Installation (VS Code, Extension)
07:53
4. 👉 Section 02: Understanding HTML and Technology Stack
5. [02-01] HTML is a set of agreed-upon 'commands'.
11:30
6. [02-02] The Core of HTML
42:25
7. [02-03] Understanding the Technology Stack
06:14
8. 👉 Section 03: CSS Basics and Cyworld Practice Part 1
9. [03-01] Learning CSS
25:28
10. [03-02] CSS Alignment
20:43
11. [03-03] Creating Cyworld Part 1
43:24
12. 👉 Section 04: JavaScript Basics and Cyworld Practice Part 2
13. [04-01] Understanding the Web Language 'Javascript'
02:40
14. [04-02] Variables and Constants
17:07
15. [04-03] Arrays
24:30
16. [04-04] Objects
20:40
17. [04-05] Creating Cyworld Part 2
39:42
18. 👉 Section 05: JavaScript Practice and Cyworld Practice Part 3
19. [05-01] Data Types and Operators17:29
20. [05-02] Conditional Statements19:53
21. [05-03] Loops22:18
22. [05-04] Mathematical Objects06:43
23. [05-05] DOM10:41
24. [05-06] Creating Cyworld Part 327:30
25. 👉 Section 06: JavaScript Applications and Cyworld Practice Part 4
26. [06-01] Functions09:13
27. [06-02] How to Write Functions14:20
28. [06-03] Built-in Functions24:08
29. [06-04] Creating Cyworld Part 423:30
30. 👉 Section 07: Javascript Event Change Detection and Cyworld Practice Part 5
31. [07-01] Built-in Functions Review10:59
32. [07-02] Event Change Detection16:04
33. [07-03] Creating Cyworld Part 543:24
34. 👉 Section 08: Final Assignment and Github Grass Planting
35. [08-01] Final Assignment07:55
36. [08-02] Git/Github22:01


37. CSS&Javascript Master OT
05:35
38. 👉 Section 01
39. [CSS 01-1-1] Spacing - CSS Introduction and Spacing Settings
27:53
40. [CSS 01-1-2] Spacing - Box Sizing
08:00
41. [CSS 01-1-3] Spacing - Margin Collapse
09:38
42. [CSS 01-2-1] Alignment - Item Alignment
12:09
43. [CSS 01-2-2] Alignment - Moving Overflowing Items Down
12:18
44. [CSS 01-2-3] Alignment - Why flexbox vertical alignment doesn't work
12:44
45. [JS 01-1-1] Variables and Functions - Storing Various Data
26:55
46. [JS 01-1-2] Variables and Functions - Variables and String Assembly
11:14
47. [JS 01-1-3] Variables and Functions - Functions and Scope
33:37
48. [JS 01-2-1] Utilizing Variables and Functions - Hoisting
12:50
49. [JS 01-2-2] Using Variables and Functions - Problems Caused by Hoisting and TDZ
18:52
50. [JS  01-2-3] Utilizing Variables and Functions - DOM
30:39
51. 👉 Section 02
52. [CSS 02-1-1] Transformation and Animation - Transition
11:40
53. [CSS 02-1-2] Transformation and Animation - Transform
14:43
54. [CSS 02-1-3] Transforms and Animations - Animation
11:29
55. [CSS 02-2-1] Animation Applications - Toast
13:17
56. [CSS 02-2-2] Animation Applications - Loading
09:19
57. [CSS 02-2-3] Animation Applications - Skeleton
11:58
58. [JS 02-1-1] Browser Features - Storage
21:55
59. [JS 02-1-2] Browser Features - Storage and JSON Saving
15:17
60. [JS 02-1-3] Browser Features - Routing
18:46
61. [JS 02-2-1] Conditional Statements and Loops - Conditional Filtering
26:21
62. [JS 02-2-2] Conditional Statements and Loops - Item Iteration
01:06:16
63. [JS 02-2-3] Conditional Statements and Loops - Advanced Item Iteration
34:21
64. 👉 Section 03
65. [CSS 03-1-1] Position - Absolute Positioning09:20
66. [CSS 03-1-2] Position - Relative Positioning08:19
67. [CSS 03-1-3] Position - Screen Location07:05
68. [CSS 03-2-1] Scroll - Creating Scroll17:24
69. [CSS 03-2-2] Scroll - Fixing Header on Scroll06:28
70. [CSS 03-2-3] Scroll - Making the Scroll Header Background Blurry04:38
71. [JS 03-1-1] Scroll - Scroll17:26
72. [JS 03-1-2] Scroll - Scroll and Address Bar11:44
73. [JS 03-1-3] Scroll - Event Listeners and Scroll Detection19:42
74. [JS 03-2-1] Event Bubbling - 118:36
75. [JS 03-2-2] Event Bubbling - 213:55
76. [JS 03-2-3] Event Bubbling - Event Capturing12:04
77. 👉 Section 04
78. [CSS 04-1-1] Responsive Design - Responsive Design10:00
79. [CSS 04-1-2] Responsive Design - Media Queries18:19
80. [CSS 04-1-3] Responsive Design - Improving Maintainability with rem12:48
81. [CSS 04-2-1] Responsive and Grid Combination - Grid Alignment15:36
82. [CSS 04-2-2] Responsive and Grid Combination - Flexbox and Grid Comparison13:10
83. [CSS 04-2-3] Responsive and Grid Combination - Mixing Flexbox and Grid11:48
84. [JS 04-1-1] Device Detection - Device Size Detection Not Applied22:26
85. [JS 04-1-2] Device Detection - Applying Device Size Detection12:33
86. [JS 04-1-3] Device Detection - Device Dynamic Scroll Detection09:28
87. [JS 04-2-1] Mobile Detection - Mobile Detection09:41
88. [JS 04-2-2] Mobile Detection - Mobile Pinch Zoom In/Out13:30
89. [JS 04-2-3] Mobile Detection - Mobile Virtual Keyboard11:03
90. 👉 Section 05
91. [CSS 05-1-1] Stacking Context and Z-Index - z-index09:20
92. [CSS 05-1-2] Stacking Context and Z-Index - Stacking Context17:42
93. [CSS 05-1-3] Stacking Context and Z-Index - Refactoring20:32
94. [CSS 05-2-1] Modal and Nested Modal - Creating Modal Background09:05
95. [CSS 05-2-2] Modal and Nested Modal - Creating Modal Items16:00
96. [CSS 05-2-3] Modal and Nested Modal - Creating Nested Modals16:43
97. [JS 05-1-1] Keyboard Detection - Keyboard Detection25:53
98. [JS 05-1-2] Keyboard Detection - Keyboard and Input Field08:50
99. [JS 05-1-3] Keyboard Detection - Form Concepts and Keyboard Features in Forms13:37
100. [JS 05-2-1] Browser API - API and Web API12:56
101. [JS 05-2-2] Browser API - Navigator31:00
102. [JS 05-2-3] Browser API - Timer23:30
103. 👉 Section 06
104. [CSS 06-1-1] Image Fitting and Ratio - Changing Image Fit08:09
105. [CSS 06-1-2] Image Fitting and Ratio - Changing Image Ratio09:38
106. [CSS 06-1-3] Image Fitting and Ratio - Simultaneous Image Fitting and Ratio Changes08:59
107. [CSS 06-2-1] Page Transition Animation - Flying Animation12:49
108. [CSS 06-2-2] Page Transition Animation - Flying and Rotating Animation10:02
109. [CSS 06-2-3] Page Transition Animation - Combined Animation for Previous and Next Pages16:31
110. [JS 06-1-1] Open API - Sentence18:33
111. [JS 06-1-2] Open API - Image15:23
112. [JS 06-1-3] Open API - Image Applications10:23
113. [JS 06-2-1] Menu Navigation - Copying Pages for Menu Navigation15:23
114. [JS 06-2-2] Menu Navigation - iframe for Menu Navigation15:32
115. [JS 06-2-3] Menu Navigation - Components for Menu Navigation12:25
116. 👉 Section 07
117. [CSS 07-1-1] Advanced UI - Changing accent colors07:59
118. [CSS 07-1-2] Advanced UI - Custom Toggle23:24
119. [CSS 07-1-3] Advanced UI - Custom Dropdown41:30
120. [CSS 07-2-1] Dark Mode - Dark Mode10:41
121. [CSS 07-2-2] Dark Mode - Dark Mode and Various Tags08:11
122. [CSS 07-2-3] Dark Mode - Dark Mode and CSS Global Variables11:36
123. [JS 07-1-1] Search and Debouncing - Search14:23
124. [JS 07-1-2] Search and Debouncing - Debouncing13:05
125. [JS 07-1-3] Search and Debouncing - Debouncing and API11:41
126. [JS 07-2-1] Infinite Scroll and Throttling - Infinite Scroll20:26
127. [JS 07-2-2] Infinite Scroll and Throttling - Throttling20:57
128. [JS 07-2-3] Infinite Scroll and Throttling - Throttling and API09:25
129. 👉 Section 08
130. [CSS 08-1-1] Calendar - Custom Calendar - Click Area10:56
131. [CSS 08-1-2] Calendar - Custom Calendar - Placeholder15:18
132. [CSS 08-1-3] Calendar - Selection and Validation09:50
133. [CSS 08-2-1] Gradients - Linear Gradients14:06
134. [CSS 08-2-2] Gradients - Radial Gradients06:03
135. [CSS 08-2-3] Gradient - Text Gradient12:26
136. [JS 08-1-1] Pagination Numbers - Pagination16:48
137. [JS 08-1-2] Pagination Numbers - Previous/Next Page Numbers13:06
138. [JS 08-1-3] Pagination Numbers - Last Page Number21:31
139. [JS 08-2-1] Pagination List - Clicked Page Example List12:25
140. [JS 08-2-2] Pagination List - Clicked Page List13:05
141. [JS 08-2-3] Pagination List - Active Display for Clicked Page14:21
142. 👉 Section 09
143. [CSS 09-1-1] Cross-browsing - Coding HTML and CSS in Notepad11:59
144. [CSS 09-1-2] Cross-browsing - Cross-browsing19:58
145. [CSS 09-1-3] Cross-Browser Compatibility - Browser Versions and CAN-I-USE, MDN22:16
146. [CSS 09-2-1] Font - Font08:03
147. [CSS 09-2-2] Font - Font and Loading22:25
148. [CSS 09-2-3] Fonts - Fonts and Cross-browsing10:58
149. [JS 09-1-1] Cross-browsing - Coding HTML, CSS in Notepad10:57
150. [JS 09-1-2] Cross-browsing - Cross-browsing Issues14:33
151. [JS 09-1-3] Cross-browsing - Browser Versions and CAN-I-USE, MDN23:38
152. [JS 09-2-1] Web Standards and Accessibility - Search Engine Optimization (SEO)17:42
153. [JS 09-2-2] Web Standards and Accessibility - SEO and Web Standards07:30
154. [JS 09-2-3] Web Standards and Accessibility - SEO and Web Accessibility10:05
155. 👉 Section 10
156. [CSS 10-1-1] Library - Bootstrap10:31
157. [CSS 10-1-2] Library - Material Design05:21
158. [CSS 10-1-3] Library - Tailwind CSS16:12
159. [CSS 10-2-1] Trends and Directions - Stage 127:03
160. [CSS 10-2-2] Trends and Directions - Stage 214:40
161. [CSS 10-2-3] Trends and Directions - Stage 312:07
162. [JS 10-1-1] Library - Full Page Scroll09:26
163. [JS 10-1-2] Library - Web Editor16:14
164. [JS 10-1-3] Library - Drag and Drop08:47
165. [JS 10-2-1] Trends and Directions - Stage 116:46
166. [JS 10-2-2] Trends and Directions - Stage 219:25
167. [JS 10-2-3] Trends and Direction - Stage 316:00
168. 🔥 CSS&Javascript Master Course PPT Download🔥
169. 🔥 CSS&Javascript Master Course Code Download🔥
170. 🔥 CSS&Javascript Master Assignment Reference Code Download🔥


171. 👉 Section 01
172. [01-01] React and Components
52:38
173. [01-02] props and state
41:09
174. [01-03] Why We Use React (Changing Things Simultaneously)
34:57
175. [01-04] state validation (membership registration validation)
47:02
176. [01-05] Module import and export
18:08
177. 👉 Section 02
178. [02-01] Creating React CRA in One Go
33:16
179. [02-02] React Boilerplate
32:23
180. [02-03] React Page Navigation
46:26
181. [02-04] The Principle of setState52:08
182. [02-05] Things that represent False14:26
183. 👉 Section 03
184. [03-01] TypeScript41:40
185. [03-02] Basic Types54:21
186. [03-03] Linter and Formatter43:22
187. 👉 Section 04
188. [04-01] Next World46:49
189. [04-02] Next Page Navigation21:10
190. [04-03] CSS-Module37:32
191. [04-04] Next Built-in Features (Fonts, Images)40:23
192. 👉 Section 05
193. [05-01] Data Communication Theory50:24
194. [05-02] Data Communication Practice01:25:13
195. 👉 Section 06
196. [06-01] Synchronous/Asynchronous36:35
197. [06-02] GraphQL Setup12:24
198. [06-03] Post Registration and Network Error Resolution31:21
199. [06-04] Post Registration Practice54:00
200. 👉 Section 07
201. [07-01] Static Routing15:57
202. [07-02] Basic Post Retrieval48:40
203. [07-03] Post Retrieval Practice49:58
204. 👉 Section 08
205. [08-01] Loop map26:01
206. [08-02] map Precautions47:28
207. [08-03] Destructuring Assignment and Custom Hooks01:04:19
208. 👉 Section 09
209. [09-01] Edit Post39:36
210. [09-02] Advanced Post Editing01:08:41
211. [09-03] Practical Post Editing32:23
212. [09-04] Post Edit Folder Structure Refactoring01:19:53
213. [09-05] Post Edit Type Enhancement28:27
214. 👉 Section 10
215. [10-01] API Types37:41
216. 👉 Section 11
217. [11-01] Event Propagation and Bubbling20:36
218. [11-02] Event Propagation and Stopping57:34
219. 👉 Section 12
220. [12-01] Libraries and Frameworks01:03:07
221. [12-02] UI Framework Practice - Star Rating35:14
222. [12-03] UI Framework Practice - Carousel26:09
223. [12-04] Library - Postal Code Modal56:01
224. [12-05] Refactoring(prev state)27:53
225. [12-06] Library (TypeScript)04:28
226. [12-07] Safe Refactoring18:36
227. 👉 Section 13
228. [13-01] children36:38
229. [13-02] children TypeScript12:37
230. [13-03] Layout38:41
231. [13-04] Hiding Layout15:28
232. [13-05] Component Composition and Setup10:30
233. 👉 Section 14
234. [14-01] Pagination Basics41:50
235. [14-02] Pagination Previous/Next/Last Page46:26
236. [14-03] Refactoring (Lifting State Up)01:04:20
237. 👉 Section 15
238. [15-01] Spread Operator and Data Copying46:29
239. [15-02] Data Copy Practical Application43:36
240. [15-03] el and TypeScript12:00
241. [15-04] Infinite Scroll26:07
242. [15-05] Spread Operator and Refactoring36:46
243. [15-06] Spread Operator and Data Deletion09:22
244. 👉 Section 16
245. [16-01] Class Components and this01:06:41
246. [16-02] Component Lifecycle17:59
247. [16-03] Component Lifecycle and useEffect31:55
248. [16-04] useEffect and open-API20:13
249. 👉 Section 01
250. [17-01] CORS and PROXY Server25:04
251. [17-02] Web Structure30:55
252. [17-03] Backend and DB01:04:50
253. [17-04] Server and Port27:47
254. [17-05] Backend API38:35
255. [17-06] Backend API and DB Integration32:16
256. [17-07] Firebase (BaaS)39:57
257. 👉 Section 18
258. [18-01] Image Saving Process22:34
259. [18-02] Image Upload45:50
260. [18-03] useRef and Image Button12:32
261. [18-04] Image Validation and Registration33:14
262. [18-05] Register with Post Image27:35
263. 👉 Section 19
264. [19-01] Search33:04
265. [19-02] Search Term Debouncing28:57
266. [19-03] Highlighting Search Keywords19:10
267. [19-04] Search Term TypeScript10:06
268. 👉 Section 20
269. [20-01] callback / promise / async-await01:17:28
270. [20-02] Callback Use Cases and the Reality of el, prev22:14
271. [20-03] GraphQL Reality37:20
272. [20-04] Promise Operating Principles22:19
273. [20-05] Creating Your Own fetch with Promise13:48
274. 👉 Section 21
275. [21-01] Global State (Server Data Cache and fetchPolicy)46:06
276. [21-02] Global State (Server Data Cache and Update)16:14
277. [21-03] Global State (Local Data Cache)25:46
278. 👉 Section 22
279. [22-01] Login39:29
280. [22-02] JWT Token Practice25:14
281. [22-03] User Registration and Encryption13:21
282. [22-04] Login Practice43:15
283. [22-05] Login Token and Refresh45:48
284. [22-06] Login and Token Validation08:40
285. 👉 Section 23
286. [23-01] Closures and HOF26:49
287. [23-02] HOF23:41
288. [23-03] HOC31:21
289. [23-04] Generic Types35:32
290. [23-05] Generics and HOF/HOC24:28
291. 👉 Section 24
292. [24-01] Form Library33:04
293. [24-02] Validation Library30:24
294. [24-03] Utility Types29:09
295. [24-04] Applying Utility Types33:11
296. 👉 Section 25
297. [25-01] Common Components33:18
298. [25-02] Common Components and Base Components35:31
299. [25-03] Common Components and Generic Types23:42
300. [25-04] Common Components and Advanced Generic Types29:23
301. [25-05] Understanding Library Versions10:37
302. [25-06] Common Component npm Distribution49:30
303. [25-07] Common Component npm Organization Distribution17:46
304. 👉 Section 26
305. [26-01] Login Extension31:34
306. [26-02] Refresh Token01:15:28
307. [26-03] Refresh Token and Refresh41:15
308. [26-04] Sequential Promises19:09
309. 👉 Section 27
310. [27-01] Payment Process22:23
311. [27-02] PortOne48:08
312. 👉 Section 28
313. [28-01] Date/Time and Browser15:40
314. [28-02] Date/Time and Function Execution04:46
315. [28-03] Date/Time and Event Loop19:34
316. [28-04] Microqueue and Microqueue25:17
317. [28-05] Microtask Queue and await Principles42:37
318. 👉 Section 29
319. [29-01] Map29:45
320. [29-02] Maps and SPA32:29
321. [29-03] Maps and Libraries05:12
322. 👉 Section 30
323. [30-01] Web Editor and Form Library30:16
324. [30-02] Web Editor and Form Submission29:33
325. [30-03] Web Editor and XSS30:55
326. [30-04] OWASP Top 1008:57
327. [30-05] Hydration11:57
328. [30-06] Advanced Hydration38:41
329. 👉 Section 31
330. [31-01] Memoization39:22
331. [31-02] Memoization Applications23:13
332. [31-03] Memoization and map20:36
333. [31-04] Browser Rendering44:03
334. [31-05] Image Preview Performance Improvement28:26
335. [31-06] New Image Method and Post Registration16:10
336. [31-07] Multiple Upload and Promise.all24:33
337. [31-08] Multi-image Upload Performance Improvement31:52
338. [31-09] Refetch Performance Improvement41:47
339. [31-10] Bookmark/Like/Subscribe Performance Improvement34:06
340. [31-11] Data Query Performance Improvement25:43
341. [31-12] Image Retrieval Performance Improvement18:30
342. [31-13] File Lookup Performance Improvement36:00
343. [31-14] Windowing and Infinite Scroll Performance Optimization46:12
344. [31-15] Frontend Performance Optimization Complete Guide12:00
345. 👉 Section 32
346. [32-01] The Reality of the Browser Address Bar31:50
347. [32-02] Open Graph31:08
348. [32-03] Dynamic Open Graph01:01:48
349. [32-04] RSC and fetch34:32
350. [32-05] RSC and Hydration29:57
351. [32-06] Parent RCC and Child RSC14:48
352. [32-07] RCC and RSC Synthesis23:00
353. 👉 Section 33
354. [33-01] RCC/RSC Composition for Form Refactoring53:22
355. [33-02] RSC and Modern Form Development Direction25:19
356. [33-03] RSC and Modern Web Development Direction11:09
357. [33-04] Shallow Routing for Search Refactoring51:32
358. [33-05] Parallel routing for modal refactoring28:04
359. [33-06] Fragments for GraphQL Refactoring45:42
360. 👉 Section 34
361. [34-01] Backend Proxy Server35:17
362. 👉 Section 35
363. [35-01] Test Code35:08
364. [35-02] UI Testing23:07
365. [35-03] Feature Testing14:18
366. [35-04] API Mocking Test01:08:06
367. [35-05] E2E Testing29:33
368. [35-06] Misconceptions about Test Code and TDD03:11
369. 👉 Section 36
370. [36-01] Deployment40:38
371. [36-02] Static Page Deployment31:34
372. [36-03] Domain Connection36:42
373. [36-04] Network and Troubleshooting29:24
374. [36-05] SSL and HTTPS48:38
375. [36-06] Dynamic Page Deployment01:09:32
376. [36-07] Dynamic Page Domain Access15:35
377. [36-08] Dynamic Page Load Balancer Connection48:42
378. [36-09] Wireshark and API08:40
379. [36-10] Docker01:14:42
380. [36-11] Docker and Port Forwarding17:25
381. [36-12] Docker Build Performance Improvement18:31
382. 🔥 Web Front-end Bootcamp Course Code Download🔥
383. 🔥 Web Front-end Bootcamp Assignment Reference Code Download🔥


384. Hybrid-App Bootcamp OT11:30
385. 👉 Section 01
386. [01-01] Cross-platform and Hybrid Apps04:08
387. [01-02] React Native and Expo17:02
388. [01-03] Emulator and Simulator40:53
389. [01-04] React Native Tags37:42
390. [01-05] WebView13:37
391. [01-06] WebView and Next Integration19:05
392. [01-07] WebView Connection Failed19:47
393. 👉 Section 02
394. [02-01] Mobile UI Design and Hybrid App Advantages04:54
395. [02-02] Increasing Mobile UI Ratio36:52
396. [02-03] Mobile Layout Header37:34
397. [02-04] Local Header48:53
398. [02-05] Advanced Header Options33:29
399. [02-06] Mobile Layout Footer27:49
400. 👉 Section 03
401. [03-01] WebView Debugging44:32
402. [03-02] Device and WebView Data Transfer-119:03
403. [03-03] Device and WebView Data Transfer-218:19
404. [03-04] Device API36:04
405. [03-05] Advanced Device API41:22
406. [03-06] Device API Refactoring44:29
407. 👉 Section 04
408. [04-01] Device System Information API48:22
409. [04-02] Device Location API33:05
410. [04-03] Device API Object Lookup Refactoring43:55
411. 👉 Section 05
412. [05-01] Notification Process07:44
413. [05-02] Schedule Notification52:14
414. [05-03] Notification Click32:30
415. 👉 Section 06
416. [06-01] App Permission Settings43:39
417. [06-02] App State Detection37:58
418. 👉 Section 07
419. [07-01] View Original Photo46:42
420. [07-02] Pinch Zoom27:54
421. 👉 Section 08
422. [08-01] Android Back Button27:25
423. [08-02] useEffect and Memory Leaks21:03
424. [08-03] useEffect and Custom Hooks16:33
425. [08-04] Android Back Button and Memory Leak Refactoring53:39
426. 👉 Section 09
427. [09-01] Page Transition Animation56:03
428. [09-02] Page Transition Animation (Back Navigation)33:35
429. 👉 Section 10
430. [10-01] App Login10:42
431. [10-02] App Login Practice01:02:06
432. [10-03] App Login Token Theft07:23
433. [10-04] App Login Token Hijacking Practice28:33
434. 👉 Section 11
435. [11-01] Pull-to-refresh55:26
436. 👉 Section 12
437. [12-01] Micro Frontend16:33
438. [12-02] Micro Frontend Practice (Web)01:11:33
439. [12-03] Microfrontend Practice (App Connection)44:01
440. 👉 Section 13
441. [13-01] Hybrid App Deployment12:42
442. [13-02] Hybrid App Deployment and EAS08:19
443. [13-03] Hybrid App Test Deployment Practice30:04
444. 🔥 HybridApp Bootcamp Lecture Code & PPT Download🔥

Published:

Last updated:

`Reviews`

All

13 reviews

5.0

13 reviews

joloReviews 4 ∙ Average Rating 5.0
5
30% enrolled
saintjoker040059Reviews 5 ∙ Average Rating 4.4
5
60% enrolled
abcd123123Reviews 325 ∙ Average Rating 5.0
5
5% enrolled
devwon1004Reviews 8 ∙ Average Rating 5.0
5
30% enrolled
topjhoh20Reviews 1 ∙ Average Rating 5.0
5
30% enrolled

Limited time deal ends in 00:57:46

$228.80

24%

$304.70

`codecamp's other courses`

Check out other courses by the instructor!


[VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)
codecamp
Throw away those simple services you can make with vibe coding in just 10 minutes!
You can learn 'real' practical vibe coding.

Let's create advanced services at the level of actual services according to planning and design with Cursor AI NCOP.
No Code, Only Prompt
중급이상
React, Next.js, cursor
[VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)
codecamp


[Code Camp] Highly concentrated backend course created at boot camp
codecamp
This is a curriculum full of Captain's personal feelings, an 8-year full-stack developer who fell in love with coding. It is filled with Captain's desire to teach everything about the backend! As you listen to this lecture, you will find yourself thinking, 'Does he really teach this much?' Let's start with this lecture that thoroughly explains even the parts that everyone finds difficult.
입문
NestJS, Node.js, JavaScript
[Code Camp] Highly concentrated backend course created at boot camp
codecamp


[Code Camp] Powerful CSS
codecamp
Have you seen a lecture that only collects CSS? In this lecture, you will implement everything from the most basic layout composition to responsiveness while working on a total of two projects! Now, if you are ready, let's get started.
초급
HTML/CSS
[Code Camp] Powerful CSS
codecamp


Hybrid App with Expo Framework to Increase Web Developer's Salary
codecamp
This course will help you develop mobile apps that can be serviced on Android and iOS using web development.
초급
React, Next.js, expo
Hybrid App with Expo Framework to Increase Web Developer's Salary
codecamp


[CSS&JS Master] - Create a trendy emotional diary
codecamp
You can learn the latest CSS properties and practical Javascript while working on a project.
입문
HTML/CSS, JavaScript, vanilla-javascript
[CSS&JS Master] - Create a trendy emotional diary
codecamp


[Code Camp] Javascript Algorithm Theory + Practice for Beginners
codecamp
Algorithms seem so difficult... Even students who are not good at math can finish the basics of algorithms in one go with this class! We will teach you the basic concepts needed to solve algorithms step by step, and even Codecamp's know-how on applying them to problems :)
초급
JavaScript
[Code Camp] Javascript Algorithm Theory + Practice for Beginners
codecamp


[Code Camp] A highly concentrated front-end course created at Bootcamp
codecamp
This is a highly concentrated curriculum from a ‘real’ bootcamp that has produced over 300 developers in a year. With just this one class, you will be able to grow to the level of a junior developer in the field and gain the ability and knowledge to use the front-end technology stack. [InflearnX Code Camp] has prepared this so that anyone can build a career regardless of their social, economic, or educational background :)
입문
React, Next.js, GraphQL
[Code Camp] A highly concentrated front-end course created at Bootcamp
codecamp


[Code Camp] Warm Javascript
codecamp
There are many other languages.. Why JavaScript? JavaScript is the most widely used language in the world, and it has an easy-to-understand structure that even non-majors can learn quickly. In addition, famous companies such as Google, PayPal, and Amazon use it! Do you need to think any further?
입문
JavaScript
[Code Camp] Warm Javascript
codecamp


[Code Camp] Start with Pre-Camp
codecamp
This course is made with the exclusive curriculum of Coding Bootcamp. It consists of the most basic and practical contents. Start with this course, ‘Anyone can change careers to become a developer.’
입문
HTML/CSS, JavaScript
[Code Camp] Start with Pre-Camp
codecamp

`Similar courses`

Explore other courses in the same field!


[Code Camp] A highly concentrated front-end course created at Bootcamp
codecamp
This is a highly concentrated curriculum from a ‘real’ bootcamp that has produced over 300 developers in a year. With just this one class, you will be able to grow to the level of a junior developer in the field and gain the ability and knowledge to use the front-end technology stack. [InflearnX Code Camp] has prepared this so that anyone can build a career regardless of their social, economic, or educational background :)
입문
React, Next.js, GraphQL
[Code Camp] A highly concentrated front-end course created at Bootcamp
codecamp


Frontend Masterclass
hoonyhan
This is an advanced frontend course for students and professionals with at least 1 year of web development experience. The ideal audience consists of those with 2-3+ years of industry experience who are experiencing a skill plateau or want to learn about product architecture considerations for large enterprises.
중급이상
JavaScript, React, Functional Programming
Frontend Masterclass
hoonyhan


From Events to SPA, the Essential Engine of Interactive Web - [Complete DOM Mastery Part 2]
nhcodingstudio
This course goes beyond simple DOM manipulation, deeply learning how to dynamically compose and react to web UIs within interactions with actual users. It's structured for you to learn by directly implementing common issues encountered in practice, from the essence of event systems, bubbling and capturing, event delegation, real-time UX feedback, to performance optimization using throttle & debounce. Based on an understanding of the DOM tree structure, you will develop the ability to flexibly connect event flow and state changes.
초급
HTML/CSS, JavaScript, React
From Events to SPA, the Essential Engine of Interactive Web - [Complete DOM Mastery Part 2]
nhcodingstudio


Things They Don't Teach You in Bootcamps (React Rendering Optimization) Part 2
aftercamp
Master React rendering principles and optimization to apply them in real-world situations and prepare for interviews!
중급이상
React, react-usememo, Tech Interview
Things They Don't Teach You in Bootcamps (React Rendering Optimization) Part 2
aftercamp


A real introductory all-in-one development boot camp for non-majors
grab
The ultimate full-stack course that teaches even beginners about web, server, mobile apps, and machine learning!!
If you're not sure where to start with development, I highly recommend this course. It's all done with just Javascript!
입문
JavaScript, React, Node.js
A real introductory all-in-one development boot camp for non-majors
grab


Full Stack React Toy Project - REST, GraphQL (for FE Developers)
jaenam
Practice REST API and GraphQL while creating a simple SNS service based on React. 
We introduce how to easily and simply create a backend environment for frontend development.
초급
REST API, GraphQL, React
Full Stack React Toy Project - REST, GraphQL (for FE Developers)
jaenam


Hybrid App with Expo Framework to Increase Web Developer's Salary
codecamp
This course will help you develop mobile apps that can be serviced on Android and iOS using web development.
초급
React, Next.js, expo
Hybrid App with Expo Framework to Increase Web Developer's Salary
codecamp


[VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)
codecamp
Throw away those simple services you can make with vibe coding in just 10 minutes!
You can learn 'real' practical vibe coding.

Let's create advanced services at the level of actual services according to planning and design with Cursor AI NCOP.
No Code, Only Prompt
중급이상
React, Next.js, cursor
[VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)
codecamp


[Renewal] Creating NodeBird SNS with React
zerocho
Let's create a Twitter-like SNS service with React & Next & Redux & Redux Saga & Express stack. Finally, we will deploy it to AWS after SEO.
중급이상
React, Redux, Node.js
[Renewal] Creating NodeBird SNS with React
zerocho


[JavaScript GUI Development #1] Timer App with Electron + React (+ Zustand)
dakgangjung123
This is a practical course where you will directly create a timer app using React, Electron, and Zustand, and even deploy it to cross-platforms (Windows, macOS, Linux).
Starting with familiar React web development, you can learn the entire flow of desktop app development, including global state management via Zustand and final GUI deployment!
초급
React, Electron, GUI
[JavaScript GUI Development #1] Timer App with Electron + React (+ Zustand)
dakgangjung123


React Native with Expo: Learning Properly from ZeroCho
zerocho
Web developers (especially React developers) can now truly easily launch apps. With Expo, you can launch both Android and iOS apps even faster. Let's become a developer who can quickly launch apps with Expo.
초급
React, React Native, Hybrid App
React Native with Expo: Learning Properly from ZeroCho
zerocho


Creating an Avatar Community App (React Native Expo)
Kyo
We develop an avatar-based community app with React Native. You'll learn to build a comprehensive community app, covering post creation, comments/replies, likes, voting, avatar generation, etc.
초급
React Native, TypeScript, expo
Creating an Avatar Community App (React Native Expo)
Kyo


Non-Developer Creates Profitable Service in Just 4 Weeks: AI Vibe Coding Web + App ALL IN ONE
dingcodingco
Don't know coding? OK!
Turn your ideas into real revenue in just 4 weeks.
Using AI and the latest tools, create websites and apps simultaneously and connect them directly to services.
입문
Flutter, Next.js, cursor
Non-Developer Creates Profitable Service in Just 4 Weeks: AI Vibe Coding Web + App ALL IN ONE
dingcodingco


Complete Mastery of GraphQL (Full-stack Course Learning by Building a Kiosk) - [2024 Partial Renewal]
Indie Coder
You will learn the basics and advanced usage of GraphQL, the next-generation API control technology, and gain real-world project experience through a virtual kiosk service created with GraphQL. 

The course has been partially updated to the latest version, apollo-server v4, as of February 2024.
초급
GraphQL, Svelte, MongoDB
Complete Mastery of GraphQL (Full-stack Course Learning by Building a Kiosk) - [2024 Partial Renewal]
Indie Coder


Next.js Full Course to Dip In (English Audio & Korean Subtitles)
ludgi
A full course of hands-on Next.js! Complete a real-world project with the latest technologies such as GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, and Grafana, and experience both the App Router and Page Router.
중급이상
Next.js, React, GraphQL
Next.js Full Course to Dip In (English Audio & Korean Subtitles)
ludgi


Vibe Coding: Building a Voice Memo App with Next.js + FastAPI + Faster-Whisper
ludgi
This is a practical project course on running Whisper locally and quickly developing an AI speech recognition app using FastAPI and Next.js. You'll implement real-time speech recognition and complete a project that can be used as a simple portfolio piece in a short amount of time.
초급
Next.js, FastAPI, whisper
Vibe Coding: Building a Voice Memo App with Next.js + FastAPI + Faster-Whisper
ludgi


GraphQL: A technology to replace the REST API
Burger
An opportunity to learn both the front-end and back-end of GraphQL at once
초급
GraphQL, Spring Boot, Node.js
GraphQL: A technology to replace the REST API
Burger


Claude Code Perfect Mastery: From AI Development Workflow Basics to Practice (with Cursor AI)
gymcoding
Explore → Plan → Implement → Commit. Master the proven AI development workflow with Claude Code.
Learn through 23 missions covering MCP, sub-agents, and prompt engineering, and complete 3 real-world projects.
입문
React, Next.js, cursor
Claude Code Perfect Mastery: From AI Development Workflow Basics to Practice (with Cursor AI)
gymcoding


The 10x AI-Native Developer: How to Achieve Overwhelming Results with AI at Work
dingcodingco
AI is no longer a choice but a matter of survival.
Reduce development time from 3 days to 30 minutes, delegate repetitive tasks to AI, and focus on solving more important problems.
With AI-native development methods that you can apply immediately in real work rather than just theory, we'll show you the definitive way to be recognized as "the developer who's good with AI" at your company.
초급
Spring Boot, Next.js, AI
The 10x AI-Native Developer: How to Achieve Overwhelming Results with AI at Work
dingcodingco


Practical TypeScript Learning with Official Documentation
sowhatcoding
If you want to understand TypeScript properly, you should read the official documentation at least once, right?

This lecture will convey only the important parts of the documentation in an easy-to-understand manner,
and also teach you the content you need in practice!
입문
TypeScript, JavaScript, ES6
Practical TypeScript Learning with Official Documentation
sowhatcoding

The 'Perfect' Front-End Course Created at [Code Camp] Bootcamp

What you will gain after the course

Made in a 'real' boot camp [The Complete Front-End Course]

Start with pre-camp

CSS&JS Master 🆕

Web Front-End Bootcamp 🆕

Hybrid App Bootcamp 🆕

For these people It's a perfect fit

For a higher career jump We provide bootcamp course materials and assignments.

With the code I filled in with my own hands Complete your portfolio.

Start with pre-camp

CSS&JS Master

Web Front-End Bootcamp

Hybrid App Bootcamp

Core technologies of the front-end Why should we use React.js and Next.js?

In addition, one of the Wanp lectures Get this much stack at once!

Not missing a single gap Front-end bootcamp curriculum that 'crosses the line'

#01. React and Next.js

#02. JS and Asynchronous Core

#03. Component Design

#04. Cash

#05. Login and Security

#06. Advanced functions

#07. Performance Optimization

#08. Frontend Server

#09. Test

#10. Web Distribution

#01. Mobile CSS Structure

#02. Web/App Communication

#03. Advanced features

#04. Micro Frontend

#05. App Login

#06. App Distribution

[Complete Frontend Course] After taking the course, I too can become a developer!

For a higher career jump [Backend course] has also been prepared.

Related recommended courses:

for a moment! Please check before taking the class.

if Do you have any questions?

Q. Can I take the course without any knowledge?

Q. If I have basic knowledge, where should I start taking the course?

Q. Is there an efficient way to take the Web Front-End Bootcamp course?

Q. What is a stepped curriculum?

Q. I have a question during class.

Team Code Camp Introducing.

Recommended for these people

HelloThis is .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}

Curriculum

Reviews

codecamp's other courses

Similar courses

Made in a 'real' boot camp
[The Complete Front-End Course]

For these people
It's a perfect fit

For a higher career jump
We provide bootcamp course materials and assignments.

With the code I filled in with my own hands
Complete your portfolio.

Core technologies of the front-end
Why should we use React.js and Next.js?

In addition, one of the Wanp lectures
Get this much stack at once!

`Not missing a single gap Front-end bootcamp curriculum that 'crosses the line'`

`#01. React and Next.js`

`#02. JS and Asynchronous Core`

`#03. Component Design`

`#04. Cash`

`#05. Login and Security`

`#06. Advanced functions`

`#07. Performance Optimization`

`#08. Frontend Server`

`#09. Test`

`#10. Web Distribution`

`#01. Mobile CSS Structure`

`#02. Web/App Communication`

`#03. Advanced features`

`#04. Micro Frontend`

`#05. App Login`

`#06. App Distribution`

`[Complete Frontend Course] After taking the course, I too can become a developer!`

`For a higher career jump [Backend course] has also been prepared.`

`Related recommended courses:`

`for a moment! Please check before taking the class.`

`if Do you have any questions?`