Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
BEST
개발 · 프로그래밍

/

프론트엔드

Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)

Vue3 & Firebase(v10)를 활용하여 커뮤니티를 만드는 강의로 Vue3 실전 활용법, Firebase 기초부터 실전, 최신 웹 기술 활용법, 지식공유자 경험 공유 등 다양한 방면으로 개발자로써 한 단계 성장할 수 있도록 돕습니다!

(5.0) 수강평 46개

수강생 288명

  • 짐코딩
실습 중심
vue
quasar
vue.js
풀스택
firebase
Vue.jsFirebaseQuasarVue 3algolia

먼저 경험한 수강생들의 후기

이런 걸 배울 수 있어요

  • 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 기초부터 실전까지 한 번에 내 것으로 만들 수 있는 강의입니다.

프론트엔드 웹을 개발할 때 에디터, 무한 스크롤링, 검색 기능, 디버깅 등 다양한 지식이 필요한데요. 해당 강의에서는 실무 경험에서 알 수 있는 다양한 웹 기술까지 습득하여 개발자로서 한 단계 성장할 수 있는 강의입니다.


실전은 언제나 중요하니까 💻

사실 이번 강의는 제가 이전에 론칭한 "Vue3 완벽 마스터 (기본편/실전편)" 이전부터 기획했던 강의입니다. 왜냐하면 어떤 기술을 익힐 때 배우는 것도 중요하지만 배운 기술을 활용해서 무언가 만들어 보는 것 또한 정말 중요하기 때문이죠.

우리가 운전 면허를 취득하고 자동차를 몰아보면 생각보다 쉽지 않을 거예요. 실제로 운전할 때는 운전을 배울 때 없었던 다양한 어려움이 있기 때문인데요.

웹 개발도 마찬가지입니다. Vue.js라는 기술을 배우고 무언가를 만들어 보지 않는다면 성장은 더딜 거예요. 그리고 Vue3를 배우고 실제 무언가를 만들려고 해도 쉽지 않을 겁니다. 실제로 웹을 개발할 때는 핵심이 되는 기술도 중요하지만, 그 주변 프론트엔드 생태계 기술이나 경험에서 알 수 있는 스킬 같은 것들도 굉장히 중요하거든요. 실제 웹 애플리케이션을 만들려고 해보신 분들은 많이 공감하실 거예요.

"막상 사이트를 제작하려고 하면 어려움이 있더라고요..."

그래서 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

안녕하세요
입니다.

24,551

수강생

1,353

수강평

629

답변

4.9

강의 평점

17

강의

안녕하세요.
코딩 교육 크리에이터 짐코딩 입니다 🙂

유튜브에서 코딩 교육 "짐코딩 GYM CODING"채널을 운영하고 있으며,
인프런 교육 플랫폼에서 프로그래밍 지식을 공유하고 있습니다.

제 강의의 특징은 이제 막 시작하시는 분들을 위하여
설명하고자 할 때는 최대한 쉽게,
알려드리고자 할 때는 최대한 알차게 설명드립니다.

항상 수강생 입장에서 생각하는 코딩 교육 크리에이터가 되겠습니다.
감사합니다.

📨 이메일 bruce.lean17@gmail.com
🏋️‍♀️ 헬스타그램 @helinlee.gram
🧑‍💻 코딩스타그램 @gymcoding

커리큘럼

전체

