강의

멘토링

로드맵

개발 · 프로그래밍

/

웹 개발

프론트엔드 마스터클래스

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

(5.0) 수강평 2개

수강생 98명

  • 한상훈

이런 걸 배울 수 있어요

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

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

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

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


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

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

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

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


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

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


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

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

상세 커리큘럼

자바스크립트 심화

  • 런타임 구조

  • 콜백 함수와 Promise

  • Web API

  • Map / WeakMap

  • Set / WeakSet

  • 클로저와 메모리 관리

this에 대한 설명 중 일부

프로그래밍 패러다임

  • 객체 지향 프로그래밍

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

  • 함수형 프로그래밍

  • 제너레이터 활용법

빌더 패턴 강의

디자인 패턴

  • 아토믹 디자인 패턴

  • Presentational & Container 패턴

  • FSD 패턴

  • Custom Hooks

  • Compound Components

  • Render Props 패턴

  • Higher-Order Components(HOCs)

  • Memoization

  • Virtualization

  • Props Collections & Getters

  • Slot

  • State Reducer

  • Lifted State

메모이제이션 강의

상태 관리

  • 상태 관리의 등장 배경

  • Redux 상태 관리

  • Recoil 상태 관리

  • Zustand 상태 관리

  • Jotai 상태 관리

  • Context API 사용 전략

Jotai 설명 중 일부

React/Next.js 생태계 

  • 리액트 버전별 특징

  • Next.js 버전별 특징

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

  • CSR 데이터 패칭 전략

  • SSR 데이터 패칭 전략

  • ISR 데이터 패칭 전략

  • Next.js의 SEO

React의 발전 방향 중 일부

스타일링

  • 디자인 시스템 구축 방식

  • 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

NextAuth.js

성능 최적화

  • Core Web Vitals

  • Critical CSS

  • 코드 스플리팅

  • Lazy Load

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

사파리

병렬 처리

  • Web Worker 사용법

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

  • 브라우저 오프라인 전략

워커는 셀프

접근성 및 국제화

  • WCAG 2.1 웹 접근성

  • ARIA 사용 사례

  • 접근성 테스트 도구

  • i18n 구현 및 다국어 관리

  • 포맷팅/RTL/통화처리

  • 현지화 성능 전략

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

개발 도구

  • 개발자 도구 활용법

  • 웹 분석 도구 활용법

  • 번들링 평가 도구 활용법

레이아웃 변경

방대한 강의자료

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

강의 자료 중 일부

수강 전 참고 사항

실습 환경

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

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

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

학습 자료

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

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

선수 지식 및 유의사항

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

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

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

수강생 여러분들께


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


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


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


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


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


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


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

이런 분들께
추천드려요

학습 대상은
누구일까요?

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

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

선수 지식,
필요할까요?

  • 프로그래밍 기초 지식

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

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

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

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

안녕하세요
입니다.

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

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

커리큘럼

전체

434개 ∙ (56시간 10분)

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

수강평

전체

2개

5.0

2개의 수강평

  • tkyoun12409907님의 프로필 이미지
    tkyoun12409907

    수강평 3

    평균 평점 5.0

    수정됨

    5

    33% 수강 후 작성

    A lecture I selfishly want to keep to myself.. A lecture that can help you level up if you're aspiring to be a frontend developer and are at a junior level A lecture focused more on advanced topics rather than basics Recommended for those who want to broaden their perspective and write better code instead of just writing code that simply works!

    • jonghoon74319766님의 프로필 이미지
      jonghoon74319766

      수강평 1

      평균 평점 5.0

      5

      7% 수강 후 작성

      2025 추석맞이 감사할인 중 (2일 남음)

      ₩405

      24%

      ₩699,600

      비슷한 강의

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