채널톡 아이콘
BEST
개발 · 프로그래밍

/

프론트엔드

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

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

(4.9) 수강평 216개

수강생 2,500명

Vue.js
Thumbnail

초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

이런 걸 배울 수 있어요

  • Vue3 Composition APIs

  • Vue3 컴포넌트 기초부터 심화까지!

  • Vite로 프로젝트 시작하기

  • <script setup> 문법과 일반 <script> 차이

  • 영문 공식문서 기반으로 기초부터 깊게 다룹니다.

먼저 기본편으로 Vue.js 3를 쉽게 알아보고,
실전편으로 자세히, 깊게 배워봐요! 🎵

최신 Vue 3 완벽 가이드 론칭 🎤

Vue3 완벽 마스터: 기본편 또는 실전편 둘 중 하나라도 수강하셨다면
"최신 Vue 3 완벽 가이드" 강의를 무료로 볼 수 있습니다.




짐코딩만의 방식으로
쉽게 알려드립니다 🥴

본 강좌는 Vue.js 3로 웹 애플리케이션을 위한 만들기 강좌로,
새롭게 등장한 Composition API를 기반으로 강의를 진행합니다.
공식문서를 기반으로 알아야하는 내용을 빠짐없이 다루면서도
쉽고, 자세하고, 깊게 내용을 다룹니다.


두 편으로 나누어진
강의를 소개해요 ✌

처음 강의 기획 시 하나의 강의로 제작하려 했으나

  • 공식문서에 있는 꼭 익혀야 할 Vue.js 3 스펙을 빠짐없이 넣어 커리큘럼을 구성하고 싶었고
  • Vue.js 3을 단순히 문법만 알려드리는 것보다 최대한 익숙해지도록 다양한 내용으로 구성하고 싶었습니다.
  • Vue 3이 Composition API 기반으로 등장하면서 핵심 라이브러리까지 다루고 싶었고
  • 이미 Vue 3를 알고 계신 분들도 실전편의 강의 내용을 합리적으로 수강할 수 있도록,
    두 개의 강의로 나누어 제작하게 되었습니다.

그래서,
기본편에서는요 💁‍♂️




Vue.js 3를 처음 접하시는 분들을 위하여 공식문서를 기반으로 Vue.js 3 최신 문법을 학습하는데 집중하였습니다. 그리고 대략적인 강의내용은 다음과 같습니다.

  • HTML, CSS, JavaScript가 컴포넌트 기반 Vue.js 웹 앱으로 변화하는 과정
  • Options API VS Composition API 차이
  • Vite로 프로젝트 시작하기
  • ESLint Prettier 설정
  • 공식 문서 최신 스펙을 반영한 Composition API 문법
  • Vue.js 3 컴포넌트 기초부터 심화
  • <script setup>과 일반 <script> 차이


Bootstrap UI Framework 💻


보너스로 본 강의에서는 Bootstrap을 사용하며 공식문서에서 원하는 컴포넌트를 찾아 사용하는 것을 직접 보여드립니다. 이러한 과정을 통해 자연스럽게 부트스트랩 사용법을 보너스로 얻어가실 수 있어요 :)

예상 질문 Q&A 💬

Q. 웹 개발 지식이 없는 상태에서 웹 서비스를 만들고 싶은데 어떻게 해야 할까요?

이 강의는 HTML, CSS, JavaScript 기초를 알고 있는 상태에서 수강하기에 적합한 강좌입니다. 

  • HTML / CSS 강좌 Click!
  • JavaScript 강좌 클릭 Click!
  • 프론트엔드 날개달기 Click!

Q. 강의소스가 제공되나요?

강의소스는 본 강의를 수강하시면 다운로드 받을 수 있으며, 기본편 소스는 Github에서도 제공됩니다.

Q. Vue.js 2 혹은 3을 사용하고 있는데, 기본편도 들어야할까요?

  • 만약 현재 Vue.js 3 문법을 알고 계신다면 [실전편]을 권장드립니다.
  • 만약 현재 Vue.js 2를 사용하고 계신다면 [기본편], [실전편] 모두 권장드립니다.
  • Vue.js를 처음 접하신다면 꼭 [기본편], [실전편] 모두 보는것을 강력 추천드립니다.
  • 기타 개인적인 차이는 커리큘럼을 꼼꼼히 보신 후 결정하시면 될 것 같아요. 🙂

Q. 강좌를 수강한 후에는 어떤 것을 얻어갈 수 있을까요?

Vue.js 3뿐만 아니라, Vue Router, Pinia와 같은 핵심 라이브러리를 배울 수 있습니다.
보너스로 Bootstrap에 대한 스킬까지 가져가실 수 있습니다.


지식공유자를 소개합니다 ✒️

유튜브와 인프런에서 "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와 교안 등 최선을 다해 준비했습니다.
제가 운영하고 있는 짐코딩 유튜브 채널에서는 프론트엔드, 백엔드뿐만 아니라 AWS 인프라 웹 서비스를 만들기 전반적인 콘텐츠로 다가올 예정입니다.
많은 관심과 사랑 부탁드립니다. 감사합니다.

