BEST

웹 개발

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

Name: 최신 Vue 3 완벽 가이드: 프로젝트 설정 & 스펙 총정리
Price: 22000 KRW
Rating: 4.9 (42 reviews)

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

(4.9) 수강평 42개

수강생 511명

난이도 초급

수강기한 무제한

짐코딩

실습 중심

프론트엔드

프로젝트

실습 중심

프론트엔드

프로젝트

카카오

임직원들도 이 강의를 듣고 있어요!

카카오

임직원들도 이 강의를 듣고 있어요!

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

4.9

5.0

badbogos

100% 수강 후 작성

귀에 쏙쏙 들어옵니다 많은 도움이 됩니다.

5.0

woojoo216

100% 수강 후 작성

eslint versionup되서 해매고 있었는데 감사합니다. 다른 내용들도 vue3 수강후 딱 필요한 부분이었습니다. vuejs사이트에서 변경사항들을 확인해도 머리속에서 정리되지 않는 느낌이었는데 이거 강의 듣고 다시 보니 아 이내용이구나 하고 쏙쏙 들어 옵니다. 감사합니다.

5.0

kdkim2000

100% 수강 후 작성

최신 변경사항을 확인할 수 있어 좋았습니다. 계속 강의가 업뎃되면 좋겠습니다.

수강 후 이런걸 얻을 수 있어요

최신 Vue 3.5 프로젝트의 개발환경 구성 및 초기 설정
VSCode 스니펫과 NVM을 활용한 효율적인 개발 워크플로우
ESLint, Prettier 설정으로 코드 일관성 유지하기
Vue 3.3~3.5의 주요 기능들(defineOptions(), defineModel(), Props 구조 분해 등) 익히기
Tailwind CSS를 Vue 프로젝트에 설치하는 방법

이 강의에서는 Vue 최신 버전 3.5의 스펙 업데이트 내용을 상세히 다루며, 최신 트렌드에 맞춘 프로젝트 설정 방법을 심도 있게 소개합니다. 특히, Vue.js 기본편과 실전편 강의를 진행하며 수강생분들이 궁금해했던 사항들을 반영하여 구성했습니다.

앞으로 주요 변경사항과 꼭 알아야 할 내용은 이 강의에 지속적으로 추가될 예정입니다. "Vue 3 완벽 마스터: 기본편, 실전편"에 많은 관심과 참여 부탁드립니다!

이런 분들께
추천드려요

학습 대상은
누구일까요?

Vue 기초 및 실전 강의를 이미 수강하고 최신 스펙을 배우고 싶은 분
Vue 3.5의 새로운 기능을 빠르게 이해하고 적용하고자 하는 개발자
프로젝트 설정 및 환경 구성을 최신 트렌드에 맞게 하고 싶은 분
효율적인 코딩을 위해 VSCode 스니펫과 NVM 활용법을 배우고 싶은 분
Tailwind CSS를 Vue 프로젝트에서 활용하고자 하는 프론트엔드 개발자

선수 지식,
필요할까요?

HTML&CSS
JavaScript
Vue 기초

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

인프런인증

커리어인증

36,681

명

수강생

2,853

개

수강평

1,667

개

답변

4.9

점

강의 평점

개

강의

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

비개발자도 따라올 수 있게, 최대한 쉽고 · 실무자도 만족스럽게 깊이 있게 가르칩니다.
현재 13년차 풀스택 개발자이자, IT 스타트업을 직접 운영하는 대표입니다.

KT·기아 등 대기업 서비스 개발, 카페24 이커머스 플랫폼, 스마트시티 IoT 데이터 플랫폼,
그리고 직접 운영 중인 자체 서비스까지, 프론트엔드·백엔드·AWS 인프라를 모두 직접 설계하고 만들어 왔습니다.

지금은 교육에 집중하면서도 자체 서비스를 직접 개발하며 현업 감각을 유지합니다.

그 현업 경험을, 입문자도 이해되는 언어로 풀어내는 것, 그게 제가 강의로 하는 일입니다.

🏆 검증된 성과

🥇 인프런 2026 클로드 코드 강의 BEST 1 - 클로드 코드 완벽 마스터

🏆 인프런 Awards 2025 베스트셀러 - React 완벽 마스터

