BEST

Front-end

Vue3パーフェクトマスター：基礎から本番まで - 「本編」

Name: Vue3パーフェクトマスター：基礎から本番まで - 「本編」
Price: 88000 KRW
Rating: 4.9 (171 reviews)

Vue.js 3で本番プロジェクトを開発し、Composition APIの使い方を理解しています。さらに、このコースを受講すると、「Vue Router v4」と「Pinia」、「Boostrap」のスキルを取得できます。

（4.9）受講レビュー 171件

受講生 2,221名

gymcoding

Vue.js

学習した受講者のレビュー

受講後に得られること

Viteでプロジェクトを起動し、環境変数（env）を設定する
Composition APIでプロジェクトを作成する
Composable関数を正しく活用する
Composition API ベースの Vue Router v4
公式ステータス管理ライブラリPinia（Vuex5）

基本編でVue.js 3を簡単に知ったら
今回は実戦編で詳しく、深く学びましょう！ 🎵

ジムコーディングだけの方法で
簡単にお知らせします🥴

このコースはVue.js 3でWebアプリケーション用の作成コースです。
新しく登場したComposition A P Iを基に講義を行います。
公式文書に基づいて知っておくべき内容を抜けずに取り扱いながらも
簡単、詳細、深く内容を扱います。

二つに分かれた
講義を紹介します✌

1️⃣ [Vue.js 3 完璧マスター：基礎から本番まで「基本編」]

2️⃣ [Vue.js 3 完璧マスター：基礎から実戦まで「実戦編」]
現在の講義

初めて講義企画時に一つの講義で制作しようとしたが

公式文書にある必ず習うべきVue.js 3スペックを欠かさず入れてカリキュラムを整理したかった
Vue.js 3 単に文法だけお知らせするよりも、できるだけ慣れるように様々な内容で構成したいと思いました。
Vue 3がComposition APIベースで登場し、コアライブラリまで扱いたかった
すでにVue 3をご存知の方も実戦編の講義内容を合理的に受講できるよう、
二つの講義に分けて製作することになりました。

だから、
実戦編ではよ 💁‍♂️

Vue.js 3で本番掲示板プロジェクトを作成する講義です。最新のトレンディな内容で構成し、講義内容は次のとおりです。

VueRouter v4(Composition APIベース)
Axios HTTP API通信
共通コンポーネントの分離
Vue.js 組み込みコンポーネント
Vite ベースの環境変数の設定(env)
Global Component、Custom directive、共通モジュールなどのプラグインのインストール
Vue.js3花、Composable関数
toRef、toRefs阪急で理解する！
Vue.js公式ステータス管理ライブラリになったPinia！
Vue Router 深化: ナゲーションガード

Bootstrap UI Framework 💻

ボーナスとして、この講義ではBootstrapを使用し、公式文書で目的のコンポーネントを見つけて使用することを直接示しています。このような過程により、自然にブートストラップの使い方をボーナスで得ることができます。

予想される質問 Q&A 💬

Q. Web開発の知識がない状態でWebサービスを作成したいのですが、どうすればいいですか？

この講義は、HTML、CSS、JavaScriptの基礎を知っている状態で受講するのに適した講座です。

HTML/CSS講座Click!
JavaScript コースをクリックClick!
フロントエンドウイングClick!

Q.講義ソースは提供されますか？

レッスンソースはこのレッスンを受講するとダウンロードできます。

Q. Vue.js 2または3を使用していますが、基本編も聞かなければなりませんか？

もし現在Vue.js 3文法をご存知であれば、[本編]をお勧めします。
現在Vue.js 2をお使いの場合は、[基本編]、[本編]の両方をお勧めします。
Vue.jsに初めて触れた方は、ぜひ【基本編】、【本番編】の両方を見ることを強くお勧めします。
他の個人的な違いは、カリキュラムを慎重に見た後に決定すれば良いと思います。 🙂

Q.講座を受講した後はどんなことを得ることができますか？

Vue.js 3だけでなく、Vue Router、Piniaなどのコアライブラリを学ぶことができます。
ボーナスでBootstrapのスキルまでもらえます。

知識共有者を紹介します✒️

YouTubeとInflearnで「Vue&Vuetify Adminサイトを作る」講義を立ち上げ、多くの方々に感謝して良いフィードバックをいただきました😃

[Vuetify Adminサイト作成 - 「基本編」（無料）]総受講生1,313人、評価4.9
[Vuetify Adminサイト作成 - 「実践編」（有料）]総受講生441人、評価5.0

