강의

N
챌린지

멘토링

N
클립

로드맵

BEST
개발 · 프로그래밍

/

웹 개발

프론트엔드 마스터클래스

웹 개발 최소 1년 이상의 학생 및 실무자들을 위한 고급 프론트엔드 강좌입니다. 가장 좋은 대상은 현업에서 2~3년 이상의 경험을 하고, 실력의 정체기 또는 대형 기업에서 고려해야하는 제품 구조에 대해 배우고 싶은 분들을 위해 만들어졌습니다.

(4.7) 수강평 14개

수강생 249명

난이도 중급이상

수강기한 무제한

  • 한상훈
실습 중심
실습 중심
마스터과정
마스터과정
JavaScript
JavaScript
React
React
함수형 프로그래밍
함수형 프로그래밍
객체지향
객체지향
Next.js
Next.js
실습 중심
실습 중심
마스터과정
마스터과정
JavaScript
JavaScript
React
React
함수형 프로그래밍
함수형 프로그래밍
객체지향
객체지향
Next.js
Next.js
다나와
LG에너지솔루션
카카오
메가존
현대글로비스

현대글로비스

임직원들도 이 강의를 듣고 있어요!

다나와
LG에너지솔루션
카카오
메가존
현대글로비스

현대글로비스

임직원들도 이 강의를 듣고 있어요!

먼저 경험한 수강생들의 후기

4.7

5.0

관태

33% 수강 후 작성

이기적으로 나만 보고 싶은 강의.. 프론트엔드 지망, 주니어 레벨에 있는 단계라면 레벨 업을 할 수 있는 강의 기초적인 부분보다는 심화에 집중되어 있는 강의 시야가 넓어지고 그저 되는 코드만 작성하는 사람들 중 더 좋은 코드를 짜고 싶은 분들에게 추천!

5.0

열람현

10% 수강 후 작성

안녕하세요 수강신청하고 5시간 30분 정주행하고 후기남깁니다 (전체 강의 10% 정도 봤습니다) 강의를 듣기 전 나의 코딩 수준 - 1년 반 전 바이브 코딩으로 시작. 처음에는 재미있었지만 개발 지식이 없어서 막히는 부분이 답답하여 유튜브로 HTML CSS JS 흐름 공부 - 이때부터 AI와 협업이 잘 되어 제가 원하는 수준의 프로그램이나 홈페이지를 완성하는 과정도 재밌었고 적은 용돈도 벌다가 지금은 본업과 비슷한 수준의 돈을 코딩을 통한 부업으로 벌게되었습니다 - 연봉이 두배가 된 셈이지만, 클로드 오퍼스 모델이 나오면서 크게 느끼는점은 비전공자인 제가 AI와 협업하기에는 더 이상 AI의 능력이 말도안되게 높아져서 '더 효율적으로 할 수 있을거같은데...' 라는 생각을 많이 하게되었습니다. 개발 지식이 없으니까 AI 능력을 극대화하는게 불가능하여 벽을 크게 느꼈어요. - '해줘' -> '안되네, 이런 오류가 있어 다시 해줘' -> ' 이번엔 이런 오류야'... 이렇게 원인도 모른채 될때까지 AI에게만 의지하는 무한 반복을 1년 넘게 해보니 지치기도하고, AI 에이전트를 활용해야되는 시대에 비효율적이라는걸 크게 느끼고 성장하기위해 강의를 찾게되었습니다 이 강의를 선택한 과정 - 유튜브에 매일 쏟아지는 뻔한 AI 에이전트 소개 영상에 지침 - 자기가 만든 서비스는 하나도 없으면서 '어디 어디 회사 몇 년 차' 타이틀로 승부하는 컨텐츠들 - AI에게 물어봐도 알 수 있는 지식들을 AI로 대본 뽑고 대단한것처럼 포장하는 썸네일과 컨텐츠에 실망만하게 됨 - 저처럼 바이브코딩으로 작은 성과라도 내보신 분들은 아실 겁니다. 크리에이터 개발자분들은 100마디 말보다 직접 만든 서비스 하나가 실력을 증명한다는 것을요. 이 강사님의 서비스와 유튜브 컨텐츠를 통해 강의에서 반에 반이라도 흡수할 수 있으면 크게 성장할 수 있을거라고 확신했습니다. 수강 후기 - 모든 개발 개념의 지식을 설명한다기보다 실무에서 직접 사용해본 경험을 공유해주어서 차별화가 확실하고 재미있습니다, 챗 지피티도 할 수 있는 일방적인 설명이 아닌 경험을 공유하는 방식이라 다음 이야기가 궁금해서 집중해서 듣게되요 - AI도 알려주지 않는 실무의 기술들이 너무 많습니다, '그동안 내가 했던건 다 똥꼬쇼였구나....'라고 느낍니다. 이 강의에 나오는 방식을 유튜브에서도 한번도 본적 없는게 너무 많아요. 앞으로도 나만 알고 싶다는 생각이 들 정도에요 - 엘리트 시니어 개발자님은 어떻게 개발하는지 볼 수 있어서 제 AI 파트너를 어떻게 세팅해야할지 어떻게 평생 기술로 장착하고 나아가야할지 확실히 알 수 있어서 정말 좋습니다 - 우리 바이브 코더들은 회사에 취업하는게 목표가 아니라서 개발 지식들을 설명할 수 있을정도로 달달 외우는건 필요하지않고, 어떻게 AI를 설정&구축하고 효율적으로 최종 목표를 달성할 것인가에 집중하기때문에 이 목표를 이루고싶은 바이브코더 동료분들에게 강력 추천합니다. 자유를 얻은 기분이에요ㅎㅎ

