이 강의는

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 입문 저자
네이버, 이베이 코리아, 삼성, SK 그룹 Vue.js 강의
패스트캠퍼스 Vue.js 정복캠프 강의
Google 웹 기술 공식 사이트 번역자
기술 블로그, Github

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

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

도움 되는 분들

프런트엔드 입문 개발자
퍼블리셔
백엔드 개발자
디자이너
대학생

선수 지식

HTML
CSS
Javascript

지식공유자 소개

장기효(캡틴판교)

교육과정

모두 펼치기 68 강의 5시간 25분

섹션 0. 개발 환경 설정

5 강의 14 : 21

프로그램 설치

02 : 28

수업 소스 코드 안내

01 : 43

VSCode에서 수업 코드 보는 방법

02 : 47

VSCode 플러그인 설치 및 설정

05 : 14

뷰 개발자 도구 소개 및 실행 방법

02 : 09

섹션 1. Vue.js 소개

5 강의 30 : 19

MVVM 모델에서의 Vue

02 : 11

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

10 : 04

Reactivity 구현

11 : 11

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

03 : 23

Hello Vue.js와 뷰 개발자 도구

03 : 30

섹션 2. 인스턴스

3 강의 10 : 55

인스턴스 소개

04 : 37

인스턴스와 생성자 함수

03 : 38

인스턴스 옵션 속성

02 : 40

섹션 3. 컴포넌트

6 강의 19 : 53

컴포넌트 소개

01 : 39

[실습 안내] 컴포넌트 등록 및 실습

05 : 08

[실습 풀이] 전역 컴포넌트 등록

02 : 09

지역 컴포넌트 등록

04 : 14

전역 컴포넌트와 지역 컴포넌트의 차이점

02 : 42

컴포넌트와 인스턴스와의 관계

04 : 01

섹션 4. 컴포넌트 통신 방법 - 기본

11 강의 40 : 00

컴포넌트 통신

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 : 56

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

01 : 44

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

08 : 54

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

06 : 18

섹션 6. 라우터

6 강의 25 : 10

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

03 : 00

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

03 : 17

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

03 : 28

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

05 : 13

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

04 : 27

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

05 : 45

섹션 7. HTTP 통신 라이브러러 - axios

5 강의 30 : 28

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

03 : 34

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

06 : 07

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

09 : 57

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

05 : 59

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

04 : 51

섹션 8. 템플릿 문법 - 기본

6 강의 31 : 52

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

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 : 07

watch 속성

04 : 44

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

06 : 06

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

07 : 17

섹션 10. 프로젝트 생성 도구 - Vue CLI

6 강의 30 : 50

최신 Vue CLI 소개

03 : 25

Vue CLI 도구 설치할 때 문제점 해결 방법

03 : 07

CLI 2.x와 3.x의 차이점 / 프로젝트 생성 및 서버 실행

06 : 28

CLI로 생성한 프로젝트 폴더 구조 확인 및 main.js 파일 설명

07 : 13

싱글 파일 컴포넌트 소개 및 여태까지 배운 내용 적용하는 방법

03 : 37

App.vue와 HelloWorld.vue 설명

07 : 00

섹션 11. 싱글 파일 컴포넌트

5 강의 24 : 56

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

05 : 26

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

06 : 55

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

04 : 25

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

05 : 15

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

02 : 55

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

3 강의 21 : 34

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

06 : 20

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

06 : 44

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

08 : 30

섹션 13. 마무리

1 강의 10 : 12

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

10 : 12

공개 일자

2019년 6월 11일 (마지막 업데이트 일자 : 2019년 6월 14일)

수강 후기

4.9

354개의 수강평

5점

4점

3점

2점

1점

Uno Lee 2019.06.15

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

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

허헌 2019.06.18

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

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

야옹이는애옹 2019.06.23

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

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

수강 문의

김연지

2020-09-02 59131

안녕하세요! 퍼블리셔를 배우고 프론트앤드 개발자가 되기 위해 Vue에 처음으로 입문하게 되었습니다! 유튜브나 구글링을 통해 배우는데 막힐때 마다 막막하더라구요, 우연치 않게 캡틴판교님의 강의를 들었다는 후기를 듣고 찾아왔습니다! 혹시 vue cli 4.5.4버전에서는 vuetify 플러그인설치가 안되나요?! 캡틴판교님 강의를 들으면 이 부분을 해결할 수 있을까요?!

장기효(캡틴판교)
2020-09-04 69402

안녕하세요 연지님 처음 뵙겠습니다. 찾아주셔서 감사해요 ㅎㅎ Vue CLI가 최근에 4.5 버전으로 업데이트 하면서 프로젝트 기본 구성을 Vue.js 2.x 버전과 Vue.js 3.x 버전 중 한 개 선택하는 방식으로 변경되었습니다. Vue.js 2.x 버전 대를 선택하시면 Vuetify 공식 문서에서 안내하는 방식으로 설치하실 수 있을거에요 :) 제 강의에서는 Vuetify 관련 내용은 다루지 않으니 참고하시면 좋을 것 같습니다. 강의에 관심 가져주셔서 감사합니다 :)