過去2021年からVue.js 3講義を希望された方々がいらっしゃいました！そして私もVuetifyを講義の質問の中で、Vue.jsやNPM、Webpackなどのフロントエンドに関する知識をまだよく知らない方が多いことを感じました。それで講義を撮らなければならないと思うだけで、もうVue.js 3が公式バージョンに位置づけられたようでPPTや教案など最善を尽くして準備しました。
私が運営しているジムコーディングYouTubeチャンネルでは、フロントエンド、バックエンドだけでなく、AWSインフラストラクチャウェブサービスを作成する全体的なコンテンツになる予定です。
多くの注意と愛をお願いします。ありがとうございます。

実用的なコーディングコンテンツを作っていくYouTube のジムコーディングチャンネルです。
YouTube | フェッヘット Gymスターグラム|Codingスターグラム

こんな方に
おすすめです

学習対象は
誰でしょう？

フロントエンド開発者になりたい方
素晴らしいWebアプリケーションを作成したい人
公式文書に基づいて慎重に学びたい人

前提知識、
必要でしょうか？

HTML、CSSの基礎
JavaScriptの基礎
Vue.js 3パーフェクトマスター：基礎から本番まで - "基本編"

こんにちは
です。

26,118

受講生

1,566

受講レビュー

660

回答

4.9

講座評価

講座

안녕하세요.

코딩 교육 크리에이터 짐코딩 입니다 🙂

유튜브에서 코딩 교육 "짐코딩 GYM CODING"채널을 운영하고 있으며,

인프런 교육 플랫폼에서 프로그래밍 지식을 공유하고 있습니다.

제 강의의 특징은 이제 막 시작하시는 분들을 위하여

설명하고자 할 때는 최대한 쉽게,

알려드리고자 할 때는 최대한 알차게 설명드립니다.

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

감사합니다.

📹짐코딩 유튜브 채널 운영 | 구독자 25,000+

💻 짐코딩 클럽 | gymcoding.co

🔗 GitHub: https://github.com/gymcoding

🧑‍💻 인스타그램 @gymcoding

📨 이메일 bruce.lean17@gmail.com

カリキュラム

全体

37件 ∙ (6時間 42分)

講座資料（こうぎしりょう）:

授業資料

セクション 1．講座紹介

4件 ∙ (10分)

セクション 2．実戦プロジェクト構成

2件 ∙ (8分)

5. プロジェクト構成時参考
6. プロジェクト構成 : Vite, ESLint, Prettier
08:24

セクション 3．Vue Router v4.x

6件 ∙ (1時間 28分)

7. Vue Router とは？：プロジェクト適用
15:51
8. Vue Router 学習 : 掲示板 UI 作成
29:36
9. 404 Not Found & ネストされたルートの適用
17:17
10. ページコンポーネントに Props を渡す
16:11
11. History モード : SPA, SSR, CSR
09:09
12. 新規講座ローンチイベント🎉

セクション 4．HTTP API 通信

4件 ∙ (55分)

セクション 5．共通コンポーネント

3件 ∙ (37分)

セクション 6．Vue3 内蔵コンポーネント

3件 ∙ (39分)

セクション 7．再利用性

4件 ∙ (37分)

セクション 8．再利用性 : Composables

3件 ∙ (1時間 0分)

セクション 9．toRef & toRefs

1件 ∙ (16分)

セクション 10．Pinia (Vuex5)

3件 ∙ (22分)

セクション 11．Vue Router 応用

1件 ∙ (14分)

セクション 12．終わりに

3件 ∙ (11分)

講座掲載日:

最終更新日:

受講レビュー

全体

171件

4.9

171件の受講レビュー

혀니혀니
受講レビュー 1
∙
平均評価 5.0
5
100% 受講後に作成
9년차 풀스택 웹개발자 입니다. 이번 프로젝트에서 vue3를 사용하게 되서 책을 사서 공부하다가 너무 내용이 눈에 안들어와 처음으로 온라인 강의를 들어봤는데 너무너무 만족합니다. 기초와 실전을 둘 다 들었는데 기초부터 예제를 이용하여 차근차근 알려주시고 그 후 응용할 수 있는 부분이 생기면 기초 예제에서 이렇게 바꿔서 이렇게도 사용할 수 있다 라고 알려주시니 이해도 잘 되고 실무 팁도 많이 얻어갔습니다. 퍼블업무와 개발업무가 완벽히 분리된 프로젝트를 많이 하여서 사실 부트스트랩을 어떻게 써야하는지 모르고 살았는데 부트스트랩을 이용할 수 있는 방법도 알려주시니 더더욱 좋았습니다. vue3 공부하시려는 분들 무조건 추천 합니다.
- 짐코딩
  知識共有者
  와우~!🤭 완강 하시느라 수고많으셨습니다~!! 감사합니다!!! 😀 🎉
