Syw.Frontend

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

2025. 6. 26.

👁️ 33회 읽음

🧭 들어가며

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 APIsetup() 함수 중심 구조 이해

🎯 이 강좌만 마쳐도, 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(실습 과정)는 단계별 릴리즈 예정입니다.