
25%
24,750원
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
초급자를 위해 준비한
[웹 개발, 프레임워크 및 라이브러리] 강의입니다.
[웹 개발, 프레임워크 및 라이브러리] 강의입니다.
Vue.js로 쉽게 웹 개발할 수 있도록 기본 개념과 핵심 기능에 대해서 학습하고 구현해봅니다. 강좌를 들으시고 나면 Vue.js로 프런트엔드 개발을 하시는게 재밌어질거에요.
✍️
이런 걸
배워요!
이런 걸
배워요!
프런트엔드 개발
화면 UI 개발
Javascript
웹 개발
Vue.js 개발
Vue.js
1000명이 넘는 분들의 성원에 힘입어 새롭게 탄생한 Vue.js 입문 강좌입니다
강좌소개
누구나 다루기 쉬운 Vue.js 입문의 리뉴얼 강좌입니다. 입문자 관점으로 더욱더 눈높이를 낮춰 프런트엔드 개발할 때 알고 있으면 좋은 지식들을 상세하게 설명하였습니다. Vue.js로 재밌게 웹 개발을 시작하실 수 있도록 알차게 내용을 구성하였으니 관심 있으신 분들은 90초 소개 영상을 꼭 확인해보시고 수강 신청해주세요 😁
강좌를 들으면서 Do it! Vue.js 입문 책도 함께 보시면 더 좋습니다. 미리 책을 보고 강의로 더 살을 붙이셔도 될 것 같아요. 책에는 없는 내용들도 많이 다뤘습니다 😁
강의 교안 소개
학습하시면서 아래 사이트도 함께 참고해보세요 :)
누구에게 도움이 되나요?

1. 프런트엔드 개발에 입문하는 분
2. 프런트엔드 개발자로 전향하고픈 퍼블리셔
3. 프런트엔드 개발을 해보고 싶은 디자이너
4. 프론트엔드 개발자로 취업을 희망하는 대학생
5. jQuery에서 벗어나 프레임워크를 사용하고픈 백엔드 개발자
※ 다만 HTML, CSS, JS 의 기초는 알고 계셔야 합니다..! 😁
2. 프런트엔드 개발자로 전향하고픈 퍼블리셔
3. 프런트엔드 개발을 해보고 싶은 디자이너
4. 프론트엔드 개발자로 취업을 희망하는 대학생
5. jQuery에서 벗어나 프레임워크를 사용하고픈 백엔드 개발자
※ 다만 HTML, CSS, JS 의 기초는 알고 계셔야 합니다..! 😁
함께 실습해요!
추천 학습 로드맵
Vue.js 전체 시리즈 강의 25% 할인 받기(클릭)
중학생, 고등학생, 대학생 학생 할인 50% 받기(클릭)
같이 공부하면 좋은 자료
강좌를 들으면서, 입문 책도 함께 공부해보세요 😁
vue.js의 기본 동작 원리부터 꼼꼼하게 설명하고,
실제 서비스를 개발할 때 필요한 컴포넌트 기반 설계 방법과
프로젝트 구조화 노하우까지 알차게 담았습니다.
vue.js의 기본 동작 원리부터 꼼꼼하게 설명하고,
실제 서비스를 개발할 때 필요한 컴포넌트 기반 설계 방법과
프로젝트 구조화 노하우까지 알차게 담았습니다.
강사 소개
장기효 (캡틴판교)
- (현) 프런트엔드 개발자
- Do it! Vue.js 입문 저자
- 네이버, 이베이 코리아, 삼성, LG, SK 그룹 Vue.js 강의
- 패스트캠퍼스 Vue.js 정복캠프 강의
- Google 웹 기술 공식 사이트 번역자
- 기술 블로그, Github
인프런이 만난 사람 #02 | 장기효님 인터뷰 보러가기
강의 수익금으로 Vue.js 오픈소스와 생활 코딩을 후원합니다 😁
지식공유자가 알려주는
강의 수강 꿀팁!
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
이런 분들께
추천드려요!
프런트엔드 입문 개발자
퍼블리셔
백엔드 개발자
디자이너
대학생
📚
선수 지식,
필요한가요?
선수 지식,
필요한가요?
HTML
CSS
Javascript
안녕하세요
장기효(캡틴판교) 입니다.
장기효(캡틴판교) 입니다.
인프런에서 5년째 지식을 공유하고 있습니다. 지금까지 많은 응원과 격려를 보내주신 만큼 앞으로도 더 좋은 컨텐츠로 찾아뵙겠습니다. 감사합니다 😄 프런트엔드 개발 상담소 바로가기(매주 토요일 오후 3시 30분 유튜브 생방송 진행)
커리큘럼
총 68개 ˙ 5시간 25분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 개발 환경 설정
5강 ∙ 14분
섹션 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분
섹션 3. 컴포넌트
6강 ∙ 19분
섹션 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일)
수강평
총 564개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.9
564개의 수강평
5점
4점
3점
2점
1점
VIEW
좋아요 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순

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

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

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

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

새롭게 공부하려고 하던 참에, 새로운 강의가 등록되어서 바로 시작했습니다.
내용도 좋고... ^^ 무엇보다도 목소리도 또렸하게, 그리고 화면도 중요 순간에는 확대되어 보여주는 등 구성도 세심하게 신경 써 주셔서 좋네요.
vue 강의로는 역시 캡틴 판교 장기효 님이에요. ^^ ~~ 중급도 배우고 싶어요. ^^
2019-06-15
장기효(캡틴판교)님의 다른 강의
지식공유자님의 다른 강의를 만나보세요!
비슷한 강의
같은 분야의 다른 강의를 만나보세요!
비전공자를 위한 진짜 올인원 개발 클래스
₩143,000
몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!