프론트엔드 마스터 클래스

바닥부터 올라온 개발자 한상훈의 프론트 엔드 개발자를 위한 마스터 커리큘럼

바로 신청하기 🚀
기본기부터 애니메이션
상태관리와 Form 처리
현대적인 코드 패턴
모두 알려드리겠습니다.

이런 분들을 위한 강의입니다

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

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

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

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

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

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

커리큘럼

자바스크립트 심화

  • 런타임 구조
  • 콜백 함수와 Promise
  • Web API
  • Map / WeakMap
  • Set / WeakSet
  • 클로저와 메모리 관리

프로그래밍 패러다임

  • 객체 지향 프로그래밍
  • 함수형 프로그래밍
  • 제너레이터 활용법

디자인 패턴

  • 컴포넌트 설계 패턴
  • 전략 패턴
  • 프록시 패턴
  • 의존성 주입 패턴

상태 관리

  • 상태 관리의 등장 배경
  • Redux 상태 관리
  • Recoil 상태 관리
  • Zustand 상태 관리
  • Jotai 상태 관리
  • Context API 사용 전략

React 생태계

  • 리액트 버전별 특징
  • Next.js 버전별 특징
  • Fetching 전략(React-query, SWR, Axios)
  • CSR 데이터 패칭 전략
  • SSR 데이터 패칭 전략
  • ISR 데이터 패칭 전략
  • Next.js의 SEO

스타일링

  • 디자인 시스템 구축 방식
  • Tailwind
  • Emotion.js
  • CSS Modules

폼 관리

  • Form 핸들링
  • 동기/비동기 벨리데이션 전략
  • Form 사용자의 UX

테스트

  • Unit 테스트
  • Integration 테스트 전략
  • E2E 테스트 전략

애니메이션

  • GSAP 사용법
  • Motion 사용법
  • Anime.js 사용법
  • 애니메이션 UX 최적화

인증 및 보안

  • OAuth 2.0, NextAuth.js, OpenID Connect
  • 세션 및 토큰 관리
  • Next.js 토큰 전략
  • 양방향 암호화 Payload

성능 최적화

  • Core Web Vitals
  • Critical CSS
  • 코드 스플리팅
  • Lazy Load
  • 이미지/폰트/번들 최적화

병렬 처리

  • Web Worker 사용법
  • 브라우저 병렬 처리 성능 향상
  • 브라우저 오프라인 전략

접근성 및 국제화

  • WCAG 2.1 웹 접근성
  • ARIA 사용 사례
  • 접근성 테스트 도구
  • i18n 구현 및 다국어 관리
  • 포맷팅/RTL/통화처리
  • 현지화 성능 전략

개발 도구

  • 개발자 도구 활용법
  • 웹 분석 도구 활용법
  • 번들링 평가 도구 활용법

강의 진행 방식

📅

8주간 강의

5월 31일(토요일)에 시작하여 7월 20일(일요일)까지 총 8주간 진행됩니다.

강의 시간

  • 매주 8시간 진행
  • 토요일, 일요일: 오후 1시 ~ 5시
  • 2시간 수업 후 10분간 쉬는 시간
  • 쉬는 시간 및 강의 종료 후 수업 중 올라온 질문에 대해 Q&A 진행
📝

과제 및 피드백

각 주마다 과제가 제공됩니다. 과제는 배운 내용을 바탕으로 자신의 코드를 개선하고 피드백 받을 수 있는 형태로 진행됩니다. 과제는 선택사항이며 미제출시 불이익은 없습니다.

💻

수업 방식

수업은 디스코드 생방송으로 진행됩니다. 실시간 소통이 가능하며, 질문과 답변을 통해 보다 효과적인 학습이 가능합니다.

디스코드 참여하기

실시간 Q&A

4시간 강의 중 10분 정도 휴식 시간을 가지며 각 수업이 시작되기 전에 강의 중 올라온 질문에 대한 답변을 드립니다. 강의를 들으면서 질문을 남겨주시면 공통되는 질문을 취합해서 함께 답변 드립니다.

🎥

강의 다시 보기

강의 내용은 모두 녹화되며 3일 이내 다시 볼 수 있도록 제공됩니다. 꼭 라이브로 듣지 않으셔도 수강에 문제는 없습니다.

신청하기

25% 할인 2025년 5월 28일까지

프론트엔드 마스터 클래스

520,000원
390,000원
🗓️
2025년 5월 31일(토요일) 시작 8주간 진행 (총 64시간)
📚
라이브 강의 매주 토요일, 일요일 오후 1~5시에 라이브로 진행됩니다
🔄
강의 녹화본 제공 모든 강의는 녹화되어 3일 이내 다시 볼 수 있습니다
💬
빠른 질의 응답 수업 진행 후 바로 질문을 취합해 답변해드립니다
지금 신청하기

* 확정 후 비공개 채널로 안내해드립니다

할인 종료까지

00
00
시간
00
00

계좌이체로 결제 가능합니다.

디스코드로 커뮤니티에 참여할 수 있습니다.

고화질 강의 녹화본은 라이브 3일 이내로 제공됩니다.

배운 내용을 적용해보고 피드백을 받을 수 있습니다.

강사 소개

한상훈 강사

한상훈

10년차 스타트업 및 개발사 대표, 6년 이상의 프로그래밍 강의

프론트엔드 전문가 기술 멘토링 스타트업 창업가 풀스택 개발자 작가

주요 경력: 널 엔터프라이즈(CEO), SnapX(기술고문), 비엘씨엔티(CTO), 플렉스웹(대표), 일공살롱(CTO), 세턴랩(이사), 데이원컴퍼니(프로그래밍 강사), 루아흐(대표), 에어데스크(대표), MCI(한국지사장), PT. FLEXWEB TECHNOLOGY(커미셔너)

함께 일해온 기업들

수강생 여러분들께

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

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

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

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

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

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

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

한상훈 드림
Legacy Of The Ancients
StudioKolomna