5.0

mike1124

100% 수강 후 작성

연휴 동안 완강하려 했는데 정말 양이 많네요. 말 그대로 프론트엔드 전체를 한눈에 볼 수 있는 종합 선물 세트 같은 강의입니다. 전체적인 흐름을 잡을 수 있고, 핵심적인 내용이나 중요한 내용들은 실무 예제 중심으로 설명해주셔서 "이건 연휴 끝나고 바로 회사에서 써봐야겠다" 는 생각이 들 정도로 몰입해서 들을 수 있었어요. 백엔드를 어느정도 해봤어서 이해하는데 더 도움이 됐습니다. 어려운 부분도 강의 자료가 잘되어 있어서 좋았습니다. 그리고 전반적으로 개념적인 설명도 같이 해주셔서 AI 시대에 적합한 좋은 강의라고 느꼈습니다. 이 강의를 듣고 나서 예전엔 안 보이던 부족한 부분이 보이고, 이건 이렇게 개선할 수도 있겠다는 생각도 들었습니다. 이 강의의 목표가 코드를 보는 이전과 다른 눈을 가질 수 있게 된다인데 정말 한 코드를 보고도 많은 생각을 할 수 있게 됐어요. 좋은 강의 감사합니다.

수강 후 이런걸 얻을 수 있어요

  • 고급 프론트엔드 개발 방법론

  • GoF 객체 구조와 이를 실무적으로 적용한 예

프론트엔드 마스터 클래스에 오신걸 환영합니다

많은 개발자분들은 일정 시점부터 성장하지 못하는 모습을 스스로에게 발견하곤 합니다. 어떤걸 더 공부해야할지, 자신에게 부족한 것은 무엇인지, 큰 기업이나 전혀 다른 서비스를 제공하는 회사에서 일하는 개발자들은 어떤 고려사항을 바탕으로 개발할지.


프론트엔드 마스터코스는 기본부터 시작해 현대 프론트엔드 개발을 구성하는 대부분의 뼈대에 해당하는 모듈 및 프로그래밍 방법론을 모두 합쳤습니다. 이 강의를 통해 GoF 방법론에서부터 시작해 리액트와 Next.js의 현대적인 코드 패턴과 사용법, 상태 관리 전략, 디자인 패턴, 코드 구조, 애니메이션 라이브러리 및 테스팅 툴까지 초급 개발자를 벗어나 중급, 고급 개발자로 발전할 수 있는 내용을 담고 있습니다. JavaScript, React, 함수형 프로그래밍, 객체지향, Next.js 등을 깊게 다루며 Vue.js 및 Svelte는 거의 다루지 않습니다.

KakaoTalk_20260116_200748796

2025년 최강루키 선정, 모든 수강생 분들께 감사드립니다.

어떤 분들을 위한 강의인가요?

1. 최소 1년 이상 프론트엔드 공부 또는 업무 경험이 있는 분

기본적인 HTML, CSS, JavaScript에 대한 이해가 있으며, 간단한 웹 애플리케이션을 개발해 본 경험이 있는 분들을 위한 심화 과정입니다. 이미 배운 기초 지식을 바탕으로 더 깊이 있는 프론트엔드 개발 역량을 쌓고 싶은 분들에게 적합합니다.


2. 반복되는 코드 패턴으로 발전을 못 느끼고 있는 현업자 분들

매일 비슷한 코드를 작성하며 성장이 정체된 느낌이 드시나요? 이 강의는 현업에서 자주 마주치는 복잡한 문제들을 효율적으로 해결할 수 있는 다양한 패턴과 접근 방식을 제시합니다. 코드 품질을 높이고 개발 생산성을 향상시키는 고급 기법들을 배울 수 있습니다.


3. Javascript의 깊은 스펙과 개발 패턴에 대해 배움의 필요가 있으신 분

JavaScript를 단순히 사용하는 것에서 벗어나 언어의 깊은 이해를 바탕으로 더 효율적인 코드를 작성하고 싶으신가요? 이 강의에서는 JavaScript의 내부 동작 원리, 비동기 프로그래밍, 함수형 프로그래밍, 디자인 패턴 등 고급 개념들을 실전 예제와 함께 자세히 다룹니다.

