Frontend Academy

Name: Frontend Academy
Availability: InStock

HTMLFrontendWebBeginner

Frontend Development Academy에서 시각적으로 뛰어나고 반응형 웹사이트를 개발하세요.

🤖 AI 기반📚 41개 코스👥 100,000명 이상의 학습자⭐ 4.9 평점

코스 개요

현대적 Frontend의 모든 영역 구축하기

Frontend 개발은 사용자가 브라우저에서 보고 상호작용하는 모든 것으로 코드를 변환하는 분야입니다 — HTML 구조, CSS 프레젠테이션, JavaScript 동작, 그리고 이들을 프로덕션 규모에서 함께 묶는 프레임워크와 도구들입니다. 이 트랙은 완전한 스택을 다룹니다: 웹이 페이지를 전달하는 방식부터 타입 안전 React와 Vue 애플리케이션 작성, 성능 최적화, CI/CD 파이프라인을 통한 배포까지 모두 포함합니다.

배우게 될 내용

HTML, CSS, JavaScript 기초부터 시작하여 TypeScript, DOM과 Browser API, 반응형 디자인, async 프로그래밍과 모듈을 포함한 ES6+ 패턴에 대한 유창함을 갖추게 됩니다. 그 다음 React (hooks, 고급 패턴, Next.js SSR)와 Vue 3 (Composition API, Nuxt 3 SSR), 상태 관리, frontend 테스팅, CSS 아키텍처, WebSocket을 활용한 실시간 인터페이스로 나아갑니다. 트랙은 웹 성능 최적화, frontend 보안, 디자인 시스템, frontend CI/CD와 DevOps로 마무리됩니다.

학습 경로

41개 과정이 A1부터 C2 수준까지 걸쳐 있습니다. A1과 A2 과정은 기초를 확립합니다 — 웹 작동 원리, 의미론적 마크업, CSS 애니메이션, Git, TypeScript 입문. B1과 B2 과정은 전문 능력을 구축합니다: CSS Layout Mastery, JavaScript Modules and Build Tools, React와 Vue 3 기초, API 통합, Progressive Web App, Next.js와 Nuxt 3를 활용한 Server-Side Rendering. C1 과정은 고급 수준의 관심사를 다룹니다: Advanced TypeScript for Frontend, React Advanced Patterns, Vue Advanced Patterns, Frontend Architecture, Design Systems and Component Libraries, Frontend Security, Frontend CI/CD and DevOps. 트랙은 C2 수준의 Senior Frontend Engineering으로 마무리되며, 모든 것을 프로덕션급 실무로 통합합니다.

작동 방식

각 과정은 내장 코드 에디터에서 실시간 피드백을 받으며 완료할 수 있는 짧고 실습 중심의 레슨으로 나뉩니다. 막히는 순간 항상 AI 튜터를 이용할 수 있으며, 모든 개념은 인위적인 예제보다 실제 브라우저와 프레임워크 동작을 반영하는 연습으로 강화됩니다.

학습 시작 →

도구

코스 도구 탐색

AI 기반 도구와 기능으로 학습을 강화하세요

학습 방식

🎯

인터랙티브 레슨

실시간 피드백을 받으며 직접 코딩 연습하기

🤖

AI 튜터

막힐 때마다 AI 튜터에게 즉시 도움받기

💻

내장 에디터

브라우저에서 바로 코드 작성 & 실행하기

🏆

수료증

과정을 완료하면 수료증 취득하기

커리큘럼

41개 코스

Frontend Academy 학습 경로의 모든 코스.

프런트엔드 개발 입문

A13개 레슨

프런트엔드 개발자가 실제로 하는 일, 이 분야가 수요가 높고 창의적인 기술 직업 중 하나인 이유, HTML, CSS, JavaScript가 함께 작동하는 방식을 이해합니다.

웹의 작동 원리

A14개 레슨PRO

웹의 기초를 이해합니다. 브라우저가 페이지를 요청하는 방식, DNS의 역할, HTTP의 작동 방식, URL을 입력했을 때 일어나는 일을 다룹니다. 단 하나의 픽셀이 나타나기 전에 브라우저가 정확히 무엇을 하는지 알게 됩니다.

프런트엔드를 위한 HTML 기초

A14개 레슨PRO

모든 웹 페이지를 이루는 기본 요소를 배웁니다. 시맨틱 요소를 사용해 유효한 HTML5 문서를 작성하고, 제목과 목록으로 콘텐츠를 구성하며, 이미지와 링크를 삽입하고, 접근성 있는 양식을 만듭니다.

