Vue.js 시작하기 - Age of Vue.js - 인프런

BEST 개발 · 프로그래밍 웹 개발

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

(4.9)564개의 수강평 ∙ 3024명의 수강생

장기효(캡틴판교)

Front-End JavaScript Vue.js 웹 개발

25%

24,750원

~~33,000원~~

지식공유자 : 장기효(캡틴판교)

총 68개 수업˙총 5시간 25분

평생 무제한 수강

수료증 발급 강의

입문 초급 대상 중급이상

이 강의는 멘토링 신청이 가능합니다.

멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.

내 목록 추가 1029

초급자를 위해 준비한
[웹 개발, 프레임워크 및 라이브러리] 강의입니다.

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

✍️
이런 걸
배워요!

프런트엔드 개발

화면 UI 개발

Javascript

웹 개발

Vue.js 개발

Vue.js

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

강좌소개

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

강좌를 들으면서 Do it! Vue.js 입문 책도 함께 보시면 더 좋습니다. 미리 책을 보고 강의로 더 살을 붙이셔도 될 것 같아요. 책에는 없는 내용들도 많이 다뤘습니다 😁

강의 교안 소개

학습하시면서 아래 사이트도 함께 참고해보세요 :)

Cracking Vue.js 사이트 바로 가기

누구에게 도움이 되나요?

1. 프런트엔드 개발에 입문하는 분
2. 프런트엔드 개발자로 전향하고픈 퍼블리셔
3. 프런트엔드 개발을 해보고 싶은 디자이너
4. 프론트엔드 개발자로 취업을 희망하는 대학생
5. jQuery에서 벗어나 프레임워크를 사용하고픈 백엔드 개발자
※ 다만 HTML, CSS, JS 의 기초는 알고 계셔야 합니다..! 😁

함께 실습해요!

같이 공부하면 좋은 자료

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

강사 소개

장기효 (캡틴판교)

(현) 프런트엔드 개발자
Do it! Vue.js 입문 저자
네이버, 이베이 코리아, 삼성, LG, SK 그룹 Vue.js 강의
패스트캠퍼스 Vue.js 정복캠프 강의
Google 웹 기술 공식 사이트 번역자
기술 블로그, Github

인프런이 만난 사람 #02 | 장기효님 인터뷰 보러가기

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

지식공유자가 알려주는
강의 수강 꿀팁!

🎓
이런 분들께
추천드려요!

프런트엔드 입문 개발자

퍼블리셔

백엔드 개발자

디자이너

대학생

📚
선수 지식,
필요한가요?

HTML

CSS

Javascript

인프런에서 5년째 지식을 공유하고 있습니다. 지금까지 많은 응원과 격려를 보내주신 만큼 앞으로도 더 좋은 컨텐츠로 찾아뵙겠습니다. 감사합니다 😄 프런트엔드 개발 상담소 바로가기(매주 토요일 오후 3시 30분 유튜브 생방송 진행)

이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.

섹션 0. 개발 환경 설정 5강 ∙ 14분

프로그램 설치 미리보기 02:28 수업 소스 코드 안내 미리보기 01:43 VSCode에서 수업 코드 보는 방법 미리보기 02:47 VSCode 플러그인 설치 및 설정 미리보기 05:14 뷰 개발자 도구 소개 및 실행 방법 미리보기 02:09

섹션 1. Vue.js 소개 5강 ∙ 30분

MVVM 모델에서의 Vue 미리보기 02:11

기존 웹 개발 방식(HTML, Javascript) 10:04

Reactivity 구현 11:11

Reactivity 코드 라이브러리화 하기 03:23

Hello Vue.js와 뷰 개발자 도구 미리보기 03:30

섹션 2. 인스턴스 3강 ∙ 10분

인스턴스 소개 미리보기 04:37 인스턴스와 생성자 함수 미리보기 03:38 인스턴스 옵션 속성 미리보기 02:40

섹션 3. 컴포넌트 6강 ∙ 19분

컴포넌트 소개 미리보기 01:39 [실습 안내] 컴포넌트 등록 및 실습 미리보기 05:08 [실습 풀이] 전역 컴포넌트 등록 미리보기 02:09 지역 컴포넌트 등록 미리보기 04:14 전역 컴포넌트와 지역 컴포넌트의 차이점 미리보기 02:42 컴포넌트와 인스턴스와의 관계 미리보기 04:01

섹션 4. 컴포넌트 통신 방법 - 기본 11강 ∙ 40분

컴포넌트 통신 미리보기 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. 컴포넌트 통신 방법 - 응용 3강 ∙ 16분

