Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
Vue3 & Firebase(v10)를 활용하여 커뮤니티를 만드는 강의로 Vue3 실전 활용법, Firebase 기초부터 실전, 최신 웹 기술 활용법, 지식공유자 경험 공유 등 다양한 방면으로 개발자로써 한 단계 성장할 수 있도록 돕습니다!
중급자를 위해 준비한
[프론트엔드, 풀스택] 강의입니다.
이런 걸
배워요!
Vue3 Composition API(컴포저블, 동적&비동기 컴포넌트 등) 실무 활용법!
Firebase(v10) 완전 기초부터 실전! 그리고 배포까지!
Quasar로 예쁜 UI를 쉽고 빠르게 만드는 법!
VueUse, TiptapEditor 인기있는 라이브러리 활용!
IntersectionObserver, RelativeTimeFormat 등 최신 기술 활용법!
전체 텍스트 검색을 위한 Algolia Search 활용!
Vue3 기초를 배우셨나요?
이제 제대로 활용할 차례입니다! ✨
인프런 수강후기 이벤트 진행중 🎉
안녕하세요 🙂 Vue3 & Firebase10 커뮤니티 만들기 강의 수강후기 이벤트를 진행하고 있어요.
해당 강의를 수강하신 후 정성스럽게 수강후기를 작성해주시면 강의 무료쿠폰 1개를 드립니다.
(선착순 30명)
최신 기술을 활용한
Vue 3 & Firebase 10 커뮤니티 만들기 📖
안녕하세요! 이번 강의는 Vue3와 Firebase를 활용하여 커뮤니티 웹을 만드는 강의로, 이번 강의를 수강하신다면 Vue3 Composition API 실무 활용법! 그리고 Firebase 기초부터 실전까지 한 번에 내 것으로 만들 수 있는 강의입니다.
.png)
프론트엔드 웹을 개발할 때 에디터, 무한 스크롤링, 검색 기능, 디버깅 등 다양한 지식이 필요한데요. 해당 강의에서는 실무 경험에서 알 수 있는 다양한 웹 기술까지 습득하여 개발자로서 한 단계 성장할 수 있는 강의입니다.
실전은 언제나 중요하니까 💻
사실 이번 강의는 제가 이전에 론칭한 "Vue3 완벽 마스터 (기본편/실전편)" 이전부터 기획했던 강의입니다. 왜냐하면 어떤 기술을 익힐 때 배우는 것도 중요하지만 배운 기술을 활용해서 무언가 만들어 보는 것 또한 정말 중요하기 때문이죠.
우리가 운전 면허를 취득하고 자동차를 몰아보면 생각보다 쉽지 않을 거예요. 실제로 운전할 때는 운전을 배울 때 없었던 다양한 어려움이 있기 때문인데요.
웹 개발도 마찬가지입니다. Vue.js라는 기술을 배우고 무언가를 만들어 보지 않는다면 성장은 더딜 거예요. 그리고 Vue3를 배우고 실제 무언가를 만들려고 해도 쉽지 않을 겁니다. 실제로 웹을 개발할 때는 핵심이 되는 기술도 중요하지만, 그 주변 프론트엔드 생태계 기술이나 경험에서 알 수 있는 스킬 같은 것들도 굉장히 중요하거든요. 실제 웹 애플리케이션을 만들려고 해보신 분들은 많이 공감하실 거예요.
"막상 사이트를 제작하려고 하면 어려움이 있더라고요..."
 (1).png)