프런트엔드를 위한 CSS 기초

A14개 레슨PRO

자신 있게 HTML을 꾸밉니다. 캐스케이드와 명시도가 작동하는 방식을 배우고, 색상과 타이포그래피를 적용하며, 박스 모델을 익히고, 표시 속성과 포지셔닝으로 레이아웃을 제어합니다.

JavaScript 필수

A14개 레슨PRO

첫 JavaScript 프로그램을 작성합니다. 변수를 선언하고 기본 데이터 형식을 다루며 함수를 정의하고 조건문과 반복문으로 프로그램 흐름을 제어하는 방법을 배웁니다.

개발자 도구와 작업 흐름

A14개 레슨PRO

전문 프론트엔드 개발자처럼 작업해 보세요. 검사와 디버깅에 Chrome DevTools를 능숙하게 활용하고, 유용한 확장 기능으로 VSCode를 설정하며, Prettier와 ESLint 같은 코드 품질 도구를 구성합니다.

TypeScript 입문

A24개 레슨PRO

JavaScript에 타입을 추가해 오류가 브라우저에 도달하기 전에 찾아내 보세요. TypeScript의 타입 시스템을 배우고, 변수와 함수에 타입 주석을 달며, 인터페이스를 정의하고, tsconfig를 사용해 TypeScript를 JavaScrip…

DOM과 브라우저 API

A24개 레슨PRO

JavaScript로 HTML을 대화형으로 만듭니다. 요소를 선택하고 이벤트를 수신하며 콘텐츠를 읽고 변경하고, Document Object Model을 사용해 요소를 동적으로 생성하거나 제거합니다.

반응형 디자인 기초

A24개 레슨PRO

어떤 화면 크기에서도 제대로 작동하는 레이아웃을 만들어 보세요. 뷰포트 메타 태그를 배우고, Flexbox와 Grid로 유연한 레이아웃을 구성하며, 모바일 우선 방식으로 미디어 쿼리를 작성합니다.

HTML 폼과 시맨틱 마크업

A24개 레슨PRO

HTML 지식을 한층 넓혀 보세요. ARIA 속성을 사용해 완전히 접근 가능한 폼을 만들고, HTML5 입력 유형을 폭넓게 활용하며, 브라우저 기본 유효성 검사를 적용하고, 모든 클라이언트가 구조를 이해할 수 있는 마크업을 작성합니다.

JavaScript: 배열, 객체와 ES6+

A24개 레슨PRO

최신 문법과 강력한 내장 메서드로 JavaScript 실력을 한 단계 높여 보세요. map, filter, reduce로 배열을 다루고, 객체를 구조 분해하며, 데이터를 전개하고, 템플릿 리터럴을 사용하며, ES 모듈로 모듈화된 코드를 작성합니다.

Git과 협업 작업 흐름

A24개 레슨PRO

프론트엔드 개발자로서 Git을 효과적으로 사용해 보세요. 작업을 저장하는 핵심 명령어를 배우고, 기능 개발을 위한 브랜치의 개념을 이해하며, GitHub에 푸시하고, 풀 리퀘스트로 협업합니다.

CSS 변수, 전환과 애니메이션

A24개 레슨PRO

CSS 움직임으로 인터페이스에 생동감을 더해 보세요. 유지 관리하기 쉬운 디자인 토큰에 사용자 지정 속성을 사용하고, 상태 변화에 부드러운 전환을 추가하며, 키프레임 애니메이션을 만들고, 사용자의 움직임 선호를 존중합니다.

CSS 레이아웃 마스터하기

B14개 레슨PRO

기초를 넘어 CSS 레이아웃을 제대로 익혀 보세요. Flexbox의 정렬과 줄바꿈을 깊이 탐구하고, CSS Grid의 템플릿 영역과 자동 맞춤을 활용하며, 두 기법을 결합하고, 일관된 테마를 위해 CSS 사용자 지정 속성을 사용합니다.

JavaScript 모듈과 빌드 도구

B14개 레슨PRO

최신 JavaScript 도구 체계를 이해해 보세요. ES 모듈 문법을 사용하고, npm으로 패키지를 관리하며, Vite로 즉시 개발 서버를 실행하고, 프로덕션 번들의 크기를 작게 유지하는 번들링 개념을 배웁니다.

TypeScript 타입과 인터페이스 심화

B14개 레슨PRO

