Vue 3 실전 강좌, FE 스쿨에서 곧 시작합니다!
2025. 6. 26.
- #Vue.js
- #FE 스쿨
- #프론트엔드 강좌
- #Firebase
- #실습 프로젝트
- #퍼블리셔 입문
🧭 들어가며
Vue.js 강좌, 드디어 FE 스쿨에서 시작됩니다!
이번 강의는 두 가지 코스로 나뉘며, HTML/CSS에 익숙한 퍼블리셔나 웹 입문자를 위한 기초 과정부터
Firebase를 연동한 실전형 Vue 앱 제작까지 순차적으로 안내할 예정입니다.
🧱 Part 1. Vue 기초 강좌 – 입문자를 위한 부드러운 진입
📌 대상: 자바스크립트와 Vue가 처음인 분
📌 목표: Vue 문법을 이해하고, 컴포넌트 기반 구조에 익숙해지기
주요 내용 | 설명 |
---|---|
Vue 프로젝트 시작하기 | Vite 환경 구성, CDN 방식 비교 |
템플릿 문법 | v-bind , v-if , v-for , 이벤트 처리 |
반응형 시스템 | ref , reactive , watch , computed |
컴포넌트 분리 | Props, Emit, v-model, Slot 등 |
Composition API | setup() 함수 중심 구조 이해 |
🎯 이 강좌만 마쳐도, Vue 3 기반 프로젝트를 시작할 수 있습니다!
🔥 Part 2. Vue + Firebase 실습 강좌 – 실전형 메모앱 만들기
📌 대상: 기초 문법을 익히고 실무 흐름을 체험하고 싶은 분
📌 목표: Firebase와 함께 실제 앱을 만들어보며 Vue의 진짜 힘을 체험
실습 챕터 | 핵심 기능 |
---|---|
메모 추가/수정/삭제 | CRUD 기본기 |
이미지 업로드 | <input type="file"> + Firebase Storage |
드래그 앤 드롭 정렬 | vuedraggable 활용 |
검색/필터 기능 | 사용자 입력 기반 실시간 필터링 |
삭제 모달 + 커스텀 토스트 | UI 완성도 향상 |
다크모드 토글 | Vue 방식의 테마 적용 |
Firebase Auth 연동 | Google 로그인, 사용자 인증 |
배포 | Vite 기반 앱을 Netlify/Vercel에 배포 |
📲 모든 실습은 Composition API, Firebase 최신 SDK, 반응형 디자인으로 구성되어
실제 서비스에 근접한 결과물을 만들어보게 됩니다.
✅ 어떤 분께 추천하나요?
- 퍼블리싱은 할 줄 아는데 Vue는 처음인 분
- 실무에서 Vue와 Firebase를 어떻게 연동하는지 배우고 싶은 분
- 포트폴리오로 Vue 프로젝트를 하나 만들고 싶은 분
- React 대신 Vue를 배우고 싶은 입문자/디자이너
⏰ 공개 일정
📅 2025년 6월 말
Part 1(기초 과정)은 무료로 일부 강좌 공개,
Part 2(실습 과정)는 단계별 릴리즈 예정입니다.