그래서 Vue3 & Firebase를 활용한 커뮤니티 만들기 강의를 론칭하게 되었는데요. 이번 강의는 앞에서 말씀드렸던 것처럼 Vue3 실무 활용법, Firebase 기초부터 실전까지! 그리고 실제 웹 애플리케이션을 만들 때 발생할 수 있는 다양한 어려움을 해소할 수 있는 강의입니다.
이 강의만의 특장점 ✨
📌 Firebase는 모르셔도 돼요! 완전 기초부터 실전 그리고 배포까지 한 번에 배울 수 있어요.
프론트엔드 개발자에게 Firebase는 정말 매력적인 기술입니다.
우리가 웹 기술을 공부하거나 실제로 웹 앱을 만들 때 백엔드가 필요한 경우가 있는데요. 이럴 때 Firebase를 활용하면 회원가입, 데이터베이스 관리, 파일 업로드, 푸시 알림 등과 같은 서비스를 쉽게 구현할 수 있거든요.
📌 Fallthrough 속성, 동적 & 비동기 컴포넌트, 컴포저블 함수 등 실전으로 확실히 이해해요!
강의를 통해 Pinia(with Setup Stores 문법), Quasar, VueUse, Tiptap Editor, Algolia Search 등 실제 웹 애플리케이션을 만들기 위해 필요한 다양한 기술을 익힐 수 있고요. Dynamic Component(동적 컴포넌트), Async Component (비동기 컴포넌트 for 지연로딩) 그리고 Composables 함수 구현 등 Vue3 실무 활용법을 제대로 학습할 수 있습니다.
📌 수강생 여러분들이 스스로 해내는 힘을 길러드립니다. 절대 후회 없을 거예요!
이번 강의는 단순히 어떤 기술을 알려드리는 강의가 아니에요.
- 버그가 발생했을 때 저는 어떻게 Breakpoint를 사용하고 디버깅을 하는지
- 또 제가 어떠한 기술을 익힐 때 공부법은 어떻게 되는지
- 그리고 Firebase를 학습할 때 공식 문서를 어떻게 보는지
강의에서 제 경험과 생각을 공유해 드리는데요. 수강생분들에게 스스로 해내는 힘을 드리기 위함입니다. 이번 강의를 보시면 느끼실 거예요! 공식 문서를 어떻게 보는지, 강의가 없어도 수강생 분들이 스스로 할 수 있도록 자세히 그리고 반복적으로 알려드립니다. 익숙해질 수 있도록 이요!
학습 내용 📚
섹션 0. 시작하기
- 함께 개발 환경을 구성하고 프로젝트를 생성
섹션 1. Auto Page&Layout 설정
- 자동으로 Page&Layout 라우팅이 설정할 수 있도록 라이브러리를 설정
- 라이브러리를 설정하며 지식공유자의 인사이트를 공유
섹션 2. Quasar 활용 UI 만들기
- Quasar를 활용하여 쉽고 빠르게 웹 레이아웃, 커뮤니티 UI 마크업
- router-link vs router.push() 차이
- 동적 컴포넌트, 비동기 컴포넌트를 활용한 성능 개선
- $attrs, $slots Vue 내장 객체 활용
- Fallthrough 속성과 inheritAttrs 옵션 이해
- 다중 v-model, VueRouter 중첩 레이아웃
섹션 3. Firebase 시작하기
- 프로젝트에서 사용할 Firebase 서비스와 공식 문서 보는 법 설명
- Firebase 프로젝트 생성 및 설치
섹션 4. Firebase Authentication
- Firebase를 활용한 이메일 회원가입, 구글 로그인, 사용자 정보 관리
- Pinia Setup Stores 문법을 활용한 사용자 상태 관리
- 지식공유자의 공부법 공유
섹션 5. VueUse & 공통 기능
- VueUse 라이브러리를 활용한 비동기 상태 관리 및 Pinia 상태 유지
- Local & Global Error Handling
- Tiptap Editor 만들기 (다양한 Tiptap Extensions 활용)
섹션 6. Firebase Cloud Firestore
- 커뮤니티와 댓글 기능 CRUD 구현
- setDoc vs addDoc 차이 등 Firebase 사용 경험에서 알 수 있는 팁 공유
- 쿼리, 정렬, 게시글 더보기 등 조금 더 복잡한 기능 구현
섹션 7. Web API & 고도화
- IntersectionObserver 활용 무한 스크롤 기능
- Intl.RelativeTimeFormat 활용 상대시간 표시
- 파라미터 URL 연동
- 내비게이션 가드 & 클라이언트 보안
- 좋아요, 북마크, 조회수 증가 기능 구현
섹션 8. Firebase Storage
- Tiptap Editor에서 Firebase Storage 이미지 업로드
- 이미지 업로드시 UUID, Image Resizer 활용
섹션 9. Firebase Cloud Functions
- Cloud Functions & Emulator 설치
- Functions를 활용한 고도화된 기능 구현
- Firebase Emulator를 활용한 로컬 테스트
- 게시글 및 댓글 작성자 표시하기
섹션 10. Algolia Search
- Algolia Search Extension 설치
- Algolia 검색 기능 프로젝트 적용
섹션 11. Firebase 보안 규칙 & 배포(Hosting)
- Firebase 보안규칙 설정
- Firebase Hosting 배포
이런 분들께 추천해요 🙋
- Vue3 활용법을 학습하여 개발자로서 한 단계 성장하고 싶으신 분!
- Firebase를 활용해서 실제 웹 애플리케이션을 만들고자 하시는 분!
- 최신 웹 기술, 라이브러리 등 웹 앱을 만들 때 필요한 기술을 배우고 싶으신 분!
강의를 들은 후 여러분은 😎
- 컴포저블 함수를 쉽게 분리하는 등 Vue3를 자신 있게 활용할 수 있습니다.
- Firebase를 활용해서 나만의 웹 서비스를 만들고 배포까지 할 수 있습니다.
- 어떤 기술을 배우든 공식문서를 보고 스스로 학습는 힘을 갖게 됩니다.
예상 질문 Q&A 💬
Q. Quasar Framework를 알고 있어야 수강할 수 있나요?
아닙니다 :)
Quasar Framework를 모르셔도 수강하는 데 지장 없습니다. Quasar는 커뮤니티 UI를 만들기 위한 도구로 사용되며 강의를 보시며 천천히 따라오시면 돼요! 그리고 강의 중간중간 퀘이사를 모르시는 분들을 위해 기본 지식을 설명하면서 진행합니다. 🙂
아울러 Quasar를 모르셔도 수강하는 데 지장은 없지만 아는 만큼 보인다고 하잖아요? 물론 퀘이사를 알고 있다면 시야가 더 넓어지실 거예요!
짐코딩 유튜브 채널에 있는 퀘이사 무료 강의라도 보시면 도움이 되실 거예요 :)
Q. Firebase를 알고 있어야 수강할 수 있나요?
아닙니다 :)
본 강의는 Firebase를 배우며 커뮤니티를 만드는 강의로 Firebase를 아예 모르셔도 수강하는 데 지장 없습니다. 본 강의에서는 Firebase 기초부터 실전뿐만 아니라 공식 문서를 보고 스스로 공부하는 법 등 개발자로서 한 단계 성장할 수 있도록 힘쓴 강의입니다.
Q. Vue3를 알고 있어야 수강할 수 있나요?
네 맞습니다 :)
본 강의는 Vue3를 알고 있어야 수강할 수 있습니다. 아래 링크는 제가 론칭한 Vue3 강의입니다. 수강평 및 커리큘럼 그리고 맛보기 강의를 보시고 괜찮다 싶으시면 수강해 주시면 감사드리겠습니다.
강의 로드맵 📢
아래 순서대로의 학습을 추천드려요!
짐코딩과 함께하는
실용적인 코딩 학습 💪
안녕하세요, 코딩 교육 크리에이터 짐코딩입니다.
유튜브 "짐코딩 GYM CODING" 채널을 운영하고 있어요!
많은 분들이 이전에 론칭한 Vue3 완벽 마스터 강의를 사랑해 주셔서 Vue3 활용편인 Vue3 & Firebase 커뮤니티 강의를 론칭하게 되었어요!
제 강의에 관심가져 주셔서 감사드리며 앞으로 더 좋은 콘텐츠로 보답하겠습니다 💪
이런 분들께
추천드려요!
학습 대상은
누구일까요?
Vue3 Composition API를 제대로 활용하는 법을 배우고 싶으신 분!
Firebase를 기초부터 제대로 학습하여 웹을 만들고 싶으신 분!
이론은 배웠지만 막상 사이트를 제작하려고 할 때 어려움이 있으신 분!
지식공유자의 생각, 경험를 얻고 함께 성장하고 싶으신 분!
선수 지식,
필요할까요?
HTML, CSS
자바스크립트
Vue3
안녕하세요
짐코딩입니다.
안녕하세요.
코딩 교육 크리에이터 짐코딩 입니다 🙂
유튜브에서 코딩 교육 "짐코딩 GYM CODING"채널을 운영하고 있어요.
그리고 인프런 교육 플랫폼에서 지식을 공유하고 있습니다.
제 강의의 특징은 이제 막 시작하시는 분들을 위하여
설명하고자 할 때는 최대한 쉽게,
알려드리고자 할 때는 최대한 알차게 설명드립니다.
항상 수강생 입장에서 생각하는 코딩 교육 크리에이터가 되겠습니다.
감사합니다.
📨 이메일 bruce.lean17@gmail.com
🏋️♀️ 헬스타그램 @helinlee.gram
🧑💻 코딩스타그램 @gymcoding
커리큘럼
전체
68개 ∙ 16시간 38분
수업 자료
가 제공되는 강의입니다.
마지막 업데이트일: 2024년 07월 02일