같은 컴포넌트 레벨 간의 통신 방법 01:44

같은 컴포넌트 레벨 간의 통신 방법 구현 1 08:54

같은 컴포넌트 레벨 간의 통신 방법 구현 2 06:18

섹션 6. 라우터 6강 ∙ 25분

뷰 라우터 소개와 설치 03:00

뷰 라우터 인스턴스 연결 및 초기 상태 안내 03:17

[실습 안내] routes 속성 설명 및 실습 안내 03:28

라우터가 표시되는 영역 및 router-view 태그 설명 05:13

링크를 이용한 페이지 이동 및 router-link 태그 설명 04:27

라우터 정리 및 학습 방향 안내 05:45

섹션 7. HTTP 통신 라이브러러 - axios 5강 ∙ 30분

HTTP 라이브러리와 Ajax 그리고 Vue Resource 03:34

axios 소개 및 오픈 소스를 사용하기 전에 알아야 할 것들 06:07

axios 실습 및 this 설명 09:57

웹 서비스에서의 클라이언트와 서버와의 HTTP 통신 구조 05:59

크롬 개발자 도구 네트워크 패널 보는 방법 04:51

섹션 8. 템플릿 문법 - 기본 6강 ∙ 31분

템플릿 문법 소개 01:55

데이터 바인딩과 computed 속성 05:32

[실습 안내] 뷰 디렉티브와 v-bind 04:52

[실습 풀이] 클래스 바인딩, v-if, v-show 06:06

모르는 문법이 나왔을 때 공식 문서를 보고 해결하는 방법 06:26

methods 속성과 v-on 디렉티브를 이용한 키보드, 마우스 이벤트 처리 방법 07:01

섹션 9. 템플릿 문법 - 실전 3강 ∙ 18분

watch 속성 04:44

watch 속성 vs computed 속성 06:06

computed 속성을 이용한 클래스 코드 작성 방법 07:17

섹션 10. 프로젝트 생성 도구 - Vue CLI 6강 ∙ 30분

최신 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. 싱글 파일 컴포넌트 5강 ∙ 24분

싱글 파일 컴포넌트에 배운 내용 적용하여 개발 시작하기 05:26

싱글 파일 컴포넌트 체계에서 컴포넌트 등록하기 06:55

싱글 파일 컴포넌트에서 props 속성 사용하는 방법 04:25

싱글 파일 컴포넌트에서 event emit 구현하기 05:15

Vue CLI로 생성한 프로젝트 내용 정리 02:55

섹션 12. 최종 프로젝트 - 사용자 입력 폼 만들기 3강 ∙ 21분

프로젝트 생성 및 마크업 작업 06:19

v-model 속성과 submit 이벤트 처리 06:44

axios를 이용한 데이터 전송 및 form 구현 08:30

섹션 13. 마무리 1강 ∙ 10분

수업 정리 및 향후 학습 방향 안내 10:12

강의 게시일 : 2019년 06월 11일 (마지막 업데이트일 : 2019년 06월 14일)

수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.

4.9

564개의 수강평

5점

4점

3점

2점

1점

VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순

좋은 강의 감사합니다!, 재밌게 잘 따라할수 있었어요, 추천해 주신 책으로만 보다가 강의를 처음 들어보았는데, 반복학습으로 기초를 잘 이해시켜주시네요~ 강의가 너무 많아서 언제 다 듣지 했는데, 집중해서 듣다가 너무 빨리 줄어들어서 아쉬웠어요. 강의에 참고하라고 링크 걸어주시는 부분도 좋았고, 기초를 더 탄탄히 하고싶은 분들에게 추천드릴 강의입니다! 남은 부분 빨리 듣고 중급도 들으러 가야겠어요!

2019-06-19

지식공유자장기효(캡틴판교)

안녕하세요 상훈님, 좋은 강의 평가 남겨주셔서 감사합니다 :) 저도 이번 강의를 찍고 나서 보니 5시간이 넘어서 좀 길지 않을까 걱정을 했었는데, 오히려 시간이 빨리 갔다고 해주시니까 기분이 좋네요. 나머지 후속 강좌도 상훈님이 재밌게 들으실 수 있었으면 좋겠습니다. 중급 강좌는 이미 결제하신 것 같아서 완벽 가이드 강좌 추가해드리고 싶습니다. 강의 질문 게시판에 이메일 남겨주세요 :) 감사합니다!

2019-06-23 0