jj4783
受講レビュー 6
∙
平均評価 4.8
5
97% 受講後に作成
라이브러리나 프레임워크를 공부하려고 공식문서를 보면 막막하거나, 영어 => 한글로 번역된 번역체로 그 의미를 단번에 이해하기 힘든 경우가 많은데 이 강의를 통해 뷰 공식문서상에 나오는 기본적인 것과 약간의 심화적인 부분을 다 알 수 있어서 좋습니다. 꼼꼼한게 이 강의의 장점인 것 같습니다. 공식문서상의 내용을 훑고 싶다면 추천드립니다:))
- 짐코딩
  知識共有者
  와우~! 감사합니다~!! 🙂 수고하셨어요! 🎉
wonjinYi
受講レビュー 9
∙
平均評価 5.0
5
100% 受講後に作成
놓치기 쉬운 것들을 알려주고, 어떤 개념이 왜 존재하는지를 제시하며 코드를 개선하는 과정을 보여주는 좋은 수업입니다. vue3에 입문하기 위한 길을 찾는다면 이 강의가 최고의 선택입니다. 스펙 그 자체만을 소개하는식의, 호흡이 빠른 구성은 아닙니다. 간단한 게시판을 구현하며 Vue의 기능들을 알아가는 수업입니다. 그래서 선생님의 사고방식을 배우며 구현하는데 들이는 시간도 꽤 있습니다.
- 짐코딩
  知識共有者
  와우~! 좋은 말씀감사합니다 🙂 수고하셨어요! 🎉
jo gabi
受講レビュー 2
∙
平均評価 5.0
5
97% 受講後に作成
실무 프로젝트에서 Vue3 쓰게 되어서 기초,실전을 급하게 모두 듣고 작업을 하고 있습니다. 정말 잘 들었습니다 . 도움이 많이 되었어요 확실히 실무도 같이 하다보니 이해가 잘 되고 더 재미있네요. 즐겁게 개발 하고 있어요 ㅎㅎㅎ 이제 퀘이사 구입해서 학습할 예정입니다. 잘 부탁드립니다!!!
- 짐코딩
  知識共有者
  감사합니다~!! 🙂 🎉
mju6013
受講レビュー 2
∙
平均評価 5.0
5
100% 受講後に作成
기본편에 이어 실전편까지 수강완료 했습니다! 강의를 들으면 들을수록 준비를 많이 하셨다는게 느껴지는 것 같아요 : ) 핵심 내용 위주로 구성된 강의라 Vue3의 전체적인 내용을 이해하기 좋았고 디테일한 부분들들은 실무에서 개발하면서 찾아봐도 무리가 없을 것 같네용 짐코딩님 강의 스타일이 너무 좋아서 프론트 관련 다른 강의들도 찾아 들어야겠어요ㅋㅋㅋ
- 짐코딩
  知識共有者
  맞아요!! 디테일한 부분은 다시 찾아보시면 돼요!! 저도 그래요 ㅎㅎ 감사합니다~!! 😀

￥10,905

gymcodingの他の講座

知識共有者の他の講座を見てみましょう！

클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지 (with 커서 AI)

짐코딩

탐색 → 계획 → 구현 → 커밋. 검증된 AI 개발 워크플로우를 클로드 코드로 마스터하세요. MCP, 서브에이전트, 프롬프트 엔지니어링까지 23개 미션으로 익히고, 3개 실전 프로젝트를 완성합니다.

입문

React, Next.js, cursor

클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지 (with 커서 AI)

짐코딩

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

짐코딩

React를 처음 배우시나요? 이 강의로 하나로 리액트 기초를 다지고, 린캔버스 프로젝트를 통해 실무 경험을 쌓아보세요. 그러면 자신있게 프론트엔드 개발자로 취업할 수 있어요!

초급

React, react-query, react-router

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

짐코딩

Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"

짐코딩

Vue.js 3로 웹 개발을 할 수 있도록 공식문서를 기반으로 하여 Vue 3 스펙을 자세하고 깊이있게 다룹니다.

초급

Vue.js

Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"

짐코딩

TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!

짐코딩