🔥 인프런 2025 '지금 가장 HOT한 강의' - 클로드 코드 완벽 마스터

🎬 YouTube 구독자 4.9만+ · 누적 조회수 360만+

👨‍💻 경력

13년차 풀스택 개발자 · 현직 IT 스타트업 대표
프론트엔드: React · Vue · TypeScript
백엔드: Node.js · Java · Spring · Python
인프라: AWS · Serverless · Lambda 아키텍처 설계
인프런 지식공유자

🚀 스타트업 (창업가)

특허·상표 출원·등록 경험
정부 창업지원사업 다수 선정 (스마트벤처캠퍼스 '최우수' 등)

📖 기업 교육 (B2B)

멀티캠퍼스 - 기업 실무자 대상 'Claude Code' 오프라인 교육
신한카드 개발자 교육 - 멀티캠퍼스 주관, 온라인 라이브
한국소프트웨어인재개발원 특강 · 관공서 IT 멘토

⭐️ 더 보기

💻YouTube - 무료 강의
💻짐코딩 클럽 - 전체 강의 & 무료 교안
🐙GitHub - 예제 소스코드
📸인스타그램 - 일상 & 꿀팁
🧵스레드 - 개발 인사이트

🏢 기업 강의·제휴·광고 문의 — biz@gymcoding.co

💬 일반·강의 문의 — hello@gymcoding.co

커리큘럼

전체

15개 ∙ (1시간 48분)

섹션 1. 시작하기 전 꿀팁!

4개 ∙ (24분)

섹션 2. Vue 최신 프로젝트 구성

5개 ∙ (36분)

5. 개발환경 구성
08:14
6. Vue 3 프로젝트 구성
07:10
7. 프로젝트 구조 설명
03:05
8. ESLint, Prettier 설정 (.editorconfig, jsconfig.js)
09:22
9. Tailwind CSS 설치
08:36

섹션 3. Vue 최신 스펙 총정리

6개 ∙ (48분)

10. Vue 3.3: defineOptions(), toValue(), toRef()
14:06
11. Vue 3.4: defineModel()
09:20
12. Vue 3.4: defineModel() 심화
10:58
13. Vue 3.5: Props 구조 분해
10:05
14. Vue 3.5: Template Refs, ETC
03:46
15. 강의를 수강해 주셔서 감사드립니다!

강의 게시일:

마지막 업데이트일:

수강평

전체

42개

4.9

42개의 수강평

badbogos
수강평 20
∙
평균 평점 5.0
5
100% 수강 후 작성
귀에 쏙쏙 들어옵니다 많은 도움이 됩니다.
kdkim2000
수강평 3
∙
평균 평점 4.7
5
100% 수강 후 작성
최신 변경사항을 확인할 수 있어 좋았습니다. 계속 강의가 업뎃되면 좋겠습니다.
- 짐코딩
  지식공유자
  감사합니다 :)
woojoo216
수강평 4
∙
평균 평점 5.0
5
100% 수강 후 작성
eslint versionup되서 해매고 있었는데 감사합니다. 다른 내용들도 vue3 수강후 딱 필요한 부분이었습니다. vuejs사이트에서 변경사항들을 확인해도 머리속에서 정리되지 않는 느낌이었는데 이거 강의 듣고 다시 보니 아 이내용이구나 하고 쏙쏙 들어 옵니다. 감사합니다.
- 짐코딩
  지식공유자
  안녕하세요, woojoo216님! 완강 후 남겨주신 소중한 수강평 감사합니다. ESLint 버전 업데이트로 어려움을 겪고 계셨군요. 개발 환경과 도구들이 자주 변경되는 상황에서 그런 문제를 해결해 드릴 수 있어서 저도 기쁩니다. 감사합니다~!~! ☺️
009aegisep
수강평 2
∙
평균 평점 5.0
5
100% 수강 후 작성
ding-co
수강평 8
∙
평균 평점 5.0
5
33% 수강 후 작성
- 짐코딩
  지식공유자
  감사합니다~! 🙂

짐코딩님의 다른 강의

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

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

짐코딩

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

Nhập môn

React, 인공지능(AI), claude

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

짐코딩

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