상세 커리큘럼

자바스크립트 심화

  • 런타임 구조

  • 콜백 함수와 Promise

  • Web API

  • Map / WeakMap

  • Set / WeakSet

  • 클로저와 메모리 관리

스크린샷 2025-08-09 오전 11.47.08

this에 대한 설명 중 일부

프로그래밍 패러다임

  • 객체 지향 프로그래밍

  • GoF 프로그래밍 디자인 패턴

  • 함수형 프로그래밍

  • 제너레이터 활용법

스크린샷 2025-08-09 오후 12.00.23

빌더 패턴 강의

디자인 패턴

  • 아토믹 디자인 패턴

  • Presentational & Container 패턴

  • FSD 패턴

  • Custom Hooks

  • Compound Components

  • Render Props 패턴

  • Higher-Order Components(HOCs)

  • Memoization

  • Virtualization

  • Props Collections & Getters

  • Slot

  • State Reducer

  • Lifted State

스크린샷 2025-08-09 오전 11.59.48

메모이제이션 강의

상태 관리

  • 상태 관리의 등장 배경

  • Redux 상태 관리

  • Recoil 상태 관리

  • Zustand 상태 관리

  • Jotai 상태 관리

  • Context API 사용 전략

스크린샷 2025-08-09 오전 11.46.32

Jotai 설명 중 일부

React/Next.js 생태계 

  • 리액트 버전별 특징

  • Next.js 버전별 특징

  • Fetching 전략(React-query, SWR, Axios)

  • CSR 데이터 패칭 전략

  • SSR 데이터 패칭 전략

  • ISR 데이터 패칭 전략

  • Next.js의 SEO

스크린샷 2025-08-09 오전 11.47.44

React의 발전 방향 중 일부

스타일링

  • 디자인 시스템 구축 방식

  • Tailwind

  • Emotion.js

  • CSS Modules

스크린샷 2025-08-09 오후 12.05.57

스타일링

폼 관리

  • Form 핸들링

  • 동기/비동기 벨리데이션 전략

  • Form 사용자의 UX

스크린샷 2025-08-09 오후 12.07.25

폼 관리

테스팅

  • Unit 테스트

  • Integration 테스트 전략

  • E2E 테스트 전략

스크린샷 2025-08-09 오전 11.49.01

테스팅

애니메이션

  • GSAP 사용법

  • Motion 사용법

  • Anime.js 사용법

  • 애니메이션 UX 최적화

스크린샷 2025-08-09 오후 12.10.05

타노스 스냅

인증 및 보안

  • OAuth 2.0, NextAuth.js, OpenID Connect

  • 세션 및 토큰 관리

  • Next.js 토큰 전략

  • 양방향 암호화 Payload

스크린샷 2025-08-09 오후 12.15.38

NextAuth.js

성능 최적화

  • Core Web Vitals

  • Critical CSS

  • 코드 스플리팅

  • Lazy Load

  • 이미지/폰트/번들 최적화

스크린샷 2025-08-09 오후 12.12.22

사파리

병렬 처리

  • Web Worker 사용법

  • 브라우저 병렬 처리 성능 향상

  • 브라우저 오프라인 전략

스크린샷 2025-08-09 오후 12.14.43

워커는 셀프

접근성 및 국제화

  • WCAG 2.1 웹 접근성

  • ARIA 사용 사례

  • 접근성 테스트 도구

  • i18n 구현 및 다국어 관리

  • 포맷팅/RTL/통화처리

  • 현지화 성능 전략

스크린샷 2025-08-09 오후 12.13.28

파이어폭스 브라우저 개발툴

개발 도구

  • 개발자 도구 활용법

  • 웹 분석 도구 활용법

  • 번들링 평가 도구 활용법

스크린샷 2025-08-09 오후 12.12.52

레이아웃 변경

방대한 강의자료

수많은 코드 예시와 설명 및 예상되는 질문에 대한 답변으로 강의 자료가 구성되어 있습니다.

스크린샷 2025-08-09 오전 11.44.56

강의 자료 중 일부

수강 전 참고 사항

실습 환경

  • 운영 체제 및 버전(OS): Windows, macOS, Linux 등 모든 OS가 가능합니다.

  • 사용 도구: Cursor 및 인터넷 브라우저

  • PC 사양: 인터넷 접속이 가능한 기본 사양의 PC

학습 자료

  • 제공하는 학습 자료 형식: Miro 등

  • 분량 및 용량: 각 섹션별로 학습 자료 제공

선수 지식 및 유의사항

  • 스스로 프로그래밍 문제를 해결하기 위해 고민해볼 경험이 많을수록 강의 듣는데 도움이 됩니다.

  • 프론트엔드를 넘어 백엔드 및 데브옵스에 대한 경험이 있다면 더 큰 도움이 됩니다.

  • 본 강의의 저작권은 강사에게 있으며, 무단 배포 및 복제를 금지합니다. 학습 자료 역시 저작권이 있으며, 개인적인 학습 목적 외 사용을 금합니다.

