Vue.js: 실제 UI를 구축하기 위한 프로그레시브 프레임워크
Vue.js는 컴포넌트 기반 사용자 인터페이스를 구축하도록 설계된 프로그레시브 JavaScript 프레임워크입니다. 기존 페이지에 포함된 단일 인터랙티브 위젯부터 Nuxt를 활용한 완전한 서버 렌더링 애플리케이션까지 다양한 규모의 프로젝트에 적용할 수 있습니다. Composition API, 세밀한 반응성 시스템, 일급 TypeScript 지원으로 새로운 프로젝트나 레거시 프론트엔드에서 마이그레이션하는 팀 모두에게 실용적인 선택지입니다. 본 트랙은 템플릿 문법부터 프로덕션 배포까지 Vue 3을 전반적으로 다룹니다.
학습 내용
Composition API와 script setup 문법, Vue 디렉티브, 계산 속성, 반응성 기초를 다룹니다. 트랙은 컴포넌트 통신, 슬롯, provide/inject, 공유 로직을 위한 컴포저블을 포함합니다. Pinia와 Vuex를 사용한 애플리케이션 상태 관리, Vue Router를 활용한 라우팅(고급 패턴 포함), 폼 검증, REST API 소비, WebSocket을 통한 실시간 데이터 처리를 배웁니다. 후반부 코스는 TypeScript 통합, 국제화, Storybook, Vitest를 통한 테스팅, 성능 최적화, Nuxt 3를 통한 서버사이드 렌더링, Apollo를 활용한 GraphQL, Progressive Web Apps, Vue 보안 실천법을 다룹니다.
학습 경로
42개 코스는 A1부터 C1까지 구성됩니다. A1과 A2 코스는 Vue CLI, 템플릿 문법, 데이터 바인딩, 디렉티브, 폼, 기본 컴포넌트를 다룹니다. B1 코스는 생명 주기 훅, 트랜지션, Pinia, Vuex, Vue Router, TypeScript, i18n, 비동기 데이터를 포함하여 전체 생태계를 구성합니다. B2는 Nuxt 3를 통한 서버사이드 렌더링, GraphQL, WebSocket, 컴포넌트 테스팅, 렌더 함수, PWA 지원, 컴포넌트 라이브러리 배포로 난이도를 높입니다. C1 캡스톤 코스는 마이크로 프론트엔드 아키텍처, 고급 Composition API 패턴, Suspense를 활용한 SSR 스트리밍, 대규모 Vue 성능 최적화, Fastify와 인증으로 구축한 풀스택 애플리케이션을 다룹니다.
학습 방식
각 코스는 짧고 집중된 레슨으로 구성되어 있으며, 내장 코드 에디터에서 실시간 피드백과 함께 완료합니다. 막히는 부분이 있을 때 AI 튜터를 활용할 수 있으므로 앱을 벗어나지 않고 문법 연습, 컴포넌트 챌린지, 아키텍처 문제를 자신의 속도에 맞춰 진행할 수 있습니다.