와일드 프론트엔드
와일드 프론트엔드는 프로젝트 중심 학습을 통해 프론트엔드 개발의 핵심 기술과 설계 원칙을 익히는 과정입니다.
2025년 현재 실무에서 요구되는 최신 기술 스택을 깊이 있게 다루며, 성능 최적화, 확장 가능한 구조 설계, 배포 및 운영 전략까지 실제 서비스 수준의 경험을 제공합니다.
와일드 프론트엔드
강사
코딩의 신 아샬
- · 26년차 풀스택 개발자
- · 다수의 스타트업 CTO 경험
- · 유니콘 서비스 기업 리드 개발자 경험
- · 게임, 교육, 음악, 커머스, 블록체인, 인공지능 등 다양한 도메인 경험
🏠 홈페이지: https://ahastudio.com/
유튜브: 커리큘럼
Chapter 1 - 웹의 기초 HTTP, REST, DOM, JSX
웹 애플리케이션의 근간이 되는 HTTP, REST, DOM를 이해하고, 선언형 UI를 위한 JSX를 학습합니다. Node.js로 웹 서버를 구축하며 HTTP의 요청과 응답 구조를 이해하고, REST가 무엇인지 알아봅니다.
DOM을 조작하고 이벤트를 처리하는 방법을 학습하며, 선언형 UI가 어떤 장점을 가지는지 알아봅니다.
Chapter 2 - 컴포넌트 설계와 테스트 React, Component, Test
React의 핵심 개념과 컴포넌트 설계 원칙(SoC, DRY)을 이해하고, 테스트 코드 작성 및 유지보수성 확보 방법을 학습합니다.
React의 렌더링 방식과 Hooks의 내부 동작을 이해하고, TDD를 경험합니다.
Chapter 3 - Fetching & Caching
Fetch API와 Axios를 사용해 데이터를 가져오는 방법을 배우고, TanStack Query를 활용해 비동기 작업 관리 및 캐싱 전략을 학습합니다. Suspense와 Error Boundary로 UX를 개선하고, REST API와 GraphQL의 차이점을 이해합니다.
Chapter 4 - Router, Server Component, Server Actions
다양한 Router 도구를 활용하여 페이지 라우팅과 내비게이션을 구현하는 방법을 배우고, Next.js의 Server Components와 Server Actions을 활용하여 서버 사이드 렌더링(SSR) 및 서버 함수를 호출하는 방법을 학습합니다.
Chapter 5 - CSS, Design System, FSD
다양한 Modern CSS 기술을 이해하고, 디자인 시스템을 구축해 일관성, 생산성, 유지보수성을 높이는 방법을 학습합니다. FSD를 활용해 대규모 프로젝트의 코드 구조를 효율적으로 관리합니다.
Chapter 6 - State Management
클라이언트와 서버 상태 관리의 차이를 이해하고, 상태 변화를 구독하고 UI를 업데이트하는 과정을 배웁니다. 다양한 상태 관리 라이브러리(Redux, Zustand, Jotai)를 활용하여 복잡한 애플리케이션의 상태를 효율적으로 관리하는 방법을 학습합니다.
Chapter 7 - 고급 주제 Feature Flag, WebSocket, SSE, LLM
Feature Flag를 통해 애플리케이션을 점진적으로 배포하고 사용자에게 새로운 기능을 안전하게 제공하는 방법을 학습합니다.
WebSocket과 SSE의 차이를 이해하고, GraphQL Subscriptions을 통해 추상화하는 방법을 배웁니다.
사용성을 높이기 위해 LLM을 활용하는 방법을 학습합니다.
Chapter 8 - 배포 및 운영 Vercel, GitHub Actions, Sentry, Lighthouse
Vercel을 통해 서버리스로 애플리케이션을 배포하고, GitHub Actions를 활용해 CI/CD 파이프라인을 구축합니다.
Sentry를 통해 운영 중인 애플리케이션의 에러를 모니터링하고, Lighthouse를 활용해 성능 최적화를 진행합니다.
FAQ
- Q사전 지식이 필요한가요?
- A기본적인 HTML과 CSS를 다룰 수 있어야 하며, JavaScript(특히 TypeScript) 코드를 읽고 쓸 수 있어야 합니다. 엄청나게 깊은 이해가 필요한 건 아니지만, 프로그래밍 언어 자체가 익숙하지 않다면 어려울 수 있습니다.