Wild Frontend

와일드 프론트엔드는 프로젝트 중심 학습을 통해 프론트엔드 개발의 핵심 기술과 설계 원칙을 익히는 8주 집중 과정입니다.

2025년 현재 실무에서 요구되는 최신 기술 스택을 깊이 있게 다루며, 성능 최적화, 확장 가능한 구조 설계, 배포 및 운영 전략까지 실제 서비스 수준의 경험을 제공합니다.

강사

코딩의 신 아샬

· 26년차 풀스택 개발자
· 다수의 스타트업 CTO 경험
· 유니콘 서비스 기업 리드 개발자 경험
· 게임, 교육, 음악, 커머스, 블록체인, 인공지능 등 다양한 도메인 경험

🏠 홈페이지: https://ahastudio.com/

유튜브: https://youtube.com/@ahastudio

커리큘럼

백로그 관리, 담당자 할당, 댓글 기능, 실시간 데이터 처리, AI 기반 댓글 생성 등 다양한 기능을 갖춘 실무형 프로젝트를 통해 프론트엔드 개발의 전반적인 역량을 향상시킵니다.

1주: 웹의 기초 HTTP, REST, DOM, JSX

웹 애플리케이션의 근간이 되는 HTTP, REST, DOM를 이해하고, 선언형 UI를 위한 JSX를 학습합니다. Node.js로 웹 서버를 구축하며 HTTP의 요청과 응답 구조를 이해하고, REST가 무엇인지 알아봅니다.

DOM을 조작하고 이벤트를 처리하는 방법을 학습하며, 선언형 UI가 어떤 장점을 가지는지 알아봅니다.

· Chrome DevTools로 HTTP 요청/응답 분석

· Node.js HTTP 모듈로 서버 구축

· Roy Fielding의 REST 논문 읽기

· Express로 Web API 구현

· DOM 조작

· 이벤트 처리

· JSX로 선언형 UI 구축
2주: 컴포넌트 설계와 테스트 React, Component, Test

React의 핵심 개념과 컴포넌트 설계 원칙(SoC, DRY)을 이해하고, 테스트 코드 작성 및 유지보수성 확보 방법을 학습합니다.

React의 렌더링 방식과 Hooks의 내부 동작을 이해하고, TDD를 경험합니다.

· React

· Atomic Design

· Jest, Vitest

· Unit Testing

· TDD

· React Testing Library
3주: Fetching & Caching

Fetch API와 Axios를 사용해 데이터를 가져오는 방법을 배우고, TanStack Query를 활용해 비동기 작업 관리 및 캐싱 전략을 학습합니다. Suspense와 Error Boundary로 UX를 개선하고, REST API와 GraphQL의 차이점을 이해합니다.

· Fetch API

· Axios

· TanStack Query

· Suspense, Error Boundary

· Optimistic UI

· GraphQL

· Apollo Client
4주: Router, Server Component, Server Actions

다양한 Router 도구를 활용하여 페이지 라우팅과 내비게이션을 구현하는 방법을 배우고, Next.js의 Server Components와 Server Actions을 활용하여 서버 사이드 렌더링(SSR) 및 서버 함수를 호출하는 방법을 학습합니다.

· React Router

· TanStack Router

· Next.js Pages Router

· React Server Component

· Next.js App Router

· Next.js Server Actions

· Redis
5주: CSS, Design System, FSD

다양한 Modern CSS 기술을 이해하고, 디자인 시스템을 구축해 일관성, 생산성, 유지보수성을 높이는 방법을 학습합니다. FSD를 활용해 대규모 프로젝트의 코드 구조를 효율적으로 관리합니다.

· CSS Modules

· CSS-in-JS, styled-components, Emotion

· Tailwind CSS

· vanilla-extract

· Design System

· Storybook

· Feature-Sliced Design (FSD)
6주: State Management

클라이언트와 서버 상태 관리의 차이를 이해하고, 상태 변화를 구독하고 UI를 업데이트하는 과정을 배웁니다. 다양한 상태 관리 라이브러리(Redux, Zustand, Jotai)를 활용하여 복잡한 애플리케이션의 상태를 효율적으로 관리하는 방법을 학습합니다.

· Server State, Client State

· Context

· Flux Architecture

· useSyncExternalStore

· Redux

· Zustand

· Jotai
7주: 고급 주제 Feature Flag, WebSocket, SSE, LLM

Feature Flag를 통해 애플리케이션을 점진적으로 배포하고 사용자에게 새로운 기능을 안전하게 제공하는 방법을 학습합니다.

WebSocket과 SSE의 차이를 이해하고, GraphQL Subscriptions을 통해 추상화하는 방법을 배웁니다.

사용성을 높이기 위해 LLM을 활용하는 방법을 학습합니다.

· Feature Flag

· WebSocket

· Server-Sent Event (SSE)

· GraphQL Subscriptions

· LLM

· OpenAI API
8주: 배포 및 운영 Vercel, GitHub Actions, Sentry, Lighthouse

Vercel을 통해 서버리스로 애플리케이션을 배포하고, GitHub Actions를 활용해 CI/CD 파이프라인을 구축합니다.

Sentry를 통해 운영 중인 애플리케이션의 에러를 모니터링하고, Lighthouse를 활용해 성능 최적화를 진행합니다.

· Vercel

· GitHub Actions

· Sentry

· Lighthouse

FAQ

Q 교육은 어떻게 진행되나요?: A 매주 강의 자료와 영상이 제공되고, 과제를 통해 실습합니다. 디스코드로 질문을 주고받으며, 피드백을 받습니다.
Q 사전 지식이 필요한가요?: A
기본적인 HTML과 CSS를 다룰 수 있어야 하며, JavaScript(특히 TypeScript) 코드를 읽고 쓸 수 있어야 합니다. 엄청나게 깊은 이해가 필요한 건 아니지만, 프로그래밍 언어 자체가 익숙하지 않다면 어려울 수 있습니다. JavaScript 경험이 있지만 TypeScript는 처음이라면, “TypeScript 맛보기” 문서를 먼저 읽어보세요.