165,000원
월 33,000원
5개월 할부 시
중급자를 위해 준비한
[프론트엔드, 풀스택] 강의입니다.
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
커리큘럼
총 66 개
˙ 16시간 38분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 시작하기
4 강
∙ 30분
섹션 1. Auto Page&Layout 설정
4 강
∙ 51분
섹션 2. Quasar 활용 UI 만들기
10 강
∙ 3시간 19분
웹 레이아웃 구성 : router-link vs router.push
미리보기
25:46
로그인/회원가입 UI : "실무에서 유용한 로그인 팝업"
24:31
로그인 팝업 성능개선 : Dynamic&Lazy Load 컴포넌트
08:30
커뮤니티 목록 UI : "컴포넌트 배치 및 정렬 친해지기!"
24:56
커뮤니티 목록 필터 & 정렬 UI : "레이아웃 3단 분리"
27:53
커뮤니티 상세 UI : "컴포넌트 배치 & 정렬 자신감 얻기!"
26:08
컴포넌트 분리 : "$attrs, $slots Vue 내장 객체 활용"
08:41
커뮤니티 글쓰기 UI : "Fallthrough 속성과 inheritAttrs 옵션 이해"
27:21
커뮤니티 수정 UI : "Multiple v-model 기반 Form 컴포넌트"
14:51
마이페이지 UI : VueRouter 중첩 레이아웃 구성
10:39
섹션 3. Firebase 시작하기
2 강
∙ 16분
파이어베이스 둘러보기 : 공식문서 보는 법
08:04
파이어베이스 프로젝트 생성 및 설치
08:54
섹션 4. Firebase Authentication
8 강
∙ 1시간 33분
Google 로그인 : Pinia Setup Stores User 사용자 관리
21:55
Email 회원가입&로그인 : "재밌는 사용자 썸네일 생성"
23:19
비밀번호 초기화 : "제 공부법도 공유해 드려요"
09:26
비밀번호 변경하기
06:22
Email 인증하기
11:54
[추가영상] 추가영상 관련 설명
사용자 프로필 & 이메일 변경하기
14:22
[추가영상] 이메일 열거 보호 비활성화
05:53
섹션 5. VueUse & 공통 기능
6 강
∙ 1시간 46분
LocalStorage로 Pinia 상태유지 : VueUse 활용하기!
07:09
Form 유효성 체크 : Quasar Validation 활용
13:06
Local Error Handling
16:27
Global Error Handling
08:54
비동기 상태(loading, error) 관리 : VueUse 활용하기!
33:28
Tiptap Editor 만들기 : 다양한 Tiptap Extensions 활용
27:43
섹션 6. Firebase Cloud Firestore
10 강
∙ 2시간 56분
Firebase 용어 및 데이터 구조
09:23
커뮤니티 글 저장 : setDoc vs addDoc 차이 (화이팅!)
39:30
커뮤니티 목록 조회
11:13
커뮤니티 목록 필터 : 복합 쿼리 및 쿼리 연산자 활용
32:10
커뮤니티 정렬 구현 : "모두 함께 화이팅해요!!"
19:10
커뮤니티 상세페이지 구현
12:18
커뮤니티 수정
09:35
커뮤니티 삭제
04:41
댓글 등록, 조회 그리고 삭제
21:18
커뮤니티 더보기 기능 구현 : Firestore 쿼리 커서 활용
16:46
섹션 7. Web API & 고도화
8 강
∙ 1시간 58분
무한 스크롤링 구현 : Web API IntersectionObserver
09:17
상대시간 표시 : Intl.RelativeTimeFormat
13:15
파라미터 URL 연동 : "계속해서 반복하다 보면 익숙해 지는 거 같아요 :)"
13:55
VueRouter 네비게이션 가드
08:28
클라이언트 보안
08:51
좋아요 기능 : useLike Composables
35:25
북마크 기능 : useBookmark Composables
23:43
조회수 증가 : increment
05:44
섹션 8. Firebase Cloud Storage
1 강
∙ 22분
TiptapEditor 이미지 업로드 : UUID, Image Resizer 활용
22:09
섹션 9. Firebase Cloud Functions
7 강
∙ 1시간 52분
Cloud Functions란? : 다양한 활용 리뷰!
05:32
Cloud Functions 시작하기
14:23
좋아요 수, 북마크 수, 댓글 수 카운팅
26:54
사용자 데이터 users 컬렉션에 쌓기
27:35
태그 데이터 tags 컬렉션에 쌓기
23:57
게시글, 댓글 작성자 표시하기
10:00
게시글 목록 태그 조회하기
04:30
섹션 10. Algolia Search
2 강
∙ 45분
Algolia 시작하기 : "텍스트 검색을 위한"
13:59
Algolia Search 적용 : "검색 기능 추가"
32:00
섹션 11. Firebase 보안규칙 & 배포(Hosting)
2 강
∙ 17분
Firebase 보안규칙 설정
13:32
Firebase Hosting 배포
04:25
섹션 12. 마치며
2 강
∙ 7분
소스수정
03:42
마무리 🎉
03:41
강의 게시일 : 2023년 10월 06일
(마지막 업데이트일 : 2023년 12월 08일)
수강평
총 34개
수강생분들이 직접 작성하신 수강평입니다.
5
34개의 수강평
5점
4점
3점
2점
1점
VIEW
추천 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
정말..한마디로 갓짐입니다. 저는 이해가 어려운 부분은 꼭 짚고 넘어가야하는 편인데, 반복해서 설명해주는 정성과 더불어 주 내용뿐 아니라 모를 수 있는 사소한 부분을 곁다리로 알아보게끔 해주셔서 지식이 더욱 넓혀지는게 가장 좋았어요. 저번 강의들부터 생각했지만 초보자의 시선에서부터 현업자의 시선까지 시간 들여 고루 알려주려 노력하시는 것이 이번에도 여실히 보여 감사했습니다. 학원을 다닐때는 따라치느라 급급했다면 짐코딩님 강의를 들으면서부터는 학습이라는 것을 제대로 하고 있습니다! 앞으로도 좋은 강의들 부탁드립니다^^
2023-12-10
인프런 내 Vue 강의 전부 수강하고 퍼블리셔에서 현재 실무에서 Vue 프론트엔드 개발자로 활동하고 있습니다. 아마 Vue2, Vue3 강의 중에서 실무급에 가장 근접한 강의라 생각합니다. 짐코딩 님의 강의는 처음 수강하게 되었는데, 타 강의자보다 좀 더 친절하게 가르치려고 노력한 흔적이 곳곳에서 보입니다. Quasar가 익히 타 프레임워크보단 괜찮다는 건 들었었는데, 본 강의 다 듣고 저도 사이드 프로젝트로 본 강의의 스택을 중심으로 진행해봐야겠습니다. 아무쪼록 많은 좋은 강의 부탁드립니다.
2023-10-09
대학교 졸업 작품 프로젝트로 웹 페이지를 만들어야 했었는데 뷰를 쓸지 리엑트를 쓸지 고민하다 뷰가 빠르게 개발할수 있다는 얘기를 듣고 막연하게 여기저기 뒤져보다 우연히 유튜브로 알게되어 뷰 기본+실전 편을 모두 수강하여 졸업작품 진행 및 해당 프로젝트로 취업에 성공했지만 아직 뷰에 대하여 모르는 점이 많았는데 이번 강의를 통하여 궁금한 부분 및 공식문서를 확인하며 공부할수 있는 능력을 더 키울수 있을거 같아 만족스럽습니다. 앞으로도 더욱 좋은 강의 기다리겠습니다!
2024-01-18
이번 강의 역시 좋아요!
짐코딩님의 강의를 하나씩 듣기 시작했는데 이번 강의를 들을 때 도움이 많이 되고 실무에서도 유용하게 사용할 수 있을거 같습니다. 강의도 재미있고 딕션도 너무 좋아서 지루하지 않게 들을 수 있습니다.
항상 수고하시고 감사합니다 :-)
2023-10-22
귀한 Vue3 강의올려주셔서 감사합니다 ㅎㅎ vue3 강의가 많이 없는데 그 중 짐코딩님 vue3강의 기본편부터 실전편까지 다 들었어요 ! 다 듣고 아 더 안나오나 할때쯤 이렇게 활용법 강의가 나와서 바로 결제했습니다 ㅋㅋ ! 역시 믿고 듣는 짐코딩 뷰강의 .. 너무 소중해요 이렇게 잘 가르치시는분 찾기 쉽지 않은데 항상 믿고 듣습니다 ! 혹시.. nuxt 강의는 올려주실 생각은 없으신가요 ?ㅎㅎㅎ,,,
2023-10-08
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!
