Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
NEW
Programming

/

Web Development

Frontend Masterclass

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.

41 learners are taking this course

  • hoonyhan
실습 중심
마스터과정
JavaScript
React
Functional Programming
oop
Next.js

What you will learn!

  • Advanced Frontend Development Methodologies

  • GoF Object Structure and Practical Application Examples ## GoF Design Patterns Overview The Gang of Four (GoF) design patterns are divided into three main categories: ### 1. Creational Patterns - **Singleton**: Ensures only one instance exists - **Factory Method**: Creates objects without specifying exact classes - **Abstract Factory**: Creates families of related objects - **Builder**: Constructs complex objects step by step - **Prototype**: Creates objects by cloning existing instances ### 2. Structural

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

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


프론트엔드 마스터코스는 기본부터 시작해 현대 프론트엔드 개발을 구성하는 대부분의 뼈대에 해당하는 모듈 및 프로그래밍 방법론을 모두 합쳤습니다. 이 강의를 통해 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/통화처리

  • 현지화 성능 전략

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

개발 도구

  • 개발자 도구 활용법

  • 웹 분석 도구 활용법

  • 번들링 평가 도구 활용법

레이아웃 변경

Extensive lecture materials

The course materials are composed of numerous code examples, explanations, and answers to anticipated questions.

Part of the lecture materials

Pre-enrollment Reference Information

Practice Environment

  • Operating System and Version (OS): All operating systems including Windows, macOS, Linux, etc. are supported.

  • Tools used: Cursor and internet browser

  • PC Specifications: Basic specification PC with internet access capability

Learning Materials

  • Learning materials format provided: Miro, etc.

  • Volume and Capacity: Learning materials provided for each section

Prerequisites and Important Notes

  • The more experience you have thinking through and solving programming problems on your own, the more helpful it will be when taking the course.

  • Having experience in backend and DevOps beyond frontend development would be even more helpful.

  • The copyright of this lecture belongs to the instructor, and unauthorized distribution and reproduction are prohibited. Learning materials are also copyrighted and may not be used for purposes other than personal learning.

To all students


Hello, I'm Han Sanghun.


I created my first product when I was in 8th grade. I never knew that the website I made then would become a turning point in my life. The first website I created had over a thousand visitors on its first day, and I received encouragement and praise from dozens of anonymous online users. I couldn't forget that experience, and I've continued to make countless attempts in the web field ever since.


After tasting that sweet moment, I endlessly repeated challenges and failures. I've been developing in a small room for years to create the product I wanted, and through that process, I know better than anyone the pain and difficulty of developing alone. Because I know those feelings and loneliness so well, I've been consistently documenting and sharing my life's journey with the world for over 10 years. I wanted to deliver a message to those working in lonely environments like mine, where there's no one to teach them. I wanted to tell them 'You are not alone'.


I have been running a development company in the field and have met with dozens of companies, conducted numerous transactions, and created many products. Through this process, I was able to observe each company's development direction, philosophy, and what they consider important. I have also seen people suffering from poor code patterns and development culture under small groups of authoritative developers. Korea's development market appears to be doing the same kind of development on the surface, but it is actually growing in completely different ways.


If you're reading this and you're leading projects at a small company, or if you're having doubts and feeling anxious about the development methods you've been using on your own, this course will be helpful. I don't insist only on the methods I've taught you. I want to share with you the story of a developer who has experienced firsthand the records of learning about code, thinking about it, and contemplating better code throughout my life.


There is no code like absolute truth. Developers must make countless trade-offs and find better choices depending on the situation. In this process, if a junior developer makes decisions by looking at only a few options, as they become a senior, they can interpret problems with deeper insight. Even if things appear to work the same way, writing them in different forms and in more readable forms is gained through contemplation and experience.


Through this course, you'll be able to look at the code you've written in the past with different eyes than before. When you look at code with different eyes than before, you'll start thinking about things you've never considered, and in the process of solving those concerns, you can create better code. This course contains the concerns and solutions that countless senior developers have gone through. I hope you gain your own insights by looking at the solutions of those who have thought ahead.

Recommended for
these people

Who is this course right for?

  • Frontend Developer Experiencing a Skills Plateau

  • Someone with at least 1 year of web development experience and career background

Need to know before starting?

  • Basic Programming Knowledge

  • At least 1 year of web development experience

  • Basic understanding of HTML and CSS syntax

  • Basic Understanding of Vanilla JavaScript

  • At least 6 months of experience using React.js and Next.js

Hello
This is

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

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

Curriculum

All

434 lectures ∙ (56hr 10min)

Published: 
Last updated: 

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

$539.00

Similar courses

Explore other courses in the same field!