한 강의로 끝내는 TailwindCSS 입문부터 실전까지! 두 개의 프로젝트와 함께 레이아웃 구성부터 반응형 디자인! 다크모드! 까지 완벽하게 배워보세요.

초급

HTML/CSS, TailwindCSS, JavaScript

TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!

짐코딩

Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)

짐코딩

최신 Next.js v15 App Router를 학습하며 노션 기반의 실용적인 개발자 블로그를 함께 구축하는 강의입니다. 추가로 커서 AI 활용법 등 다양한 인사이트도 얻을 수 있습니다.

초급

React, 블로그, Next.js

Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)

짐코딩

포트폴리오 사이트 만들고 배포까지! : 웹 개발 입문 활용편

짐코딩

HTML&CSS, 자바스크립트를 배웠다면 이를 활용하여 직접 포트폴리오 사이트를 만들고 배포해 보세요. 실제로 써 보는 것은 우리의 실력을 향상시키는 데 큰 도움이 될 것입니다.

입문

HTML/CSS, JavaScript, github-pages

포트폴리오 사이트 만들고 배포까지! : 웹 개발 입문 활용편

짐코딩

최신 Vue 3 완벽 가이드: 프로젝트 설정 & 스펙 총정리

짐코딩

"Vue 3 완벽 마스터" 후속 강의로 최신 Vue 3 버전의 프로젝트 설정과 최신 스펙을 익히는 강의입니다. Vue 기본편 또는 실전편을 수강하신 분들에게 무료로 제공되는 강의입니다.

초급

Vue.js, Vue 3, TailwindCSS

최신 Vue 3 완벽 가이드: 프로젝트 설정 & 스펙 총정리

짐코딩

입문자를 위한, ES6+ 최신 자바스크립트 입문

짐코딩

주변에서 코딩을 처음 시작하시는 분들을 많이 봤어요. 경력자 분들은 자바스크립트가 쉽다고 하지만 처음 접하시는 분들은 어렵게 느낄 수 밖에 없습니다. 그래서 이번 강의는 코딩에 입문하시는 왕초보 분들을 위해 쉽고! 알찬! 내용을 준비했습니다. 💪🙂

초급

JavaScript, ES6

입문자를 위한, ES6+ 최신 자바스크립트 입문

짐코딩

비동기 프로그래밍: Promise, async/await 끝장내기

짐코딩

이 강의는 자바스크립트 비동기 프로그래밍에서 Promise와 async/await의 개념과 작동 원리를 명확히 설명하며, 실무에서 비동기 처리를 능숙하게 다룰 수 있도록 돕습니다.

초급

promise, async-await, asynchronous-programming

비동기 프로그래밍: Promise, async/await 끝장내기

짐코딩

Vuetify Admin Template 만들기 - 기본편 (Based Vue2)

짐코딩

Vuetify 기초를 학습하고, 멋진 Material Design Admin 웹 사이트를 만들 수 있습니다 😃

초급

Vue.js, Vuetify

Vuetify Admin Template 만들기 - 기본편 (Based Vue2)

짐코딩

프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식

짐코딩

이 강의를 통해 Webpack, NPM 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다.

초급

Webpack

프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식

짐코딩

입문자를 위한, HTML&CSS 웹 개발 입문

짐코딩

HTML과 CSS를 배워서 웹사이트 제작에 필요한 기본 지식을 배울 수 있습니다. 코딩을 처음 접할 때 두려움이 없도록 정말 알기 쉽게 설명한 강의입니다.

입문

HTML/CSS

입문자를 위한, HTML&CSS 웹 개발 입문

짐코딩

[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터

짐코딩

Vue 기반으로 성능이 뛰어난 웹을 빠르게 만들 수 있도록 도와주는 Nuxt 프레임워크 강의입니다. 현업에서 Vue를 사용하고 계신 분들이라면 꼭 보셔야하는 강의라고 자신있게 말씀드릴 수 있을 거 같아요~!

중급이상

Vue.js, Nuxt.js, pinia

[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터

짐코딩

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

짐코딩

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

중급이상

Vue.js, Firebase, Quasar

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

짐코딩

퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)

짐코딩

Vue.js로 웹 개발을 하며 퀘이사(Quasar)를 이용하고 싶은 분들을 위한 강의입니다. 사내에서 프론트 웹을 빠르게 구축해야 하는 분 또는 나만의 멋진 UI를 만들어야 하는 분이신가요? 이 강의를 통해서 쉽고, 빠르게 프론트 웹을 만들 수 있습니다.

초급

Quasar, Vue.js

퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)

짐코딩