저는 2년차 접어드는 웹개발자입니다. 사실 저희 회사는 공기업을 주 고객으로 하다보니 javascript, jquery, html, css, spring 을 주로 사용하는데다가, 편집기는 에디트플러스를 주로 사용합니다. 업무에서 주로 위와같은 기술들을 사용하다보니 뭔가 트렌드에서 멀어지는 느낌이 들어서 개인프로젝트는 vue.js로 시작해보고자 이번 강좌 수강하게되었는데, 정말 유익했습니다. 1. vscode 사용법을 알게되어서 좋았습니다. 주로 업무에 에디트플러스를 사용하다보니 너무 적응이되어버려서 변경을 못하고 있었는데 이번 강좌를 통해서 vscode를 사용해보니까 정말 편하네요. 회사에서도 이제 주로 vscode를 사용합니다. 2. 강의하나하나의 시간이 짧아서 조금씩 집중해서 할 수 있어서 좋았습니다. 직장인이다보니 강의시간이 길어지면 조금 루즈해지는경향이 있었는데 이번 강좌는 짧은시간 여러개로 나누어주셔서 집중도 잘되고 뭔가 성취감(?) 이랄까요 그런것도 생기네요. 아직 개인프로젝트에 적용하기는 힘들겠지만 webpack 강좌와 vue.js 공식문서 읽으면서 내공을 좀 쌓아야겠네요. 좋은강의 감사합니다. 중급도 기회가되면 한번 접해보고싶네용

2019-06-23

지식공유자장기효(캡틴판교)

안녕하세요 야옹이는애옹님, 상세한 수강평 감사드립니다. 짧게 구성된 강좌가 성취감에 도움되셨다니까 컨텐츠 제작자로서 더 뿌듯하네요 :) 수강평 잘 정리해서 적어주셨으니 중급 강좌 추가해드릴게요! :) 개인 토이 프로젝트 하시는데 더 도움이 많이 되었으면 좋겠습니다. 강의 질의 코너에 인프런 계정 이메일 적어주시면 추가해드릴게요!

2019-07-07 1

아무것도 몰랐던 상태에서 개념정리가 된것같아서 덕분에 잘 들었습니다. 감사합니다!!

2019-06-19

지식공유자장기효(캡틴판교)

도움 되었다니 뿌듯합니다. 좋은 수강평 남겨주셔서 감사해요 :)

2019-06-23 0

회사에서 프론트단을 Vue.js로 구현하게 되었습니다. Vue.js에 대한 아무 지식없이 할려니 어렵더군요.. 빠르게 업무에 사용할려고 vue.js 완벽가이드를 구매하여 강의를 들으면서 바로바로 적용하였습니다. 하지만 기본지식이 없다보니 왜 써야 하는지를 모르고 썻던 경우가 많더군요. 기본지식이 탄탄해야 합니다. 새 강좌가 나왔다는 소식을 듣고 바로 구매하여 하루만에 완강을 하였습니다. 또렷한 음성과사용자를 배려하는 디테일한 부분(아이콘 확대, 자막,학습자료등)까지 신경써주셔서 강의 듣기에 좋았습니다. 다음강의도 기대가 됩니다.

2019-06-18

지식공유자장기효(캡틴판교)

안녕하세요 허헌님, 강의에 대해서 좋은 평가 남겨주셔서 감사합니다 :) 완벽 가이드를 듣고 기초 강좌까지 들어주셔서 개인적으로 더 감사하네요. 무엇보다도 제가 열심히 준비한 강의의 특징들을 잘 짚어주시고 좋다고 해주셔서 더 고맙습니다 :) 앞으로 제 컨텐츠도 많이 기대해주셨으면 좋겠구요. 좋은 수강평 남겨주신 만큼 더 좋은 컨텐츠로 보답해드리겠습니다. 감사합니다!! :)

2019-06-23 1

새롭게 공부하려고 하던 참에, 새로운 강의가 등록되어서 바로 시작했습니다. 내용도 좋고... ^^ 무엇보다도 목소리도 또렸하게, 그리고 화면도 중요 순간에는 확대되어 보여주는 등 구성도 세심하게 신경 써 주셔서 좋네요. vue 강의로는 역시 캡틴 판교 장기효 님이에요. ^^ ~~ 중급도 배우고 싶어요. ^^

2019-06-15

지식공유자장기효(캡틴판교)

안녕하세요 Uno님, 새 강좌를 빠르게 신청해주시고, 또 빠르게 완강하신 다음에 기분 좋은 칭찬까지 남겨주셔서 감사합니다 :) 신규 강좌 오픈 기념으로 댓글 이벤트를 진행하고 있는데 Uno님께 먼저 기회를 드리고 싶습니다! 다시 한번 감사드리고 앞으로도 잘 부탁드립니다 :)

2019-06-17 1