짐코딩

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

Nhập môn

HTML/CSS

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

짐코딩

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

짐코딩

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

Cơ bản

Vue.js

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

짐코딩

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

짐코딩

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

Cơ bản

Webpack

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

짐코딩

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

짐코딩

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

Cơ bản

Vue.js

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

짐코딩

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

짐코딩

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

Cơ bản

React, react-query, react-router

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

짐코딩

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

짐코딩

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

Cơ bản

React, 블로그, Next.js

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

짐코딩

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

짐코딩

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

Cơ bản

promise, async-await, asynchronous-programming

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

짐코딩

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

짐코딩

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

Cơ bản

HTML/CSS, TailwindCSS, JavaScript

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

짐코딩

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

짐코딩

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

Cơ bản

JavaScript, ES6

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

짐코딩

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

짐코딩

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

Cơ bản

Quasar, Vue.js

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

짐코딩

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

짐코딩

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

Nhập môn

HTML/CSS, JavaScript, github-pages

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

짐코딩

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

짐코딩

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

Trung cấp trở lên

Vue.js, Nuxt.js, pinia

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

짐코딩

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

짐코딩

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

Trung cấp trở lên

Vue.js, Firebase, Quasar

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

짐코딩

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

짐코딩

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

Cơ bản

Vue.js, Vuetify

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

짐코딩

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

짐코딩

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

Cơ bản

Vue.js, Vuetify

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

짐코딩

비슷한 강의

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

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

짐코딩

Trung cấp trở lên

Vue.js, Nuxt.js, pinia

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

짐코딩

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

짐코딩

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

Cơ bản

HTML/CSS, TailwindCSS, JavaScript

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

짐코딩

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

짐코딩

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

Cơ bản

Vue.js

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

짐코딩

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

bradkim

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

Cơ bản

OAuth, oauth2, JWT

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

bradkim

[풀스택 입문] Firebase보다 10배 좋은 Supabase

로펀

풀스택 개발에 날개를 달아줄 Supabase! Firebase의 상위호환인 Supabase로 풀스택 개발을 2시간만에 완성합니다.

Cơ bản

PostgreSQL, Next.js, TailwindCSS

[풀스택 입문] Firebase보다 10배 좋은 Supabase

로펀

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

호돌맨

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

Trung cấp trở lên

Spring Boot, JPA, AWS

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

호돌맨

Firebase 시리즈 #1: 소셜 로그인·휴대폰·위치 인증 완벽 가이드

닭강정

🔥 HTML + Tailwind CSS + 순수 JavaScript만으로 완성하는 Firebase 사용자 인증! 소셜 로그인·휴대폰·위치 인증까지, 복잡한 백엔드 없이 쉽고 빠르게 계정 시스템 구축합니다.

Cơ bản

HTML/CSS, JavaScript, Firebase

Firebase 시리즈 #1: 소셜 로그인·휴대폰·위치 인증 완벽 가이드

닭강정

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

Michael Kwon

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

Cơ bản

Vue.js, PWA, supabase

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

Michael Kwon

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

임종태

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

Cơ bản

Vue.js, PWA, Firebase

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

임종태

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

로펀

풀스택 개발에 날개를 달아줄 Supabase! 3가지의 클론 프로젝트를 통해 Next.js 14와 Supabase로 실무 수준의 풀스택 개발을 하는 법을 속성으로 배우게 됩니다.

Cơ bản

Next.js, supabase, TailwindCSS

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

로펀

Tailwind CSS 실전 포트폴리오 퍼블리싱

코딩웍스(Coding Works)

[Tailwind CSS 실전 포트폴리오 퍼블리싱]은 Tailwind CSS를 활용해 26가지 이상의 다양한 실전 예제 제작하는 과정입니다. 실전 예제를 빠르게 다양하게 제작하면 그 속에서 필수적인 이론을 설명합니다. 해당 강의는 개발자와 퍼블리셔가 만드는 Tailwind CSS 스타일링을 중심으로 제작되었습니다.

Cơ bản

TailwindCSS, HTML/CSS

Tailwind CSS 실전 포트폴리오 퍼블리싱

코딩웍스(Coding Works)

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

4.9

수강 후 이런걸 얻을 수 있어요