프론트엔드
마스터클래스.
GoF 디자인 패턴부터 React 성능 최적화까지,
시니어 개발자로의 전환점
많은 개발자분들은 일정 시점부터 성장하지 못하는 모습을 스스로에게 발견하곤 합니다. 어떤걸 더 공부해야할지, 자신에게 부족한 것은 무엇인지, 큰 기업이나 전혀 다른 서비스를 제공하는 회사에서 일하는 개발자들은 어떤 고려사항을 바탕으로 개발할지. 한상훈 강사의 ‘프론트엔드 마스터클래스’는 이 성장 정체의 격차를 정면으로 해결합니다.
GoF 방법론에서부터 시작해 리액트와 Next.js의 현대적인 코드 패턴과 사용법, 상태 관리 전략, 디자인 패턴, 코드 구조, 애니메이션 라이브러리 및 테스팅 툴까지 — 초급 개발자를 벗어나 중급, 고급 개발자로 발전할 수 있는 14개 섹션, 60개 이상의 세부 주제를 담고 있습니다.
상세 커리큘럼 전면 해부
Fig. 1 — 14개 섹션, 실제 강의 캡처와 함께
Section 01
자바스크립트 심화
- 런타임 구조
- 콜백 함수와 Promise
- Web API
- Map / WeakMap
- Set / WeakSet
- 클로저와 메모리 관리
Section 02
프로그래밍 패러다임
- 객체 지향 프로그래밍
- GoF 프로그래밍 디자인 패턴
- 함수형 프로그래밍
- 제너레이터 활용법
Section 03
디자인 패턴
- 아토믹 디자인 패턴
- Presentational & Container 패턴
- FSD 패턴
- Custom Hooks
- Compound Components
- Render Props 패턴
- Higher-Order Components(HOCs)
- Memoization
- Virtualization
- Props Collections & Getters
- Slot
- State Reducer
- Lifted State
Section 04
상태 관리
- 상태 관리의 등장 배경
- Redux 상태 관리
- Recoil 상태 관리
- Zustand 상태 관리
- Jotai 상태 관리
- Context API 사용 전략
Section 05
React/Next.js 생태계
- 리액트 버전별 특징
- Next.js 버전별 특징
- Fetching 전략(React-query, SWR, Axios)
- CSR 데이터 패칭 전략
- SSR 데이터 패칭 전략
- ISR 데이터 패칭 전략
- Next.js의 SEO
Section 06
스타일링
- 디자인 시스템 구축 방식
- Tailwind
- Emotion.js
- CSS Modules
Section 07
폼 관리
- Form 핸들링
- 동기/비동기 벨리데이션 전략
- Form 사용자의 UX
Section 08
테스팅
- Unit 테스트
- Integration 테스트 전략
- E2E 테스트 전략
Section 09
애니메이션
- GSAP 사용법
- Motion 사용법
- Anime.js 사용법
- 애니메이션 UX 최적화
Section 10
인증 및 보안
- OAuth 2.0, NextAuth.js, OpenID Connect
- 세션 및 토큰 관리
- Next.js 토큰 전략
- 양방향 암호화 Payload
Section 11
성능 최적화
- Core Web Vitals
- Critical CSS
- 코드 스플리팅
- Lazy Load
- 이미지/폰트/번들 최적화
Section 12
병렬 처리
- Web Worker 사용법
- 브라우저 병렬 처리 성능 향상
- 브라우저 오프라인 전략
Section 13
접근성 및 국제화
- WCAG 2.1 웹 접근성
- ARIA 사용 사례
- 접근성 테스트 도구
- i18n 구현 및 다국어 관리
- 포맷팅/RTL/통화처리
- 현지화 성능 전략
Section 14
개발 도구
- 개발자 도구 활용법
- 웹 분석 도구 활용법
- 번들링 평가 도구 활용법
Editorial Analysis
이 강의가 필요한 4가지 이유
기본기 × 실무
JavaScript 런타임 구조부터 시작해 이론과 실무를 동시에 잡는 커리큘럼. 단순 API 사용법이 아닌 "왜"를 이해합니다.
GoF → React
Observer, Strategy, Factory 등 GoF 패턴을 React 컴포넌트 설계에 직접 적용. 면접과 실무 모두에서 차별화됩니다.
14개 섹션 풀커버
JS 심화부터 디자인 패턴 13종, 상태관리 5종, 테스팅, 애니메이션, 인증, 성능, 접근성까지 올인원.
시니어 로드맵
성능 최적화, 접근성, 보안, 국제화까지. 주니어에서 시니어로 전환하는 데 필요한 모든 역량을 다룹니다.
Target Audience
누구를 위한
강의인가?
기본적인 HTML, CSS, JavaScript에 대한 이해가 있으며, 간단한 웹 애플리케이션을 개발해 본 경험이 있는 분들을 위한 심화 과정입니다.
선수 지식
실력의 정체기가 온 프론트엔드 개발자
매일 비슷한 코드를 작성하며 성장이 정체된 느낌이 드시나요? 이 강의는 현업에서 자주 마주치는 복잡한 문제들을 효율적으로 해결할 수 있는 다양한 패턴과 접근 방식을 제시합니다.
최소 1년 이상의 웹 개발 경험과 경력이 있는 분
이미 배운 기초 지식을 바탕으로 더 깊이 있는 프론트엔드 개발 역량을 쌓고 싶은 분들에게 적합합니다.
Javascript의 깊은 스펙과 개발 패턴에 대해 배움의 필요가 있으신 분
JavaScript를 단순히 사용하는 것에서 벗어나 언어의 깊은 이해를 바탕으로 더 효율적인 코드를 작성하고 싶으신 분. 비동기 프로그래밍, 함수형 프로그래밍, 디자인 패턴 등 고급 개념들을 실전 예제와 함께 다룹니다.
제가 첫 제품을 만든 게 중학교 2학년입니다. 그때 만든 웹 사이트가 인생의 전환점이 될 줄은 몰랐습니다. 처음 만든 웹사이트가 첫 날에 천 명 이상이 방문해주었고, 수십 명 이상의 이름 모를 온라인 유저들에게 격려와 칭찬을 받았습니다.
현업에서 개발사를 운영하며 수십 개의 업체와 만나 수많은 거래를 했고, 많은 제품을 만들었습니다. 그 과정에서 회사마다의 개발 방향과 철학, 중요하게 여기는 것들을 볼 수 있었습니다.
“이 강의를 통해 여러분이 적어온 과거의 코드들을 볼 때 이전과 다른 눈으로 볼 수 있을 겁니다. 이전과 다른 눈으로 코드를 보면 이전엔 생각해본 적 없는 고민을 하게 되고, 그 고민을 해결하는 과정에서 더 나은 코드를 창조할 수 있습니다.”
Special Offer
지금 바로 시니어 개발자로의 여정을 시작하세요
무제한 반복 시청 · 섹션별 Miro 보드 학습 자료 제공 · Windows, macOS, Linux 모두 지원
인프런에서 수강하기 →자주 묻는 질문
Fig. 2 — Frequently Asked Questions
Q01프론트엔드 마스터클래스는 어떤 수준의 개발자에게 적합한가요?+
React/Next.js 6개월 이상 경험, 웹 개발 1년 이상 경력의 개발자에게 최적화되어 있습니다. JavaScript 기초와 HTML/CSS를 이해하고 있는 주니어~미드 레벨 개발자가 시니어로 성장하기 위한 강의입니다.
Q02GoF 디자인 패턴을 프론트엔드에서 어떻게 활용하나요?+
Observer 패턴은 상태 관리에, Strategy 패턴은 컴포넌트 로직 분리에, Factory 패턴은 컴포넌트 동적 생성에 활용됩니다. 이 강의에서는 GoF 패턴을 React/Next.js 실무 코드에 직접 적용하는 방법을 다룹니다.
Q03이 강의에서 다루는 상태 관리 라이브러리는 무엇인가요?+
Redux, Recoil, Zustand, Jotai, Context API를 모두 다루며, 각 라이브러리의 장단점과 프로젝트 규모에 따른 선택 기준을 실무 관점에서 비교 분석합니다.
Q04강의 수강 후 어떤 역량을 갖출 수 있나요?+
JavaScript 런타임 구조 이해, GoF 디자인 패턴 실무 적용, React 고급 패턴(Compound Components, HOC, Custom Hooks), 성능 최적화(Core Web Vitals), 테스팅(단위/통합/E2E), 접근성(WCAG 2.1) 등 시니어 프론트엔드 개발자에게 필요한 종합 역량을 갖출 수 있습니다.
Q05강의 자료는 어떤 형태로 제공되나요?+
각 섹션별로 Miro 보드 형태의 학습 자료가 제공됩니다. 수많은 코드 예시와 설명, 예상 질문에 대한 답변이 포함되어 있으며, 강의 자료만으로도 충분한 학습이 가능할 정도로 방대합니다. 무제한 반복 시청이 가능합니다.
Technologies Covered
결론: 투자할 가치가 있는가?
프론트엔드 마스터클래스는 단순한 “따라하기” 강의가 아닙니다. JavaScript의 근본 원리부터 시작해, GoF 디자인 패턴의 실무 적용, 13가지 React 디자인 패턴(Atomic, Container, FSD, Custom Hooks, Compound Components, Render Props, HOC, Memoization, Virtualization, Props Collections, Slot, State Reducer, Lifted State), 5가지 상태 관리 라이브러리 비교, 3단계 테스팅 전략, 3가지 애니메이션 라이브러리, 인증/보안, 성능 최적화, 병렬 처리, 접근성/국제화, 개발 도구까지 — 14개 섹션에 걸친 종합 로드맵을 제시합니다.
경력 1년 이상 프론트엔드 개발자가 다음 단계로 도약하기 위한 투자로서, 충분히 추천할 만한 강의입니다. 특히 각 섹션별로 제공되는 Miro 학습 자료의 퀄리티가 인상적이며, “코드 한 줄을 외우는 것이 아니라 왜 그렇게 짜야 하는지를 이해하게 해주는” 강의 철학이 돋보입니다.
4.7
Editorial Rating
커리큘럼 깊이: ★★★★★
실무 적용도: ★★★★★
학습 자료 퀄리티: ★★★★★
난이도 적절성: ★★★★☆
가성비: ★★★★☆
Related Articles
Tags