실용적인 코딩컨텐츠를 만들어 가는 유튜브 짐코딩 채널입니다.
유튜브 | 깃헙 | Gym스타그램 | Coding스타그램

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 프론트엔드 개발자가 되려고 하시는 분

  • 멋진 웹 애플리케이션을 만들고 싶으신 분

  • 공식문서 기반으로 꼼꼼히 배우고 싶으신 분

선수 지식,
필요할까요?

  • HTML, CSS 기초

  • JavaScript 기초

  • 짐코딩 프론트엔드 날개달기

안녕하세요
짐코딩입니다.

20,966

명

수강생

953

개

수강평

533

개

답변

4.9

점

강의 평점

15

개

강의

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

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

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

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

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

더보기

커리큘럼

전체

37개 ∙ (7시간 48분)

해당 강의에서 제공:

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

수강평

전체

216개

4.9

216개의 수강평

  • design

    ∙

    수강평 1

    ∙

    평균 평점 5.0

    5

    100% 수강 후 작성

    1.5배로 들어도 레퍼못지 않은 알찬내용과 정확한 발음으로 굉장히 알아듣기 쉽게 설명하는게 좋았습니다. 많은 도움 되었습니다

    • 짐코딩
      지식공유자

      1.5배 좋아요!ㅎㅎ 와우 레퍼ㅋ 감사합니다~!! 🙂

  • bestksw

    ∙

    수강평 2

    ∙

    평균 평점 5.0

    5

    100% 수강 후 작성

    강의들 중에 가장 깊이가 있고 이를 쉽게 잘 전달하는 능력을 가지신 짐코딩님 감사합니다.

    • 짐코딩
      지식공유자

      와우~!! 수고하셨습니다 ㅎ 🎉 감사합니다~!! 🙂

  • kimjuno97

    ∙

    수강평 6

    ∙

    평균 평점 5.0

    5

    100% 수강 후 작성

    npm trends에서 11월~12월 사이에 vue 다운로드 수가 리액트의 3배정도 뛰어넘었던데, 해당강의는vue3 입문에 정말 많은 도움이 되는 거 같습니다,!,

    • 짐코딩
      지식공유자

      와우~! 감사합니다~!! 🙂 🎉

  • 박상우

    ∙

    수강평 5

    ∙

    평균 평점 5.0

    5

    100% 수강 후 작성

    기존에 리액트로 1년간 프로젝트를 진행했고 최근 이직하면서 Vue를 사용하게되어 강의를 듣게 되었습니다. 이전에 들었던 강의들도 좋았지만, 해당 강의를 들으면서 내용이 참 알차고 필요한 부분만 잘 담았다고 생각했습니다. 제가 들었던 강의중에 가장 좋았던 것 같아요

    • 짐코딩
      지식공유자

      완강 축하드려요! 🎉 도움이 되었다니 다행이에요! 감사합니다~!! 🙂

  • mju6013

    ∙

    수강평 2

    ∙

    평균 평점 5.0

    5

    100% 수강 후 작성

    실무에서 갑작스럽게 Vue3를 사용하게 되었는데, 짧은 강의 시간으로 많은 것을 얻어가는 것 같습니다. Vue2에 대한 지식이 없는 분들도 쉽게 이해할 수 있는 수준으로 진행해 주신 것 같고 강사님 딕션이 좋으셔서 집중이 잘 되는 것 같아요 : ) 실전편과 Vuetify 관련 강의들도 들을 예정입니다!

    • 짐코딩
      지식공유자

      감사합니다~!! 🙂

짐코딩님의 다른 강의

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

Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"강의 썸네일

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

짐코딩

₩88,000

초급 / Vue.js

4.9

(124)

1,900+

Vue.js 3로 실전 프로젝트를 개발하며 Composition API의 사용법을 숙지합니다. 뿐만 아니라 본 강좌를 수강하면 "Vue Router v4"와 "Pinia", "Boostrap"에 대한 기술을 가져가실 수 있습니다.

초급

초급

Vue.js

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

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

짐코딩

₩99,000

초급 / React, react-query, react-router, React Context, TailwindCSS

5.0

(37)

300+

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

초급

초급

React, react-query, react-router

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

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

짐코딩

₩88,000

입문 / HTML/CSS, JavaScript, github-pages, 포트폴리오

5.0

(14)

100+

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

입문

입문

HTML/CSS, JavaScript, github-pages

TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!강의 썸네일

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

짐코딩

₩44,000

초급 / HTML/CSS, TailwindCSS, JavaScript, 반응형 웹

4.9

(20)

200+

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

초급

초급

HTML/CSS, TailwindCSS, JavaScript

입문자를 위한, ES6+ 최신 자바스크립트 입문강의 썸네일

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

짐코딩

₩33,000

초급 / JavaScript, ES6

4.9

(13)

200+

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

초급

초급

JavaScript, ES6

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

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

짐코딩

₩165,000

중급이상 / Vue.js, Nuxt.js, pinia, Vue 3

5.0

(51)

400+

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

중급이상

중급이상