TypeScript의 타입 시스템을 더 깊이 탐구해 보세요. 재사용 가능한 제네릭 함수를 작성하고, 유틸리티 타입으로 인터페이스를 변환하며, 매핑 타입과 조건부 타입을 만들고, 실행 시점에 타입을 안전하게 좁힙니다.

React 기초

B14개 레슨PRO

첫 React 애플리케이션을 만들어 보세요. JSX 문법을 이해하고, 함수형 컴포넌트로 UI를 구성하며, props로 데이터를 전달하고, useState 훅으로 로컬 상태를 관리해 상호작용하는 인터페이스를 만듭니다.

React: useEffect와 데이터 가져오기

B14개 레슨PRO

React 컴포넌트를 외부 시스템과 동기화해 보세요. useEffect의 작동 방식을 배우고, 마운트 시 API에서 데이터를 가져오며, 로딩 및 오류 상태를 표시하고, AbortController로 부수 효과를 올바르게 정리합니다.

Vue 3 기초

B14개 레슨PRO

단일 파일 컴포넌트를 사용해 첫 Vue 3 애플리케이션을 만들어 보세요. Options API와 핵심 디렉티브를 배우고, props와 emits로 부모 컴포넌트와 자식 컴포넌트가 소통하는 방법을 익힙니다.

프론트엔드 접근성

B14개 레슨PRO

모두가 사용할 수 있는 인터페이스를 만들어 보세요. WCAG 적합성 등급을 이해하고, 접근성의 기반으로 시맨틱 HTML을 사용하며, ARIA 역할과 속성을 올바르게 적용하고, 키보드만으로도 모든 기능을 사용할 수 있게 합니다.

JavaScript: 비동기 프로그래밍

B24개 레슨PRO

기초부터 비동기 JavaScript를 완벽하게 익혀 보세요. 이벤트 루프를 이해하고, 콜백 패턴에서 Promise로 발전하며, 적절한 오류 처리를 적용한 깔끔한 async/await 코드를 작성합니다.

React: 고급 훅

B24개 레슨PRO

React 훅 API 전체를 완벽하게 익혀 보세요. useContext로 속성 전달을 반복하지 않고 데이터를 공유하며, useReducer로 복잡한 상태를 관리하고, useMemo와 useCallback으로 성능을 최적화하며, 로직을 사용자 지정 훅…

Vue 3: Composition API와 반응성

B24개 레슨PRO

Composition API로 Vue 3의 강력한 기능을 최대한 활용해 보세요. 반응형 상태에 ref와 reactive를 사용하고, 파생 값과 부수 효과에 computed와 watch를 활용하며, 재사용 가능한 컴포저블을 만듭니다.

상태 관리

B24개 레슨PRO

애플리케이션 전반의 상태를 효과적으로 관리해 보세요. React용 Redux Toolkit, 더 간단한 대안인 경량 Zustand, Vue용 Pinia를 배우고, 전역 상태가 실제로 필요한 시점을 판단하는 원칙을 익힙니다.

프론트엔드 테스트

B24개 레슨PRO

프론트엔드 코드에 대한 자동화 테스트를 작성해 보세요. Jest를 설정하고, Testing Library로 React 컴포넌트를 테스트하며, Vue 컴포넌트를 테스트하고, 테스트가 빠르고 독립적으로 실행되도록 모듈과 API 호출을 모의 처리합니다.

CSS 아키텍처

B24개 레슨PRO

확장 가능한 CSS를 작성해 보세요. 예측 가능한 선택자를 위한 BEM 명명 규칙을 배우고, CSS Modules로 스타일의 적용 범위를 지정하며, styled-components와 Emotion으로 JavaScript에 CSS를 직접 추가하고, 유…

API 통합과 REST

B24개 레슨PRO

프론트엔드를 백엔드 API에 연결해 보세요. 모든 HTTP 메서드에 네이티브 Fetch API를 사용하고, 인터셉터와 기본 URL을 위해 Axios를 추가하며, HTTP 오류를 적절히 처리하고, SWR 또는 React Query로 서버 데이터를 캐시…

서버 측 렌더링: Next.js

B24개 레슨PRO

Next.js로 프로덕션 React 애플리케이션을 만들어 보세요. Pages Router와 최신 App Router를 모두 이해하고, 서버 컴포넌트와 클라이언트 컴포넌트를 구분하며, 적절한 렌더링 전략을 선택하고, 서버리스 API 경로를 추가합니다.

서버 측 렌더링: Nuxt 3

B24개 레슨PRO

