SYWStudio
게스트로그인

Vue 3 실전 강좌, FE 스쿨에서 곧 시작합니다!

👁️ 59회 읽음

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(실습 과정)는 단계별 릴리즈 예정입니다.

FE 스쿨

이 글이 도움이 되셨나요? FE 스쿨에서 더 깊은 실무 강의를 제공합니다.

FE 스쿨 강좌 보기

AI 연구소

프론트엔드 엔지니어 실무자 관점에서 AI를 분석하고 인사이트를 제공합니다.

AI 연구소 바로가기

연관글

이 글과 함께 보면 좋은 글

3~6개의 추천 글로 체류시간과 광고 노출을 높였습니다.