Vue.js, Nuxt.js, pinia

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

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

짐코딩

₩165,000

중급이상 / Vue.js, Firebase, Quasar, Vue 3, algolia

5.0

(44)

200+

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

중급이상

중급이상

Vue.js, Firebase, Quasar

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

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

짐코딩

₩22,000

초급 / Vue.js, Vue 3, TailwindCSS, ESLint

5.0

(5)

200+

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

초급

초급

Vue.js, Vue 3, TailwindCSS

Vuetify Admin Template 만들기 - 기본편 (Based Vue2)강의 썸네일

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

짐코딩

무료

초급 / Vue.js, Vuetify

4.9

(71)

2,100+

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

초급

초급

Vue.js, Vuetify

입문자를 위한, HTML&CSS 웹 개발 입문강의 썸네일

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

짐코딩

무료

입문 / HTML/CSS

5.0

(67)

4,100+

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

입문

입문

HTML/CSS

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

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

짐코딩

무료

초급 / Webpack

4.9

(215)

6,400+

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

초급

초급

Webpack

비동기 프로그래밍: Promise, async/await 끝장내기강의 썸네일

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

짐코딩

무료

초급 / promise, async-await, asynchronous-programming, JavaScript

5.0

(22)

900+

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

초급

초급

promise, async-await, asynchronous-programming

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

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

짐코딩

₩88,000

초급 / Quasar, Vue.js

5.0

(34)

400+

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

초급

초급

Quasar, Vue.js

Vuetify Admin Template 만들기 - 실전편 (Based Vue2)강의 썸네일

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

짐코딩

₩55,000

초급 / Vue.js, Vuetify

5.0

(20)

400+

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

초급

초급

Vue.js, Vuetify

비슷한 강의

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

Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"강의 썸네일

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

짐코딩

₩88,000

초급 / Vue.js

4.9

(124)

1,900+

Vue.js 3로 실전 프로젝트를 개발하며 Composition API의 사용법을 숙지합니다. 뿐만 아니라 본 강좌를 수강하면 "Vue Router v4"와 "Pinia", "Boostrap"에 대한 기술을 가져가실 수 있습니다.

초급

초급

Vue.js

Vue.js 시작하기 - Age of Vue.js강의 썸네일

Vue.js 시작하기 - Age of Vue.js

장기효(캡틴판교)

₩44,000

초급 / JavaScript, Vue.js

4.9

(1,436)

9,000+

Vue.js로 쉽게 웹 개발할 수 있도록 기본 개념과 핵심 기능에 대해서 학습하고 구현해봅니다. 강좌를 들으시고 나면 Vue.js로 프런트엔드 개발을 하시는게 재밌어질거에요.

초급

초급

JavaScript, Vue.js

Vue-Django-Bootstrap 뚝딱 블로그강의 썸네일

Vue-Django-Bootstrap 뚝딱 블로그

김석훈

₩33,000

초급 / Vue.js, Django, Bootstrap

4.8

(12)

200+

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

초급

초급

Vue.js, Django, Bootstrap

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

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

짐코딩

₩22,000

초급 / Vue.js, Vue 3, TailwindCSS, ESLint

5.0

(5)

200+

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

초급

초급

Vue.js, Vue 3, TailwindCSS

Vue3와 Supabase로 구인구직 사이트 만들기강의 썸네일

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

Michael Kwon

₩49,500

초급 / Vue.js, supabase, Vue 3, PWA

5.0

(1)

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

초급

초급

Vue.js, supabase, Vue 3

Vue.js - Django 연동 웹 프로그래밍강의 썸네일

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

김석훈

₩33,000

초급 / Vue.js, Django

4.6

(68)

600+

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

초급

초급

Vue.js, Django

카카오,구글 SNS 로그인(springboot3, vue3)강의 썸네일

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

brad_kim

₩55,000

30%

₩38,500

초급 / OAuth, oauth2, JWT, Spring Boot, Vue.js

New
New

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

초급

초급

OAuth, oauth2, JWT

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

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

호돌맨

₩86,900

중급이상 / Spring Boot, JPA, AWS, Vue.js, Spring Security

4.9

(109)

2,000+

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

중급이상

중급이상

Spring Boot, JPA, AWS

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

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

개복치개발자

₩55,000

입문 / HTML/CSS, JavaScript, Vue.js, Node.js, 소프트스킬, MongoDB

5.0

(5)

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

입문

입문

HTML/CSS, JavaScript, Vue.js

연관 로드맵

강의가 포함된 로드맵으로 학습해 보세요!

[짐코딩] Vue 3 완벽 마스터 : 기초부터 실전까지 (기본편 + 실전편) 로드맵 썸네일

[짐코딩] Vue 3 완벽 마스터 : 기초부터 실전까지 (기본편 + 실전편)

짐코딩

[짐코딩] 웹 개발 입문부터 최신 Vue 3 프론트엔드 실전까지 풀코스! 로드맵 썸네일

[짐코딩] 웹 개발 입문부터 최신 Vue 3 프론트엔드 실전까지 풀코스!

짐코딩

₩66,000