Vue 배우기 - 코딩 강좌
Vue 배우기 - 코딩 강좌 — 휴대폰으로 컴포넌트를 만들며 Vue.js 배우기
Vue 배우기 - 코딩 강좌는 HTML과 JavaScript를 조금 알고 있는 초보자와 Options API에서 Composition API로 넘어가는 개발자를 위해 Vue.js를 가르치는 무료로 시작할 수 있는 iOS 및 Android 앱이에요. 첫 template부터 Pinia, Vue Router, Nuxt 3까지 42개 course와 156개 lesson으로 구성되어 있으며, single-file component가 기기에서 컴파일되므로 20개의 guided project와 mission, Vue Lab을 서버 없이 실행할 수 있어요.
- 가격
- 무료, Pro 업그레이드
- 플랫폼
- iOS 및 Android
- 언어
- 22
- 연령 등급
- 4+
- 버전
- 82.6.0
- 필요 사항
- iOS 15.1 이상
- App Store
- 3.0 ★ (2)
컴포넌트를 하나 직접 망가뜨려 보면 그 구조를 더 쉽게 이해할 수 있어요.
Vue Lab은 매일 망가진 컴포넌트를 보여 주고 버그를 찾게 하며, 실시간 컨트롤로 컴포넌트의 props를 조정하고 클릭할 때 state가 어떻게 바뀌는지 보여 줘요. Single-file component는 휴대폰에서 컴파일되므로 preview가 눈앞에서 망가졌다가 복구되고, 무엇이 잘못됐는지 알려 주는 error card도 표시돼요.
어떤 앱인가요
Vue 배우기 - 코딩 강좌는 42개 course와 156개 lesson을 통해 Vue.js를 가르치는 무료 iOS 및 Android 앱이에요. template syntax와 data binding부터 Composition API, Pinia, Vue Router, TypeScript, Nuxt 3, Vitest를 사용한 testing과 full-stack app까지 배울 수 있어요. Single-file component가 기기에서 컴파일되므로 guided project, coding mission, 실습형 Vue Lab을 서버 없이 휴대폰에서 실행할 수 있고, Pro에서는 AI mentor가 code와 error를 설명해 줘요.
앱 내부 살펴보기
화면은 어떻게 보이나요
강좌
Vue 코스에서 배우는 내용
앱 자체 코스 목록에 있는 42개 코스와 156개 레슨으로, 첫 템플릿부터 서버 렌더링과 프로덕션 패턴까지 다룹니다.
Vue.js 시작하기
Vue.js, Vue CLI와 프로젝트 구조, 템플릿 문법 및 데이터 바인딩을 소개합니다.
반응성과 Composition API
Vue 3 Composition API 기초, script setup 문법, 반응성 및 computed 속성, Vue 디렉티브를 다룹니다.
Components and Forms
컴포넌트 기초와 커뮤니케이션, 슬롯, provide와 inject, 폼과 유효성 검사, 컴포넌트 생명주기를 다룹니다.
Reuse and Polish
Vue 3 composables, 트랜지션과 애니메이션, 오류 처리, 렌더 함수와 JSX를 다룹니다.
State and Routing
Pinia 상태 관리, Vuex, Vue Router를 사용한 라우팅과 고급 라우터 패턴, API 및 비동기 데이터 처리를 다룹니다.
TypeScript, i18n and Tooling
Vue 3에서의 TypeScript, 국제화, Storybook 통합, Vue 앱 배포와 유지 관리를 다룹니다.
Nuxt 3, 테스트 및 실시간 기능
Nuxt 3를 사용한 서버 사이드 렌더링, Vitest를 사용한 컴포넌트 테스트, Apollo를 사용한 GraphQL, WebSockets를 사용한 실시간 앱을 다룹니다.
Production Patterns
성능, 보안 모범 사례, 플러그인 개발, 컴포넌트 라이브러리 게시, 프로그레시브 웹 앱과 마이크로 프런트엔드를 다룹니다.
어떻게 작동하나요
앱에서 Vue를 배우는 과정
각 course에는 level이 표시되어 있고, 무료 첫 course 이후의 모든 lesson은 무료 preview로 시작해요. 따라서 더 진행할지 결정하기 전에 해당 topic이 어떤 방식으로 구성되어 있는지 확인할 수 있어요.
Introduction to Vue.js로 시작하기
첫 course는 무료이며 Vue가 무엇인지, environment를 설정하는 방법과 Hello Vue app을 만드는 방법부터 시작해요. Course에는 A1부터 C1까지 tag가 붙어 있어 어디서 시작하고 다음에 무엇을 배울지 분명하게 알 수 있어요.
휴대폰에서 컴포넌트 만들고 실행하기
single-file component를 편집하면 바로 preview할 수 있어요. Guided project에서는 한 단계씩 app을 완성해 나가고, App Studio에서는 미리 준비된 blueprint를 사용해 router와 store가 있는 multi-screen app을 만들 수 있어요.
Vue Lab에서 연습하기
매일 주어지는 bug를 찾고, Style Lab에서 목표 design과 똑같이 만들어 보고, speed-build duel에서 시간과 경쟁하거나, Options API component를 Composition 방식으로 다시 작성해 보세요.
무엇이 들어 있나요
앱에 포함된 내용
42
Course, 156개 lesson
template syntax와 directive부터 lifecycle, slot, provide와 inject, composable을 거쳐 Nuxt 3, GraphQL, PWA, micro-frontend까지 배울 수 있어요.
20
Guided project
single-file component가 기기에서 바로 컴파일되고 preview가 망가졌을 때 error card가 표시되는 환경에서, 한 단계씩 app을 완성해 나가요.
28
Coding mission
쉬운 문제부터 어려운 문제까지 다양한 exercise를 제공하며, router와 store가 있는 multi-screen app을 위한 App Studio blueprint도 포함돼요.
Lab
Vue Lab
reactivity inspector, 매일 진행하는 bug hunt, 12개의 Style Lab level, speed-build duel, Options API를 Composition API로 바꿔 보는 dojo, 그리고 image card로 공유할 수 있는 My Components library를 이용할 수 있어요.
Interview
Vue interview question
front-end developer interview를 위한 question과 함께 quiz, flashcard 복습 session, 언제든 열어 볼 수 있는 cheat sheet를 제공해요.
AI
AI mentor (Pro)
concept나 error에 대해 질문하고, code 설명을 듣거나, 공부하고 싶은 어떤 topic이든 맞춤형 lesson을 생성할 수 있어요.
배경
Vue.js란 무엇이며, 초보자는 무엇부터 배워야 할까요?
Vue는 컴포넌트로 interactive web interface를 만드는 JavaScript framework예요. 컴포넌트는 각각 template, logic, style의 일부를 담당하는 작고 재사용 가능한 구성 요소예요. 일반 HTML과 약간의 JavaScript로 시작해 나아가면서 구조를 추가할 수 있기 때문에 초보자도 쉽게 배울 수 있어요. 보통은 template과 data binding을 먼저 배우고, 그다음 reactivity와 component, 이어서 Composition API를 배운 뒤, routing과 state management, server rendering을 배우는 순서가 좋아요.
Reactivity핵심이 되는 개념
data의 일부를 바꾸면 그 data에 의존하는 화면이 저절로 업데이트돼요. 어떤 값이 reactive인지, computed property와 watcher가 무엇을 더해 주는지 이해하면 Vue를 처음 배울 때 생기는 혼란을 대부분 줄일 수 있어요.
Options API와 Composition API컴포넌트를 작성하는 두 가지 방법
기존의 Options API는 data와 methods처럼 type별로 code를 묶어요. script setup을 사용하는 Composition API는 feature별로 code를 묶어 재사용 가능한 composable을 쉽게 만들 수 있어요. 많은 tutorial과 codebase가 여전히 두 방식을 모두 사용하므로, 어느 쪽이든 읽을 수 있는 능력은 유용해요.
Pinia, Vuex와 router실제 app에 추가되는 것
app에 여러 화면이 생기면 화면 사이를 이동하기 위한 routing과 여러 component가 사용하는 data를 위한 shared store가 필요해요. Pinia는 현재 Vue에서 사용하는 store이고, Vuex는 이전 방식의 store로 기존 project에 아직 많이 남아 있어요.
Nuxt와 server rendering검색과 속도가 중요할 때
Nuxt는 Vue를 기반으로 page를 server에서 render해 첫 load와 검색 노출에 도움을 줘요. 보통은 component, routing, state에 익숙해진 다음 단계에서 배우는 주제예요.
나에게 잘 맞는지
누구에게 적합하고, 누구에게는 적합하지 않은지
다음과 같은 분께 잘 맞아요
- HTML과 JavaScript를 조금 알고 첫 프레임워크를 배우고 싶은 분
- Options API에서 Composition API로, 또는 Vuex에서 Pinia로 옮기려는 분
- Vue.js 개발자 면접이나 첫 프런트엔드 직무를 준비하는 분
- 컴포넌트에 대한 글을 읽는 것보다 고장 난 컴포넌트를 직접 수정하며 더 잘 배우는 분
- 통근 중에도 할 수 있는 짧은 학습 세션을 원하는 분
다음과 같은 경우에는 적합하지 않아요
- HTML이나 JavaScript를 전혀 본 적이 없다면 먼저 JavaScript 코스부터 시작하세요
- 휴대폰으로 프로덕션 앱을 출시하고 싶다면 — 실제 작업은 여전히 노트북에서 진행됩니다
- 모든 콘텐츠가 무료이기를 기대한다면: 첫 코스와 미리보기는 무료이며, 전체 커리큘럼을 이용하려면 Pro가 필요합니다
- 공식 Vue.js 자료를 원한다면 — 이 앱은 독립적인 학습 앱입니다
질문
자주 묻는 질문
휴대폰으로 Vue.js를 배우는 가장 좋은 방법은 무엇인가요?
컴포넌트에 대한 글만 읽는 대신 직접 실행하며 배워 보세요. Vue 배우기 - 코딩 강좌는 기기에서 싱글 파일 컴포넌트를 컴파일하므로, 20개의 가이드 프로젝트와 28개의 미션, Vue Lab을 모두 휴대폰에서 이용할 수 있습니다. 42개 코스에 걸친 짧은 레슨을 통해 템플릿 문법부터 Nuxt 3까지 배우며, 첫 코스는 무료로 시작할 수 있습니다.
이 앱에서 Composition API와 Pinia를 배울 수 있나요?
네. Vue 배우기 - 코딩 강좌에는 Vue 3 Composition API 기초, script setup 문법, composables, Pinia 상태 관리에 관한 코스가 있으며, 기존 프로젝트를 위한 이전 방식의 Vuex도 다룹니다. Vue Lab의 Options to Composition API dojo에서는 클래식 컴포넌트를 현대적인 방식으로 다시 작성해 볼 수 있습니다.
Vue에서 Options API와 Composition API의 차이점은 무엇인가요?
Options API는 data, methods, computed처럼 유형별로 컴포넌트 코드를 묶습니다. 반면 script setup을 사용하는 Composition API는 기능별로 코드를 묶어 재사용 가능한 composables를 쉽게 만들 수 있습니다. Vue 배우기 - 코딩 강좌는 script setup을 사용하는 Composition API를 가르치며, Vue Lab의 Options to Composition API dojo에서 클래식 컴포넌트를 현대적인 방식으로 다시 작성해 볼 수 있게 합니다.
Vue를 배우기 전에 JavaScript를 알아야 하나요?
HTML과 JavaScript를 조금만 알아도 큰 도움이 됩니다. Vue 배우기 - 코딩 강좌는 기초를 알고 첫 프레임워크를 배우려는 초보자를 대상으로 하므로 Vue 개념은 처음부터 설명하지만 JavaScript 자체를 가르치지는 않습니다. 변수와 함수가 낯설다면 먼저 JavaScript 코스를 수강하는 것이 좋습니다.
Vue Lab이란 무엇인가요?
Vue Lab은 Vue 배우기 - 코딩 강좌에서 연습할 수 있는 공간입니다. 반응성 검사기, 고장 난 컴포넌트를 수정하는 일일 버그 헌트, CSS로 목표 디자인을 완성하는 Style Lab 레벨, 스피드 빌드 대결, Options to Composition API dojo, 그리고 직접 만든 결과물을 모아 보는 My Components 라이브러리가 있습니다.
Nuxt 3와 서버 사이드 렌더링도 다루나요?
네. Vue 배우기 - 코딩 강좌의 고급 코스에서는 Nuxt 3를 사용한 서버 사이드 렌더링, Suspense를 사용한 SSR 스트리밍, Fastify와 인증을 활용한 풀스택 Vue를 다룹니다. 또한 Vitest를 사용한 컴포넌트 테스트와 WebSockets를 사용한 실시간 앱도 배울 수 있습니다.
Vue.js 면접 준비에도 도움이 되나요?
네. Vue 배우기 - 코딩 강좌에는 프런트엔드 개발자 직무를 위한 Vue 면접 질문과 함께 퀴즈, 플래시카드 복습 세션, 치트 시트가 포함되어 있습니다. 관련 코스에서는 면접에 자주 등장하는 반응성, 생명주기, composables, 상태 관리를 다룹니다.
Vue 배우기 - 코딩 강좌는 무료인가요?
무료로 다운로드할 수 있습니다. 첫 코스, 모든 레슨의 미리보기, 첫 가이드 프로젝트, 첫 미션, 일일 버그 헌트, Style Lab의 첫 3개 레벨, 퀴즈, 면접 질문, 치트 시트는 무료이며, 무료 버전에는 광고가 표시됩니다. Pro를 이용하면 전체 커리큘럼과 랩, AI 멘토, 인증 시험이 잠금 해제되고 광고가 제거됩니다.
이 앱은 Vue.js 팀에서 만들었나요?
아니요. Vue 배우기 - 코딩 강좌는 독립적인 학습 앱이며 Vue.js 프로젝트와 제휴하거나 프로젝트의 보증을 받지 않습니다. 이 앱은 자체 코스와 연습 문제를 통해 Vue.js를 오픈 소스 프레임워크로 가르칩니다.
인증서가 있나요?
네. Pro에 포함된 최종 시험에 합격하면 수료증을 받을 수 있어요. 수료증에는 여러분이 완료한 작업이 표시되지만, 공인 자격은 아니므로 설명할 수 있는 컴포넌트와 프로젝트와 함께 제시할 때 가장 효과적이에요.
어떤 플랫폼과 언어를 지원하나요?
Vue 배우기 - 코딩 강좌는 App Store를 통해 iPhone(iOS 15.1 이상)에서, Google Play를 통해 Android에서 이용할 수 있어요. 인터페이스는 22개 언어로 제공되며, App Store에서 4+ 등급을 받았어요.
시작하기
오늘 첫 Vue 컴포넌트를 만들어 보세요
iOS와 Android에서 22개 언어로 무료로 시작할 수 있어요.
CoddyKit의 다른 앱
iOS 및 Android에서 이용할 수 있어요.