Thumbnail
BEST
개발 · 프로그래밍 프론트엔드

Vue.js 시작하기 - Age of Vue.js 대시보드

(4.9)
1,387개의 수강평 ∙  8,632명의 수강생

44,000원

지식공유자: 장기효(캡틴판교)
총 68개 수업 (5시간 25분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

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

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

✍️
이런 걸
배워요!
프런트엔드 개발
화면 UI 개발
Javascript
웹 개발
Vue.js 개발
Vue.js

Vue.js 시작하기,
Age of Vue.js 🌌

1,000명이 넘는 분들의 성원에 힘입어 새롭게 탄생한 Vue.js 입문 강의입니다.1,000명이 넘는 분들의 성원에 힘입어
새롭게 탄생한 Vue.js 입문 강의입니다.

누구나 다루기 쉬운 Vue.js 입문리뉴얼 강의입니다. 입문자의 관점으로 더욱더 눈높이를 낮춰 프론트엔드 개발할 때 알고 있으면 좋은 지식들을 상세하게 설명하였습니다. Vue.js로 재밌게 웹 개발을 시작하실 수 있도록 알차게 내용을 구성하였으니, 관심 있으신 분들은 강의 소개 영상을 꼭 확인해보세요! 😁


프론트엔드 개발에 관심있는
누구나 배울 수 있습니다 🏃‍♀️

프론트엔드 개발자로 전향하고픈 퍼블리셔

프론트엔드 개발자로
전향하고픈
퍼블리셔

프론트엔드 개발을 해보고 싶은 디자이너

프론트엔드 개발을
해보고 싶은
디자이너

프론트엔드 개발자 취업을 준비하는 대학생

프론트엔드 개발자
취업을 준비하는
대학생

jQuery에서 벗어나 프레임워크를 쓰고픈 백엔드 개발자

jQuery에서 벗어나
프레임워크를 쓰고픈
백엔드 개발자

📢 선수 지식을 꼭 확인해주세요!

  • Vue.js 프레임워크를 배우기 위해서는 HTML, CSS, JS 기초를 꼭 알고 있어야 합니다.

실습으로 재미있게
학습해봐요 ✨

Event Emit?

웹에서 이벤트가 발생하고, 컴포넌트 간에 데이터를 주고받는 과정을 직접 구현해봅니다. 설명을 듣고 실습을 해본 다음, 어떤 구조로 동작이 이루어졌는지 풀이까지 차근차근 익힐 수 있어요.

사용자 입력 폼 만들기최종 프로젝트 

간단한 로그인 폼을 구현해 봅니다. 사용자가 입력한 ID와 패스워드 데이터는 어떤 구조로 서버에 전송될까요? Vue를 통해 이벤트를 다루고 컴포넌트를 구성하는 방법의 기본을 탄탄하게 다져보세요.


강의 교안을 제공합니다 📖

Vue.js로 웹 서비스를 개발하는 데 필요한 지식을 모은 온라인 텍스트북을 제공합니다.

"Cracking Vue.js" 사이트 바로가기 (클릭)


책과 함께 공부해봐요 📗

vuejs

Do it! Vue.js 입문

Vue.js의 기본 동작 원리부터 꼼꼼하게 설명하고,
실제 서비스를 개발할 때 필요한 컴포넌트 기반 설계 방법과
프로젝트 구조화 노하우까지 알차게 담았습니다.
강의를 들으면서, Vue.js 입문 책도 함께 공부해보세요!

 


예상 질문 Q&A

Q. 프론트엔드 개발에 익숙하지 않은데 들어도 될까요?

이 강의는 기본적인 HTML, CSS, 자바스크립트 지식이 있는 분들이 듣기 좋습니다. 특히 자바스크립트의 변수, 함수, 제어문, 객체 등에 대해서 모르시는 분들은 먼저 자바스크립트 기초 지식을 학습한 후 수강하시는 것을 추천드립니다.

  • 자바스크립트 기초 문법 (클릭)
  • 자바스크립트 기본기 다지기 (클릭)
  • 자바스크립트 - 생활코딩 (클릭)

Q. Vue.js 최신 버전이 나왔는데 이 강의를 들어도 될까요?

물론입니다! 강의에서 다루는 개념과 내용 모두 Vue 3에서 동일하게 활용됩니다. 인스턴스 옵션 속성 1개 정도만 다를 뿐 큰 차이가 없기 때문에 Vue 2로 학습하셔도 문제가 없습니다.

현재 실무에서는 대부분 Vue 2를 사용하고 있고 Vue 3에서 제공하는 주요 특징 모두 Vue 2에서도 사용할 수 있습니다. 이후에 Vue 3 생태계가 성숙해지면 추가로 강의를 제작할 예정이니 참고해주세요!

Vue 2와 Vue 3 차이점 소개 영상. 2021년 프론트엔드 개발자 그룹 컨퍼런스

Q. 강의에서 학습한 내용을 바로 실무에 적용할 수 있나요?

네, 인스턴스부터 컴포넌트까지 기본적인 개념들을 바로 서비스에 적용해 볼 수 있습니다. 이후 학습 로드맵을 따라서 학습해 보시면 점진적으로 배운 내용을 적용하실 수 있을 거예요 😄


연관 로드맵 🚎

Vue.js와 TypeScript로 정복하는 프론트엔드 개발
캡틴판교님의 뷰 + 타입스크립트로 한 번에
배우는 강의들로 구성된 로드맵입니다.
이 강의 포함


지식공유자 소개 👨‍🏫

장기효 (캡틴판교)

"인프런이 만난 사람" 인터뷰

“강의 수익으로 Vue.js 오픈소스 +
생활코딩을 후원합니다 😁”

강의 할인을 제공합니다!

시리즈 "Vue.js로 완성하는 프론트엔드
개발자 로드맵" 25% 할인 (클릭)

수입이 없는 중·고등학생,
대학생을 위한 학생 50% 할인 (클릭)

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
프런트엔드 입문 개발자
퍼블리셔
백엔드 개발자
디자이너
대학생
📚
선수 지식,
필요할까요?
HTML
CSS
Javascript

안녕하세요
장기효(캡틴판교) 입니다.
장기효(캡틴판교)의 썸네일

인프런에서 8년째 지식을 공유하고 있습니다.

📗 Do it! Vue.js 입문, 쉽게 시작하는 타입스크립트, 나는 네이버 프런트엔드 개발자입니다. 책 3권 집필
📖 Cracking Vue.js, 타입스크립트 핸드북, 웹팩 핸드북. 온라인 무료 가이드북 3권 집필
👨‍💻 캡틴판교의 프론트엔드 개발 유튜브 채널 운영 - 취준생, 주니어 개발자들의 고민을 들을 수 있는 곳
🥤 캡틴판교의 카카오톡 오픈 채팅방 운영 - 프런트엔드 개발 최신 정보와 업계 동료들의 생각을 들을 수 있는 곳

커리큘럼 총 68 개 ˙ 5시간 25분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. Vue.js 소개
MVVM 모델에서의 Vue 미리보기 02:11
기존 웹 개발 방식(HTML, Javascript) 10:04
Reactivity 구현 11:11
Reactivity 코드 라이브러리화 하기 03:23
Hello Vue.js와 뷰 개발자 도구 미리보기 03:30
섹션 4. 컴포넌트 통신 방법 - 기본
컴포넌트 통신 미리보기 02:00 컴포넌트 통신 규칙이 필요한 이유 미리보기 03:17 props 속성 미리보기 06:18 props 속성의 특징 미리보기 02:26 [실습 안내] props 속성 실습 미리보기 02:01
[실습 풀이] props 속성 실습 풀이 02:17
event emit 04:53
event emit으로 콘솔 출력하기 03:39
[실습 안내] event emit 실습 안내 03:37
[실습 풀이] event emit 실습 풀이 05:01
뷰 인스턴스에서의 this 04:31
섹션 5. 컴포넌트 통신 방법 - 응용
같은 컴포넌트 레벨 간의 통신 방법 01:44
같은 컴포넌트 레벨 간의 통신 방법 구현 1 08:54
같은 컴포넌트 레벨 간의 통신 방법 구현 2 06:18
섹션 6. 라우터
뷰 라우터 소개와 설치 03:01
뷰 라우터 인스턴스 연결 및 초기 상태 안내 03:17
[실습 안내] routes 속성 설명 및 실습 안내 03:28
라우터가 표시되는 영역 및 router-view 태그 설명 05:13
링크를 이용한 페이지 이동 및 router-link 태그 설명 04:27
라우터 정리 및 학습 방향 안내 05:45
섹션 7. HTTP 통신 라이브러러 - axios
HTTP 라이브러리와 Ajax 그리고 Vue Resource 03:34
axios 소개 및 오픈 소스를 사용하기 전에 알아야 할 것들 06:07
axios 실습 및 this 설명 09:57
웹 서비스에서의 클라이언트와 서버와의 HTTP 통신 구조 05:59
크롬 개발자 도구 네트워크 패널 보는 방법 04:51
섹션 8. 템플릿 문법 - 기본
템플릿 문법 소개 01:55
데이터 바인딩과 computed 속성 미리보기 05:32
[실습 안내] 뷰 디렉티브와 v-bind 04:52
[실습 풀이] 클래스 바인딩, v-if, v-show 06:06
모르는 문법이 나왔을 때 공식 문서를 보고 해결하는 방법 06:26
methods 속성과 v-on 디렉티브를 이용한 키보드, 마우스 이벤트 처리 방법 07:01
섹션 9. 템플릿 문법 - 실전
watch 속성 미리보기 04:44 watch 속성 vs computed 속성 미리보기 06:06
computed 속성을 이용한 클래스 코드 작성 방법 07:17
섹션 10. 프로젝트 생성 도구 - Vue CLI
최신 Vue CLI 소개 03:25
Vue CLI 도구 설치할 때 문제점 해결 방법 03:07
CLI 2.x와 3.x의 차이점 / 프로젝트 생성 및 서버 실행 미리보기 06:27
CLI로 생성한 프로젝트 폴더 구조 확인 및 main.js 파일 설명 07:13
싱글 파일 컴포넌트 소개 및 여태까지 배운 내용 적용하는 방법 03:37
App.vue와 HelloWorld.vue 설명 07:00
섹션 11. 싱글 파일 컴포넌트
싱글 파일 컴포넌트에 배운 내용 적용하여 개발 시작하기 05:26
싱글 파일 컴포넌트 체계에서 컴포넌트 등록하기 06:55
싱글 파일 컴포넌트에서 props 속성 사용하는 방법 04:25
싱글 파일 컴포넌트에서 event emit 구현하기 05:15
Vue CLI로 생성한 프로젝트 내용 정리 02:55
섹션 12. 최종 프로젝트 - 사용자 입력 폼 만들기
프로젝트 생성 및 마크업 작업 06:19
v-model 속성과 submit 이벤트 처리 06:44
axios를 이용한 데이터 전송 및 form 구현 08:30
섹션 13. 마무리
수업 정리 및 향후 학습 방향 안내 10:12
강의 게시일 : 2019년 06월 11일 (마지막 업데이트일 : 2019년 06월 09일)
수강평 총 1,387개
수강생분들이 직접 작성하신 수강평입니다.
4.9
1,387개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
Yunse Lee thumbnail
5
새롭게 공부하려고 하던 참에, 새로운 강의가 등록되어서 바로 시작했습니다. 내용도 좋고... ^^ 무엇보다도 목소리도 또렸하게, 그리고 화면도 중요 순간에는 확대되어 보여주는 등 구성도 세심하게 신경 써 주셔서 좋네요. vue 강의로는 역시 캡틴 판교 장기효 님이에요. ^^ ~~ 중급도 배우고 싶어요. ^^
2019-06-15
지식공유자 장기효(캡틴판교)
안녕하세요 Uno님, 새 강좌를 빠르게 신청해주시고, 또 빠르게 완강하신 다음에 기분 좋은 칭찬까지 남겨주셔서 감사합니다 :) 신규 강좌 오픈 기념으로 댓글 이벤트를 진행하고 있는데 Uno님께 먼저 기회를 드리고 싶습니다! 다시 한번 감사드리고 앞으로도 잘 부탁드립니다 :)
2019-06-17
허헌 thumbnail
5
회사에서 프론트단을 Vue.js로 구현하게 되었습니다. Vue.js에 대한 아무 지식없이 할려니 어렵더군요.. 빠르게 업무에 사용할려고 vue.js 완벽가이드를 구매하여 강의를 들으면서 바로바로 적용하였습니다. 하지만 기본지식이 없다보니 왜 써야 하는지를 모르고 썻던 경우가 많더군요. 기본지식이 탄탄해야 합니다. 새 강좌가 나왔다는 소식을 듣고 바로 구매하여 하루만에 완강을 하였습니다. 또렷한 음성과사용자를 배려하는 디테일한 부분(아이콘 확대, 자막,학습자료등)까지 신경써주셔서 강의 듣기에 좋았습니다. 다음강의도 기대가 됩니다.
2019-06-18
지식공유자 장기효(캡틴판교)
안녕하세요 허헌님, 강의에 대해서 좋은 평가 남겨주셔서 감사합니다 :) 완벽 가이드를 듣고 기초 강좌까지 들어주셔서 개인적으로 더 감사하네요. 무엇보다도 제가 열심히 준비한 강의의 특징들을 잘 짚어주시고 좋다고 해주셔서 더 고맙습니다 :) 앞으로 제 컨텐츠도 많이 기대해주셨으면 좋겠구요. 좋은 수강평 남겨주신 만큼 더 좋은 컨텐츠로 보답해드리겠습니다. 감사합니다!! :)
2019-06-23
블라빙 thumbnail
5
아무것도 몰랐던 상태에서 개념정리가 된것같아서 덕분에 잘 들었습니다. 감사합니다!!
2019-06-19
지식공유자 장기효(캡틴판교)
도움 되었다니 뿌듯합니다. 좋은 수강평 남겨주셔서 감사해요 :)
2019-06-23
야옹이는애옹 thumbnail
5
저는 2년차 접어드는 웹개발자입니다. 사실 저희 회사는 공기업을 주 고객으로 하다보니 javascript, jquery, html, css, spring 을 주로 사용하는데다가, 편집기는 에디트플러스를 주로 사용합니다. 업무에서 주로 위와같은 기술들을 사용하다보니 뭔가 트렌드에서 멀어지는 느낌이 들어서 개인프로젝트는 vue.js로 시작해보고자 이번 강좌 수강하게되었는데, 정말 유익했습니다. 1. vscode 사용법을 알게되어서 좋았습니다. 주로 업무에 에디트플러스를 사용하다보니 너무 적응이되어버려서 변경을 못하고 있었는데 이번 강좌를 통해서 vscode를 사용해보니까 정말 편하네요. 회사에서도 이제 주로 vscode를 사용합니다. 2. 강의하나하나의 시간이 짧아서 조금씩 집중해서 할 수 있어서 좋았습니다. 직장인이다보니 강의시간이 길어지면 조금 루즈해지는경향이 있었는데 이번 강좌는 짧은시간 여러개로 나누어주셔서 집중도 잘되고 뭔가 성취감(?) 이랄까요 그런것도 생기네요. 아직 개인프로젝트에 적용하기는 힘들겠지만 webpack 강좌와 vue.js 공식문서 읽으면서 내공을 좀 쌓아야겠네요. 좋은강의 감사합니다. 중급도 기회가되면 한번 접해보고싶네용
2019-06-23
지식공유자 장기효(캡틴판교)
안녕하세요 야옹이는애옹님, 상세한 수강평 감사드립니다. 짧게 구성된 강좌가 성취감에 도움되셨다니까 컨텐츠 제작자로서 더 뿌듯하네요 :) 수강평 잘 정리해서 적어주셨으니 중급 강좌 추가해드릴게요! :) 개인 토이 프로젝트 하시는데 더 도움이 많이 되었으면 좋겠습니다. 강의 질의 코너에 인프런 계정 이메일 적어주시면 추가해드릴게요!
2019-07-07
Sanghun Han thumbnail
5
좋은 강의 감사합니다!, 재밌게 잘 따라할수 있었어요, 추천해 주신 책으로만 보다가 강의를 처음 들어보았는데, 반복학습으로 기초를 잘 이해시켜주시네요~ 강의가 너무 많아서 언제 다 듣지 했는데, 집중해서 듣다가 너무 빨리 줄어들어서 아쉬웠어요. 강의에 참고하라고 링크 걸어주시는 부분도 좋았고, 기초를 더 탄탄히 하고싶은 분들에게 추천드릴 강의입니다! 남은 부분 빨리 듣고 중급도 들으러 가야겠어요!
2019-06-19
지식공유자 장기효(캡틴판교)
안녕하세요 상훈님, 좋은 강의 평가 남겨주셔서 감사합니다 :) 저도 이번 강의를 찍고 나서 보니 5시간이 넘어서 좀 길지 않을까 걱정을 했었는데, 오히려 시간이 빨리 갔다고 해주시니까 기분이 좋네요. 나머지 후속 강좌도 상훈님이 재밌게 들으실 수 있었으면 좋겠습니다. 중급 강좌는 이미 결제하신 것 같아서 완벽 가이드 강좌 추가해드리고 싶습니다. 강의 질문 게시판에 이메일 남겨주세요 :) 감사합니다!
2019-06-23