Vuetify Admin Template 만들기 - 실전편 (Based Vue2)

짐코딩

Vue&Vuetify로 실무에서 개발하시는 분들을 위한 유용한 팁! 😃

초급

Vue.js, Vuetify

Vuetify Admin Template 만들기 - 실전편 (Based Vue2)

짐코딩

似ている講座

同じ分野の他の講座を見てみましょう！

Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"

짐코딩

Vue.js 3로 웹 개발을 할 수 있도록 공식문서를 기반으로 하여 Vue 3 스펙을 자세하고 깊이있게 다룹니다.

초급

Vue.js

Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"

짐코딩

퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)

짐코딩

초급

Quasar, Vue.js

퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)

짐코딩

최신 Vue 3 완벽 가이드: 프로젝트 설정 & 스펙 총정리

짐코딩

초급

Vue.js, Vue 3, TailwindCSS

최신 Vue 3 완벽 가이드: 프로젝트 설정 & 스펙 총정리

짐코딩

Vue3와 Supabase로 구인구직 사이트 만들기

Michael Kwon

나만의 풀스택 애플리케이션 개발에서 프로그래시브 웹앱(PWA)까지!

초급

Vue.js, PWA, supabase

Vue3와 Supabase로 구인구직 사이트 만들기

Michael Kwon

Vue-Django-Bootstrap 뚝딱 블로그

김석훈

인기 3총사 (Vue + Django + Bootstrap) 를 활용하여, 쉬우면서도 멋진 나의 블로그를 만들 수 있습니다. 반응형은 기본, 스마트폰으로도 볼 수 있습니다.

초급

Vue.js, Django, Bootstrap

Vue-Django-Bootstrap 뚝딱 블로그

김석훈

카카오,구글 SNS 로그인(springboot3, vue3)

bradkim

springboot를 활용하여 카카오, 구글로그인을 구현합니다. jwt토큰 기반 로그인이 구현됩니다. vue3를 통해 간단한 화면을 구성합니다.

초급

OAuth, oauth2, JWT

카카오,구글 SNS 로그인(springboot3, vue3)

bradkim

Vue.js - Django 연동 웹 프로그래밍

김석훈

Vue.js 와 Django 프레임워크를 사용하여, 웹 프로그래밍을 할 수 있다.

초급

Django, Vue.js

Vue.js - Django 연동 웹 프로그래밍

김석훈

Vue js와 UI를 한번에 학습/Nuxt3 + OpenWeatherMap 으로 실시간 날씨 앱 제작

임종태

Nuxt UI, Nuxt SEO, Nuxt Server Api, Pinia, PWA, Firebase, Email Login, Google Login를 쉽게 배울수 있어요~~

초급

Vue.js, PWA, Firebase

Vue js와 UI를 한번에 학습/Nuxt3 + OpenWeatherMap 으로 실시간 날씨 앱 제작

임종태

기획자님 이 정도 웹 개발은 배워보면 어떨까요? [이론+실습]

개복치개발자

바쁜 기획자 분들을 위한 빠르게 진행되는 개발 강의입니다. 군더더기 없는 설명으로 웹 프론트엔드, 백엔드, DB를 직접 개발해보며 전체적인 개발 프로세스를 알아볼 수 있습니다.

입문

HTML/CSS, JavaScript, Vue.js

기획자님 이 정도 웹 개발은 배워보면 어떨까요? [이론+실습]

개복치개발자

호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)

호돌맨

단순히 애플리케이션 하나를 만드는데 끝나지 않습니다. Spring Boot를 활용한 백엔드부터 Vue.js 모던 프론트엔드 스택을 연동한 서비스 완성 A-Z를 보여드립니다.

중급이상

Spring Boot, JPA, AWS

호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)

호돌맨

Vue3パーフェクトマスター：基礎から本番まで - 「本編」

学習した受講者のレビュー

受講後に得られること

最新Vue 3パーフェクトガイドローンチ🎤

ジムコーディングだけの方法で簡単にお知らせします🥴

二つに分かれた講義を紹介します✌

だから、実戦編ではよ 💁‍♂️

Bootstrap UI Framework 💻

予想される質問 Q&A 💬

知識共有者を紹介します✒️

こんな方に おすすめです

こんにちは .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}です。

カリキュラム

受講レビュー

gymcodingの他の講座

似ている講座

ジムコーディングだけの方法で
簡単にお知らせします🥴

二つに分かれた
講義を紹介します✌

だから、
実戦編ではよ 💁‍♂️

こんな方に
おすすめです

こんにちは
です。