Nuxt 3로 풀스택 Vue 애플리케이션을 만들어 보세요. 파일 기반 라우팅과 자동 임포트로 반복적인 코드를 줄이고, 컴포저블로 서버 데이터를 가져오며, 모듈로 기능을 확장하고, 정적 사이트 또는 SSR로 배포합니다.

프로그레시브 웹 앱

B24개 레슨PRO

웹사이트를 앱과 같은 경험으로 바꿔 보세요. 설치할 수 있도록 웹 앱 매니페스트를 작성하고, 오프라인 지원을 위해 서비스 워커를 등록하며, 캐싱 전략을 구현하고, 푸시 알림을 추가합니다.

WebSockets와 실시간 프론트엔드

B24개 레슨PRO

실시간 사용자 인터페이스를 만들어 보세요. 네이티브 WebSocket API를 사용하고, Socket.io 클라이언트 라이브러리를 통합하며, 단방향 데이터 스트림을 위해 서버 전송 이벤트를 수신하고, 낙관적 업데이트 같은 실시간 데이터용 UI 패턴을…

웹 성능 최적화

C14개 레슨PRO

사이트를 빠르게 만들고 개선 효과를 측정해 보세요. Core Web Vitals를 이해하고, Lighthouse 감사를 실행하며, 웹에 맞게 이미지를 최적화하고, 코드 분할과 지연 로딩으로 JavaScript 전송량을 줄입니다.

프론트엔드를 위한 고급 TypeScript

C14개 레슨PRO

TypeScript의 가능성을 최대한 끌어내 보세요. 템플릿 리터럴 타입으로 타입을 만들고, 정밀한 제네릭으로 React 컴포넌트와 훅에 주석을 달며, 엄격 모드를 활성화해 안전하지 않은 any 사용을 없애고, 데코레이터를 탐구합니다.

React 고급 패턴

C14개 레슨PRO

라이브러리 제작자처럼 React 코드를 작성해 보세요. Context를 기반으로 복합 컴포넌트를 만들고, 렌더링 속성과 HOC로 여러 곳에서 공유되는 관심사를 처리하며, Portal로 트리 바깥에 렌더링하고, 오류 경계로 충돌에서 복구합니다.

Vue 고급 패턴

C14개 레슨PRO

실무 애플리케이션에서 사용하는 Vue 3 고급 패턴을 익혀 보세요. provide/inject로 컴포넌트 트리 전체에서 로직을 공유하고, Suspense로 컴포넌트를 비동기 로드하며, 사용자 지정 디렉티브를 작성하고, 플러그인으로 앱을 확장합니다.

프론트엔드 아키텍처

C14개 레슨PRO

대규모 팀에서도 확장 가능한 프론트엔드 애플리케이션을 설계해 보세요. 컴포넌트 계층 구조에 Atomic Design을 적용하고, Turborepo 모노레포로 여러 패키지를 관리하며, 마이크로 프론트엔드 Module Federation을 구현하고, 기…

디자인 시스템과 컴포넌트 라이브러리

C14개 레슨PRO

공유 컴포넌트 라이브러리를 만들고 유지 관리해 보세요. Storybook에서 컴포넌트를 문서화하고, Style Dictionary로 디자인 토큰을 정의하며, npm에 버전을 지정해 게시하고, 이를 사용하는 애플리케이션에 시스템을 통합합니다.

프론트엔드 보안

C14개 레슨PRO

웹 보안 위협으로부터 사용자를 보호해 보세요. 출력 인코딩과 Content Security Policy로 XSS를 방지하고, SameSite 쿠키와 토큰으로 CSRF를 막으며, CSP 헤더를 구성하고, 브라우저에서 OAuth를 안전하게 구현합니다.

프론트엔드 CI/CD와 DevOps

C14개 레슨PRO

프론트엔드 전달 과정을 자동화해 보세요. 모든 푸시마다 린트, 테스트, 빌드를 실행하는 GitHub Actions 작업 흐름을 작성하고, Vercel, Netlify, Cloudflare Pages에 자동 배포하며, CI에서 환경 변수를 관리하고,…

시니어 프론트엔드 엔지니어링

C24개 레슨PRO

시니어 수준으로 업무를 수행해 보세요. 프론트엔드에 특화된 프레임워크로 시스템 설계 면접에 접근하고, 건강한 코드 검토 문화를 조성하며, 멘토링과 문서화를 통해 주니어 엔지니어의 성장을 돕고, 변화하는 웹 표준을 계속 익힙니다.

자주 묻는 질문