수강생 여러분들께


안녕하세요 한상훈입니다.


제가 첫 제품을 만든게 중학교 2학년입니다. 그때 만든 웹 사이트가 인생의 전환점이 될 줄은 몰랐습니다. 처음 만든 웹사이트가 첫 날에 천 명 이상이 방문해주었고, 그때 수십명 이상의 이름 모를 온라인 유저들에게 격려와 칭찬을 받았습니다. 그 경험을 잊지 못하고 저는 계속해서 웹 분야에서 수많은 시도를 해왔습니다.


달콤한 순간을 맛보고 나서부터 끝없이 도전과 실패를 거듭했습니다. 원하는 제품을 만들기 위해서 수년동안 골방에서 개발을 해왔고, 그 과정에서 혼자서 개발을 하는 것의 고통과 어려움을 누구보다 잘 알고 있습니다. 그 감정과 외로움을 잘 알고 있기에 저는 제가 살아온 길을 10년 넘게 꾸준히 기록하며 세상에 알렸습니다. 나와 같이 외로운 환경에서, 나를 가르쳐주는 이가 없는 환경에서 일하고 있는 이들에게 메시지를 전달하고 싶었습니다. '당신은 혼자가 아니다'라고 말해주고 싶었습니다.


저는 현업에서 개발사를 운영하며 수십개의 업체와 만나 수많은 거래를 했고, 많은 제품을 만들었습니다. 그 과정에서 회사마다의 개발 방향과 철학, 중요하게 여기는 것들을 볼 수 있었습니다. 또한 작고 몇몇의 권위적인 개발자 아래에서 안 좋은 코드 패턴과 개발 문화로 고통받는 분들도 봤습니다. 한국의 개발 시장은 이처럼 같은 개발을 하고 있는 것처럼 보이지만 완전히 다른 방식으로 성장해가고 있습니다.


만약 이 글을 보시는 분들이 작은 기업에서 프로젝트를 리드하고 있거나 또는 지금까지 스스로 개발해온 방식에 대해 의문이 생기고, 불안감이 생기고 계시다면 이 강의가 도움이 될 것입니다. 저는 제가 알려드린 방법만을 고집하지 않습니다. 저는 제가 살아오면서 코드에 대해 배우고, 생각하고, 더 나은 코드에 대해 고민한 기록들을 먼저 경험한 한 개발자의 이야기를 들려드리고자 합니다.


진리와 같은 코드는 없습니다. 개발자는 수없이 많은 트레이드 오프를 하며 상황에 따라 더 나은 선택을 찾아야 합니다. 그 과정에 주니어 개발자는 몇가지 선택지만 보고 결정을 한다면 시니어로 가면 더 깊은 통찰력으로 문제를 해석할 수 있습니다. 동일한 작동 방식처럼 보이더라도 다른 형태로 작성하고, 더 읽기 좋은 형태로 작성하는 것은 고민과 경험을 통해 얻어집니다.


이 강의를 통해 여러분이 적어온 과거의 코드들을 볼 때 이전과 다른 눈으로 볼 수 있을 겁니다. 이전과 다른 눈으로 코드를 보면 이전엔 생각해본 적 없는 고민을 하게 되고, 그 고민을 해결하는 과정에서 더 나은 코드를 창조할 수 있습니다. 수많은 선배 개발자들이 밟아온 고민들과 해결책을 강의에 담았습니다. 앞서서 고민한 이들의 해결책들을 보면서 여러분들만의 통찰을 얻어가시길 기원합니다.

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 실력의 정체기가 온 프론트엔드 개발자

  • 최소 1년 이상의 웹 개발 경험과 경력이 있는 분

선수 지식,
필요할까요?

  • 프로그래밍 기초 지식

  • 최소 1년 이상의 웹 개발 경험

  • 기본적인 HTML, CSS 문법에 대한 이해

  • 바닐라 자바스크립트에 대한 기초적인 이해

  • 최소 6개월 이상 React.js 및 Next.js의 사용 경험

안녕하세요
입니다.

249

명

수강생

14

개

수강평

14

개

답변

4.7

점

강의 평점

1

개

강의

풀스택 개발자 한상훈입니다.

유튜브: https://www.youtube.com/@hoony_han

커리큘럼

전체

436개 ∙ (56시간 33분)

강의 게시일: 
마지막 업데이트일: 

수강평

전체

14개

4.7