68개 ∙ (16시간 38분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

46개

5.0

46개의 수강평

  • dmb050087997님의 프로필 이미지
    dmb050087997

    수강평 4

    평균 평점 5.0

    5

    11% 수강 후 작성

    Tôi phải tạo một trang web cho dự án tốt nghiệp đại học của mình. Tôi đang phân vân không biết nên sử dụng View hay React. Tôi nghe nói rằng View có thể được phát triển nhanh chóng nên tôi đã tìm hiểu một cách mơ hồ và tìm hiểu về nó trên YouTube. Xem + Phần thực hành và tạo đồ án tốt nghiệp của mình. Mặc dù tôi đã thành công trong việc tiến bộ và kiếm được việc làm thông qua dự án, nhưng vẫn còn nhiều điều tôi chưa biết về View. Tôi rất hài lòng rằng mình sẽ có thể cải thiện kỹ năng học tập của mình. kiểm tra các câu hỏi và tài liệu chính thức thông qua bài giảng này. Chúng tôi mong muốn có nhiều bài giảng tuyệt vời hơn trong tương lai!

    • gymcoding
      지식공유자

      Khi mới bắt đầu lập trình, tôi cũng gặp rất nhiều khó khăn khi tự học! Tuy nhiên, sau khi tìm thấy một mô hình mà tôi có thể tự học, tôi nghĩ rằng tôi đã có được sự tự tin khi học bất kỳ công nghệ nào trong tương lai! Thông qua bài giảng này, tôi muốn mang đến cho học sinh khả năng học hỏi không chỉ về mặt kỹ thuật mà còn cả khả năng tự học! Tôi rất cảm động vì bạn đã nhận ra khía cạnh này và hài lòng. Cảm ơn bạn 💪

  • leehyesu955241님의 프로필 이미지
    leehyesu955241

    수강평 3

    평균 평점 5.0

    5

    24% 수강 후 작성

    Thực sự... nói một cách dễ hiểu, đó là Chúa Jim. Tôi là kiểu người phải đi qua những phần khó hiểu, nhưng điều tôi thích nhất là sự chân thành khi họ giải thích đi giải thích lại mọi thứ, cũng như việc họ cho phép tôi không chỉ nhìn vào. nội dung chính nhưng cũng có những chi tiết nhỏ mà tôi có thể không biết, điều này càng mở rộng thêm kiến ​​thức của tôi. Tôi đã nghĩ về điều đó từ những bài giảng trước, nhưng tôi rất biết ơn khi thấy lại lần này rằng họ đang nỗ lực cung cấp thông tin từ quan điểm của người mới bắt đầu đến quan điểm của một chuyên gia. Khi đến học viện, tôi bận cố gắng theo kịp, nhưng từ khi nghe bài giảng của Jim Coding, tôi đã học tập đàng hoàng! Mong thầy tiếp tục có những bài giảng hay ^^

    • gymcoding
      지식공유자

      Mình nghĩ đây là khóa học mình đã chuẩn bị tâm huyết và công sức hơn rất nhiều so với các bài giảng khác 🥹 Như tôi đã nói, nghĩ đến mỗi học sinh. Từ quan điểm của người mới bắt đầu, nó thực sự dễ dàng và có thể lặp lại. Ngoài ra, nội dung sâu sắc và nhiều thông tin nên có thể giúp ích rất nhiều cho những người trong lĩnh vực này! Tôi rất cảm động bạn biết đấy 🙏 Cảm ơn bạn~!! 🙂

  • hiperbono4518님의 프로필 이미지
    hiperbono4518

    수강평 1

    평균 평점 5.0

    5

    52% 수강 후 작성

    Tôi cũng thích bài giảng này! Tôi bắt đầu nghe từng bài giảng của Jim Coding và tôi nghĩ bài giảng này cũng sẽ rất hữu ích và hữu ích trong thực tế. Các bài giảng rất thú vị và cách diễn đạt hay đến mức bạn có thể nghe mà không thấy chán. Cảm ơn bạn đã làm việc chăm chỉ như mọi khi :-)

    • gymcoding
      지식공유자

      Ôi~! Cảm ơn bạn đã để lại đánh giá chân thành về khóa học 🙂💪

  • gichulroh6344님의 프로필 이미지
    gichulroh6344

    수강평 14

    평균 평점 4.7

    5

    52% 수강 후 작성

    Tôi đã tham gia tất cả các khóa học Vue của Infron và hiện đang làm nhà phát triển giao diện người dùng Vue tại một nhà xuất bản. Tôi nghĩ đây có lẽ là bài giảng gần với thực tế nhất trong số các bài giảng về Vue2 và Vue3. Đây là lần đầu tiên tôi nghe bài giảng của Jim Coding và tôi có thể thấy dấu vết của nỗ lực giảng dạy tận tình hơn các giảng viên khác của anh ấy. Tôi nghe nói Quasar tốt hơn các framework khác, nhưng sau khi kết thúc bài giảng này, tôi sẽ cố gắng làm việc với bài giảng như một dự án phụ. Chúc bạn có nhiều bài giảng hay.

    • gymcoding
      지식공유자

      Dễ dàng và thuận tiện cho những người bắt đầu phát triển web Tôi đang cố gắng tổ chức nó một cách có ý nghĩa cho những người trong lĩnh vực này. Đó là bài giảng mà tôi đã nỗ lực rất nhiều và tôi rất cảm động khi bạn nhận ra nó 😭 Cảm ơn bạn đã nỗ lực kiên trì! Cảm ơn bạn 💪

  • e12402508님의 프로필 이미지
    e12402508

    수강평 4

    평균 평점 5.0

    5

    20% 수강 후 작성

    Cảm ơn bạn đã đăng bài giảng Vue3 quý giá. Không có nhiều bài giảng Vue3 nhưng tôi đã nghe bài giảng Vue3 của Jim Coding từ phần cơ bản đến phần thực hành! Sau khi nghe hết, đúng lúc tôi đang băn khoăn không biết còn gì nữa thì một bài giảng về cách sử dụng hiện ra và tôi đã trả tiền ngay lập tức haha! Đúng như dự đoán, tôi tin tưởng và lắng nghe bài giảng của Jim Coding View... Thật quý giá khi tìm được người dạy giỏi môn này nhưng tôi luôn tin tưởng và lắng nghe! Bạn có kế hoạch tải lên một bài giảng bổ sung không? Hahaha,,,

    • gymcoding
      지식공유자

      Cảm ơn bạn đã xem xét bài giảng của tôi!!😃 Mình sẽ cố gắng chuẩn bị bài giảng Nuxt trong thời gian sớm nhất! 💪 Cảm ơn bạn 🙂

월 ₩692,494

5개월 할부 시

₩165,000

짐코딩님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

비슷한 강의

같은 분야의 다른 강의를 만나보세요!