14개의 수강평

  • mike1124님의 프로필 이미지
    mike1124

    수강평 3

    ∙

    평균 평점 5.0

    5

    100% 수강 후 작성

    연휴 동안 완강하려 했는데 정말 양이 많네요. 말 그대로 프론트엔드 전체를 한눈에 볼 수 있는 종합 선물 세트 같은 강의입니다. 전체적인 흐름을 잡을 수 있고, 핵심적인 내용이나 중요한 내용들은 실무 예제 중심으로 설명해주셔서 "이건 연휴 끝나고 바로 회사에서 써봐야겠다" 는 생각이 들 정도로 몰입해서 들을 수 있었어요. 백엔드를 어느정도 해봤어서 이해하는데 더 도움이 됐습니다. 어려운 부분도 강의 자료가 잘되어 있어서 좋았습니다. 그리고 전반적으로 개념적인 설명도 같이 해주셔서 AI 시대에 적합한 좋은 강의라고 느꼈습니다. 이 강의를 듣고 나서 예전엔 안 보이던 부족한 부분이 보이고, 이건 이렇게 개선할 수도 있겠다는 생각도 들었습니다. 이 강의의 목표가 코드를 보는 이전과 다른 눈을 가질 수 있게 된다인데 정말 한 코드를 보고도 많은 생각을 할 수 있게 됐어요. 좋은 강의 감사합니다.

    • 왕감자님의 프로필 이미지
      왕감자

      수강평 1

      ∙

      평균 평점 5.0

      5

      100% 수강 후 작성

      평소 고민했던 리팩토링 방향 등 심화된 내용을 총정리해주는 기분이에요

      • 임영민님의 프로필 이미지
        임영민

        수강평 3

        ∙

        평균 평점 5.0

        5

        8% 수강 후 작성

        아직 1장정도 밖에 진도가 안나가서 총평은 아니지만 좋았습니다. 자바스크립트 Deep Dive라는 책이있는데 비슷한 느낌입니다. 이 책도 호불호가 갈리는게 프로젝트형 실습을 따라하며 공부하는것을 추구하시는 분들에게 평이 안좋다는건데, 이 강의 역시 이론과 주요예제 중심의 강의입니다.

        • 관태님의 프로필 이미지
          관태

          수강평 6

          ∙

          평균 평점 5.0

          수정됨

          5

          33% 수강 후 작성

          이기적으로 나만 보고 싶은 강의.. 프론트엔드 지망, 주니어 레벨에 있는 단계라면 레벨 업을 할 수 있는 강의 기초적인 부분보다는 심화에 집중되어 있는 강의 시야가 넓어지고 그저 되는 코드만 작성하는 사람들 중 더 좋은 코드를 짜고 싶은 분들에게 추천!

          • 열람현님의 프로필 이미지
            열람현

            수강평 1

            ∙

            평균 평점 5.0

            5

            10% 수강 후 작성

            안녕하세요 수강신청하고 5시간 30분 정주행하고 후기남깁니다 (전체 강의 10% 정도 봤습니다) 강의를 듣기 전 나의 코딩 수준 - 1년 반 전 바이브 코딩으로 시작. 처음에는 재미있었지만 개발 지식이 없어서 막히는 부분이 답답하여 유튜브로 HTML CSS JS 흐름 공부 - 이때부터 AI와 협업이 잘 되어 제가 원하는 수준의 프로그램이나 홈페이지를 완성하는 과정도 재밌었고 적은 용돈도 벌다가 지금은 본업과 비슷한 수준의 돈을 코딩을 통한 부업으로 벌게되었습니다 - 연봉이 두배가 된 셈이지만, 클로드 오퍼스 모델이 나오면서 크게 느끼는점은 비전공자인 제가 AI와 협업하기에는 더 이상 AI의 능력이 말도안되게 높아져서 '더 효율적으로 할 수 있을거같은데...' 라는 생각을 많이 하게되었습니다. 개발 지식이 없으니까 AI 능력을 극대화하는게 불가능하여 벽을 크게 느꼈어요. - '해줘' -> '안되네, 이런 오류가 있어 다시 해줘' -> ' 이번엔 이런 오류야'... 이렇게 원인도 모른채 될때까지 AI에게만 의지하는 무한 반복을 1년 넘게 해보니 지치기도하고, AI 에이전트를 활용해야되는 시대에 비효율적이라는걸 크게 느끼고 성장하기위해 강의를 찾게되었습니다 이 강의를 선택한 과정 - 유튜브에 매일 쏟아지는 뻔한 AI 에이전트 소개 영상에 지침 - 자기가 만든 서비스는 하나도 없으면서 '어디 어디 회사 몇 년 차' 타이틀로 승부하는 컨텐츠들 - AI에게 물어봐도 알 수 있는 지식들을 AI로 대본 뽑고 대단한것처럼 포장하는 썸네일과 컨텐츠에 실망만하게 됨 - 저처럼 바이브코딩으로 작은 성과라도 내보신 분들은 아실 겁니다. 크리에이터 개발자분들은 100마디 말보다 직접 만든 서비스 하나가 실력을 증명한다는 것을요. 이 강사님의 서비스와 유튜브 컨텐츠를 통해 강의에서 반에 반이라도 흡수할 수 있으면 크게 성장할 수 있을거라고 확신했습니다. 수강 후기 - 모든 개발 개념의 지식을 설명한다기보다 실무에서 직접 사용해본 경험을 공유해주어서 차별화가 확실하고 재미있습니다, 챗 지피티도 할 수 있는 일방적인 설명이 아닌 경험을 공유하는 방식이라 다음 이야기가 궁금해서 집중해서 듣게되요 - AI도 알려주지 않는 실무의 기술들이 너무 많습니다, '그동안 내가 했던건 다 똥꼬쇼였구나....'라고 느낍니다. 이 강의에 나오는 방식을 유튜브에서도 한번도 본적 없는게 너무 많아요. 앞으로도 나만 알고 싶다는 생각이 들 정도에요 - 엘리트 시니어 개발자님은 어떻게 개발하는지 볼 수 있어서 제 AI 파트너를 어떻게 세팅해야할지 어떻게 평생 기술로 장착하고 나아가야할지 확실히 알 수 있어서 정말 좋습니다 - 우리 바이브 코더들은 회사에 취업하는게 목표가 아니라서 개발 지식들을 설명할 수 있을정도로 달달 외우는건 필요하지않고, 어떻게 AI를 설정&구축하고 효율적으로 최종 목표를 달성할 것인가에 집중하기때문에 이 목표를 이루고싶은 바이브코더 동료분들에게 강력 추천합니다. 자유를 얻은 기분이에요ㅎㅎ

            비슷한 강의

            같은 분야의 다른 강의를 만나보세요!

            React와 Vue로 배우는 TypeScript 필수 개념 (feat. ChatGPT)강의 썸네일

            React와 Vue로 배우는 TypeScript 필수 개념 (feat. ChatGPT)

            캡틴판교

            실무에서 많이 사용되는 React와 Vue의 코드를 작성하면서 타입스크립트 필수 개념을 익히는 강의입니다. React와 Vue에 타입을 입히는 방법, ChatGPT 사용법까지 모두 잡는 실무자와 입문자 모두를 위한 강의!

            초급

            초급

            React, TypeScript, Vue.js

            React와 Vue로 배우는 TypeScript 필수 개념 (feat. ChatGPT)강의 썸네일

            React와 Vue로 배우는 TypeScript 필수 개념 (feat. ChatGPT)

            캡틴판교

            근본있는 프론트엔드 유닛테스트강의 썸네일

            근본있는 프론트엔드 유닛테스트

            어쩔코딩

            프론트앤드 유닛테스트의 모든것을 마스터하실수 있도록, 기본 개념부터 상황별 테스트 작성법 그리고 고급 테스트 지식까지 모두 모아 전달드립니다

            초급

            초급

            소프트웨어 테스트, TDD, Jest

            근본있는 프론트엔드 유닛테스트강의 썸네일

            근본있는 프론트엔드 유닛테스트

            어쩔코딩

            실전 프론트엔드 테스트 시작하기강의 썸네일

            실전 프론트엔드 테스트 시작하기

            캡틴판교

            능력 있는 프론트엔드 개발 실무자가 되고 싶다면 꼭 들어야 할 테스트 강의. 테스팅 입문부터 실전까지 한방에 끝낸다 👊

            초급

            초급

            소프트웨어 테스트, Cypress, e2e

            실전 프론트엔드 테스트 시작하기강의 썸네일

            실전 프론트엔드 테스트 시작하기

            캡틴판교

            프론트엔드 입문: JavaScript 가장 쉽게 이해하기강의 썸네일

            프론트엔드 입문: JavaScript 가장 쉽게 이해하기

            JH

            3년차 프론트엔드 개발자가 가장 쉽게 알려주는 JavaScript 기초 강의입니다.

            입문

            입문

            JavaScript, vanilla-javascript, vanillajs

            프론트엔드 입문: JavaScript 가장 쉽게 이해하기강의 썸네일

            프론트엔드 입문: JavaScript 가장 쉽게 이해하기

            JH

            자바스크립트 Class로 떠나는 여행강의 썸네일

            자바스크립트 Class로 떠나는 여행

            The Oreum

            자바스크립트는 Class를 왜 사용할까? Class가 등장하기 이전에는 어떻게 객체지향프로그래밍을 구현했을까? 자바스크립트를 공부하다보면 한번쯤 가져볼만한 문제에 대한 해답을 찾아 가벼운 여행을 떠나봅니다.

            초급

            초급

            JavaScript, 객체지향, frontend

            자바스크립트 Class로 떠나는 여행강의 썸네일

            자바스크립트 Class로 떠나는 여행

            The Oreum

            썬더볼트 자바-[생기초 입문편]강의 썸네일

            썬더볼트 자바-[생기초 입문편]

            zombielee7515

            자바는 배우기 어렵지않습니다. 단지, 쓸데없는걸 너무많이 배우기때문에 어려운것이죠. 기술이라는것들은 그단계가 되어야 이해가되는것들이 있습니다. 헌데, 머리에 쓸데없이 너무많은걸 집어넣으려고 하니 힘들뿐이죠. 기술은 경험입니다. 빠르고 간단하게 배웁시다!!

            입문

            입문

            Java, 객체지향

            썬더볼트 자바-[생기초 입문편]강의 썸네일

            썬더볼트 자바-[생기초 입문편]

            zombielee7515

            ES6 문법과 함께하는 모던 Javascript(자바스크립트) 고급 Part.3강의 썸네일

            ES6 문법과 함께하는 모던 Javascript(자바스크립트) 고급 Part.3

            유용한IT학습

            자바스크립트 프로그래밍 언어를 최신의 ES6 문법과 함께 학습하도록 기획된 과정입니다.

            중급이상

            중급이상

            JavaScript, ES6

            ES6 문법과 함께하는 모던 Javascript(자바스크립트) 고급 Part.3강의 썸네일

            ES6 문법과 함께하는 모던 Javascript(자바스크립트) 고급 Part.3

            유용한IT학습

            남박사의 파이썬으로 봇 만들기 with ChatGPT강의 썸네일

            남박사의 파이썬으로 봇 만들기 with ChatGPT

            남박사

            파이썬을 활용하여 텔레그램 봇, 슬랙 봇, 카카오톡 챗봇, 디스코드 봇을 다양한 예제를 통해 각 서비스의 특징과 봇을 구현하는 방법에 대해 알아봅니다.

            초급

            초급

            Python, 챗봇, 객체지향

            남박사의 파이썬으로 봇 만들기 with ChatGPT강의 썸네일

            남박사의 파이썬으로 봇 만들기 with ChatGPT

            남박사

            AI 개발팀을 운영해 제대로 완성하는 결제 수익화 웹서비스 런칭하기

            코배투

            💸 진짜 결제가 발생하는 수익형 웹서비스 AI 에이전트 강의! ❗ 포폴용 웹사이트는 그만 만들고 '재고 무한, 원가 0원'의 <AI 해설형 상품 쇼핑몰>을 구축합니다! 🤖 사람 개발팀과 일하듯 AI 개발 팀원들과 '서비스 명세서' 기초부터 탄탄하게 구축해 봅니다!

            초급

            초급

            Next.js, 서비스 기획, 수익화

            AI 개발팀을 운영해 제대로 완성하는 결제 수익화 웹서비스 런칭하기

            코배투

            클린업 JavaScript: 베이스 빌드업!강의 썸네일

            클린업 JavaScript: 베이스 빌드업!

            김영보

            생각을 다룹니다. 자바스크립트 핵심과 근본을 논리적으로 정리할 수 있습니다. 자바스크립트 경험, 생각을 스스로 정리할 수 있습니다. 자바스크립트 기술 논리를 정립할 수 있습니다. 자바스크립트 전체를 보는 시야를 넓힐 수 있습니다. 자바스크립트 기술 면접 문제에 대비할 수 있습니다.

            초급

            초급

            JavaScript, 면접, 기술면접

            클린업 JavaScript: 베이스 빌드업!강의 썸네일

            클린업 JavaScript: 베이스 빌드업!

            김영보

            순수 함수형 프론트엔드 언어 Elm 가이드강의 썸네일

            순수 함수형 프론트엔드 언어 Elm 가이드

            김대현

            순수 함수형 프로그래밍으로 프론트엔드 웹앱을 만드는 Elm 프로그래밍 언어 가이드 문서를 3시간만에 다 공부합니다.

            초급

            초급

            elm, 함수형 프로그래밍, SPA

            순수 함수형 프론트엔드 언어 Elm 가이드강의 썸네일

            순수 함수형 프론트엔드 언어 Elm 가이드

            김대현

            React & FastAPI로 만드는 투표 커뮤니티 플랫폼: 결제 시스템으로 수익화까지!강의 썸네일

            React & FastAPI로 만드는 투표 커뮤니티 플랫폼: 결제 시스템으로 수익화까지!

            닭강정

            이 강의에서는 React와 FastAPI를 활용해 실시간 투표, 댓글, 좋아요 등의 소셜 기능은 물론, 결제 시스템(카카오페이, 토스페이 등)을 연동해 수익화하는 방법까지 단계별로 실습합니다.

            중급이상

            중급이상

            React, MySQL, Docker

            React & FastAPI로 만드는 투표 커뮤니티 플랫폼: 결제 시스템으로 수익화까지!강의 썸네일

            React & FastAPI로 만드는 투표 커뮤니티 플랫폼: 결제 시스템으로 수익화까지!

            닭강정

            [코드캠프] 부트캠프에서 만든 고농축 백엔드 코스강의 썸네일

            [코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

            코드캠프

            코딩과 사랑에 빠져버린 8년차 풀스택 개발자 Captain의 사심이 가득 담긴 커리큘럼이에요. 백엔드의 모든 것을 다 알려주고 싶은 Captain의 마음이 녹아있죠! 이 강의를 듣다보면 '이렇게까지 알려준다고?' 하는 생각을 떨칠 수 없을 거예요. 모두가 어려워하는 부분까지 꼭꼭 씹어 떠먹여주는 이 강의로 시작해 볼까요?

            입문

            입문

            NestJS, Node.js, JavaScript

            [코드캠프] 부트캠프에서 만든 고농축 백엔드 코스강의 썸네일

            [코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

            코드캠프

            [VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)강의 썸네일

            [VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

            코드캠프

            10분만에 바이브코딩으로 만들 수 있는 단순한 서비스는 이제 버리세요! '진짜' 실무적용 바이브코딩을 배울 수 있습니다. 기획과 디자인대로 실서비스 수준의 고도화된 서비스를 커서AI NCOP로 만들어보시죠. No Code, Only Prompt

            중급이상

            중급이상

            React, Next.js, cursor

            [VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)강의 썸네일

            [VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

            코드캠프

            [풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)강의 썸네일

            [풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

            로펀

            풀스택 개발에 날개를 달아줄 Supabase! 3가지의 클론 프로젝트를 통해 Next.js 14와 Supabase로 실무 수준의 풀스택 개발을 하는 법을 속성으로 배우게 됩니다.

            초급

            초급

            Next.js, supabase, TailwindCSS

            [풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)강의 썸네일

            [풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

            로펀

            <M.B.I.T> 테스트 페이지 만들기! with Django강의 썸네일

            <M.B.I.T> 테스트 페이지 만들기! with Django

            제주코딩베이스캠프

            개발 유형을 테스트하는 웹 페이지를 만들어보세요! MBTI아닌 MBIT(My Best IT personalities)! 'MBIT 테스트 페이지'를 직접 만들어보며 웹 개발의 전반적인 프로세스를 익혀볼 수 있습니다. (Django 3.1 버전을 사용합니다.)

            초급

            초급

            HTML/CSS, JavaScript, Django

            <M.B.I.T> 테스트 페이지 만들기! with Django강의 썸네일

            <M.B.I.T> 테스트 페이지 만들기! with Django

            제주코딩베이스캠프

            아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지강의 썸네일

            아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지

            이지웹

            전세계 웹사이트에서 75%이상이 사용하고 있는 javascript 라이브러리 jQuery ! 화려한 효과보다는 원리를 이해하며 기본기를 다질수 있도록 구성했습니다. 제이쿼리 기초부터 활용까지 학습하여 여러분만의 포트폴리오를 완성하거나, 현업에서 바로 활용해보세요.

            초급

            초급

            HTML/CSS, JavaScript, jQuery

            아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지강의 썸네일

            아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지

            이지웹

            [PROKIT] 바이브코딩/프론트엔드 연습용 문제집: 타이머 앱 만들기강의 썸네일

            [PROKIT] 바이브코딩/프론트엔드 연습용 문제집: 타이머 앱 만들기

            닙스(NYBS)

            개발 프로젝트를 위한 미션 콘텐츠입니다. DevTime이라는 타이머 앱을 직접 구현해보면서 프로젝트 실습을 해볼 수 있도록 PRD 기획 문서, Figma 시안, API 엔드포인트를 제공합니다. 실제 서비스와 유사한 수준의 프로젝트를 구현해 보면서 그동안 학습한 지식을 완벽하게 자신의 것으로 만들어 보세요 🚀

            입문

            입문

            React

            [PROKIT] 바이브코딩/프론트엔드 연습용 문제집: 타이머 앱 만들기강의 썸네일

            [PROKIT] 바이브코딩/프론트엔드 연습용 문제집: 타이머 앱 만들기

            닙스(NYBS)

            웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크강의 썸네일

            웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

            코드캠프

            웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

            초급

            초급

            React, Next.js, expo

            웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크강의 썸네일

            웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

            코드캠프

            Complete Full-Stack Python Developer Roadmap: Learn FastAPI, React, Database Design API Architecture강의 썸네일

            Complete Full-Stack Python Developer Roadmap: Learn FastAPI, React, Database Design API Architecture

            IT s Dev

            A Complete End-to-End Developer Journey — Build Lightning-Fast APIs, Modern Frontend Interfaces, Real Projects, Authentication Systems, Dashboards & Full Deployments Using FastAPI, React, and Vibe Coding Techniques.

            입문

            입문

            React, React Native, react.js

            Complete Full-Stack Python Developer Roadmap: Learn FastAPI, React, Database Design API Architecture강의 썸네일

            Complete Full-Stack Python Developer Roadmap: Learn FastAPI, React, Database Design API Architecture

            IT s Dev