Thumbnail
강좌할인 중 (D-7)
BEST 개발 ・ 프로그래밍 웹 개발
Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
(4.9)
145개의 수강평 ∙ 1865명의 수강생

30%

53,900원

77,000원
지식공유자 : 장기효(캡틴판교)
총 96개 수업˙총 10시간 23분
평생 무제한 수강
수료증 발급 강의
중급이상 대상
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
내 목록 추가 775 공유
중급자를 위해 준비한
[개발 ・ 프로그래밍] 강의입니다.

Do it! Vue.js 입문 -> Vue.js 초급 강좌 -> Vue.js 중급 강좌의 계보를 잇는 Vue.js 실전 강좌입니다. Vue.js 를 실무에서 완벽히 활용 가능하도록 도와줄것 입니다.

✍️
이런 걸
배워요!
최신 뷰 CLI(v3.0)로 프로젝트를 구성하고 개발하는 방법
Vue Router 기본부터 실전, 그리고 고급 패턴까지
Axios를 이용한 API 호출 방법과 자바스크립트 비동기 처리
Vuex와 상태 관리에 대한 깊은 이해
User Experience를 고려한 데이터 호출 방법
Mixins와 High Order Component를 이용한 컴포넌트 재활용
외부 라이브러리를 프로젝트에 결합하는 방법
뷰 컴포넌트 Design Pattern

Vue.js Complete Guide

“Vue.js 완벽 가이드”
Do it! Vue.js 입문 → Vue.js 초급 강좌 → Vue.js 중급 강좌의 계보를 잇는 Vue.js 실전 강좌입니다. 실제 API로 웹 서비스를 만들어나가면서 Vue Router, Vuex를 비롯한 HTTP 통신 구현 방법과 외부 라이브러리 사용 방법, 컴포넌트 디자인 패턴 등 Vue.js를 실무에서 사용할 때 필요한 모든 기술과 지식을 알아봅니다.

“Vue 창시자, 에반 유에게 배운 그 내용”
Vue.js 창시자 Evan You의 오프라인 수업에서 익힌 고급 기술과 Vue 코어 팀 멤버들에게 전수 받은 지식을 그대로 녹여내었습니다. 잘하는 Vue.js 개발자들은 어떻게 코드를 작성하는지 이번 강의에서 함께 알아보겠습니다.

“단순 지식 전달형 강의는 이제 그만, 실습을 유도하는 대화형(Interactive) 강의"
단순히 코드만 따라쳐서는 내 것이 되지 않습니다. 간결한 이론 설명과 강사의 시범 구현 후 수강생분들과 함께 웹 서비스를 만들어나가는 대화형(Interactive) 강의를 지향합니다. 12개의 실습 예제를 통해 강사가 알려준 내용을 내 것으로 만들어보세요.

“입문자의 눈높이에서 바라보는 리팩토링(코드 개선)”
컴포넌트 기반 개발 방식보다 jQuery가 더 익숙한 입문자 분들의 눈높이에서 서비스를 설계하고, 같이 코드와 애플리케이션의 구조를 개선시켜나가며 컴포넌트 기반 사고력을 기릅니다. 실무에 바로 적용 가능한 코드를 함께 만들어봅니다.

 

강좌 특징

2년간 오프라인 수업에서 200명의 수강생을 가르치며 깨달은 입문자 관점으로 수업 교과과정을 구성하였습니다. 컴포넌트 기반 사고에 익숙하지 않은 분들이 자연스럽게 컴포넌트 기반 사고를 할 수 있도록 실습과 리팩토링을 수업 곳곳에 녹여내었습니다. 수업을 다 듣고 나면 한층 더 성장한 자신의 모습을 발견하실 수 있을거에요 :)

강의 교안 소개

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

먼저 공부하면 좋은 지식들

2. Vue.js 중급 강좌
웹앱 제작으로 배우는
Vue.js, ES6, Vuex
3. 쉽게 배우는 웹팩
프론트엔드 프레임워크
(리액트, 앵귤러, 뷰)에서 
필수로 사용되는 도구
4. Vue.js 고급 강좌
실습과 리팩토링으로
배우는 실전 기술
(현재 강좌)
5. Vue.js 활용 강좌
실무에 필요한 모든 것

Vue.js 전체 시리즈 강의 25% 할인 받기(클릭)
중학생, 고등학생, 대학생 학생 할인 50% 받기(클릭)

지식공유자 소개

장기효 (캡틴판교)

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

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

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
Vue.js로 새 프로젝트를 시작하는 실무자
Vue.js로 나만의 서비스를 만들고 싶은 프런트엔드, 백엔드 개발자
Vue.js를 더 잘 사용해보고 싶은 Vue.js 개발자
기초, 중급 강좌를 들었지만 아직은 서비스 개발이 낯선 퍼블리셔, 디자이너
취업용 포트폴리오를 준비하는 대학생
기술 인터뷰를 준비하는 이직 희망자

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

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

커리큘럼 총 96개 ˙ 10시간 23분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. ----- 오리엔테이션 -----
섹션 1. 제작할 앱 & API 소개 & Vue.js 스타일 가이드 소개
개발 환경 설정 및 비공개 리포지토리 주소 안내 01:51
VSCode 플러그인 목록 미리보기 06:27
Vue.js 스타일 가이드 및 코딩 컨벤션 소개 01:02
섹션 2. ----- 애플리케이션 제작 파트 -----
섹션 3. 소개 및 설계
제작할 사이트 및 API 소개 05:47
애플리케이션 라우터 설계 02:25
비공개 리포지토리 소개 및 뷰 CLI 설명 04:59
Vue CLI 2.x vs Vue CLI 3.x 미리보기 07:37
섹션 4. 프로젝트 셋업
Vue CLI로 프로젝트 생성 및 ESLint 로그 확인 미리보기 05:22
ESLint 도구 소개와 사용해야 하는 이유? 06:03
Vue CLI 3.x에서 ESLint 설정 끄는 방법 03:54
섹션 5. 라우터 기본
라우터 설치 및 라우터 구현 13:34
router-view를 이용한 라우팅 컴포넌트 표시 03:32
redirect 속성과 router-link 09:14
ToolBar의 라우터 링크 스타일링 06:57
[실습 안내] ItemView와 UserView 라우터 구현 미리보기 01:39
라우터 폴더 작명 팁과 라우터 mode 안내 01:49
섹션 6. API 구현
axios를 이용한 api 호출 미리보기 11:14
[실습 안내] axios의 api 함수 구조화 방법 및 실습 안내 12:42
[실습] JobsView와 AskView 구현 13:20
자바스크립트 this 4가지와 화살표 함수의 this 08:16
자바스크립트 비동기 처리(1) - Callback 07:17
자바스크립트 비동기 처리(2) - Promise 08:19
섹션 7. 스토어 구현
Vuex 설치 및 Vuex가 적용된 앱 구조 소개 미리보기 02:53
Vuex 모듈화 및 state 적용 06:52
NewsView에 actions와 mutations 적용 13:45
[실습 안내] JobsView와 AskView 실습 안내 01:26
[실습] JobsView에 스토어 적용 06:45
[실습] map 헬퍼 함수를 이용한 AskView 풀이 10:31
스토어 속성 모듈화 04:30
섹션 8. ----- 중간 정리 -----
중간 정리 및 스타일링 13:59
섹션 9. 라우터 실전
동적 라우트 매칭 원리 및 적용 10:00
라우터 params을 이용한 User 상세 페이지 구현 15:17
[실습] 질문 상세 페이지 구현 실습 안내 04:56
[실습] 질문 상세 페이지 실습 풀이 및 오류 디버깅 13:50
질문 상세 페이지 스타일링 및 v-html 디렉티브 사용법 소개 15:32
라우터 트랜지션 04:15
섹션 10. 리팩토링 1 - 리스트 아이템 컴포넌트 공통화
컴포넌트 공통화 리팩토링 소개 미리보기 01:38
[실습 안내] 뉴스 리스트 스타일링 14:38
[실습] 질문, 구직 리스트 스타일링 06:14
[실습 안내] 공통 컴포넌트 ListItem 제작 및 실습 안내 05:32
[실습] 공통 컴포넌트 구현(1) - 페이지별 데이터 분기 08:19
공통 컴포넌트 구현(2) - computed 속성 05:16
공통 컴포넌트 구현(3) - template 속성과 v-if 디렉티브 활용 1 03:21
공통 컴포넌트 구현(4) - template 속성과 v-if 디렉티브 활용 2 05:21
섹션 11. 리팩토링 2 - 사용자 프로필 컴포넌트 공통화
사용자 프로필 컴포넌트 소개 및 등록 미리보기 04:23
사용자 컴포넌트 데이터 흐름 처리 1 05:03
사용자 컴포넌트 데이터 흐름 처리 2 01:54
2가지 데이터 처리 흐름 비교 06:02
slot을 이용한 사용자 프로필 컴포넌트 구현 11:17
사용자 프로필 컴포넌트 스타일링 및 코드 정리 07:06
섹션 12. 리팩토링 3 - Mixin과 하이 오더 컴포넌트
컴포넌트 재활용 방법 및 재활용할 포인트 소개 미리보기 02:50
이벤트 버스를 이용한 스피너 컴포넌트 구현 11:08
스피너 실행 및 종료 시점 알아보기 06:37
하이 오더 컴포넌트(HOC) 소개 및 구현 08:38
하이 오더 컴포넌트에서 사용할 ListView 컴포넌트 구현 09:52
하이 오더 컴포넌트가 적용된 앱 구조 설명 및 흐름 정리 06:47
Mixin의 개요와 활용처 그리고 HOC와의 차이점 04:13
[실습 안내] Mixin 적용 후 HOC 구조와 비교 08:06
[실습] Mixin 실습 및 컴포넌트 재활용 방법에 대한 리뷰 02:55
섹션 13. 리팩토링 4 - 데이터 호출과 UX
UX를 고려한 데이터 호출 시점 07:28
라이프 사이클 훅을 이용한 데이터 호출 방법의 문제와 비동기 처리 코드 수정 09:22
라우터 네비게이션을 이용한 데이터 호출 방법 10:27
[실습] 라우터 네비게이션 가드 실습 안내 00:58
[실습] 라우터 네비게이션 가드 실습 및 스피너 종료 시점 변경 07:49
UX를 고려한 데이터 호출 시점 요약 정리 및 추가 고려 사항 안내 03:10
섹션 14. 리팩토링 5 - async & await를 이용한 비동기 처리
자바스크립트 비동기 처리 패턴의 발전 과정 08:20
async & await 문법 소개 03:36
async & await 예제 소개 05:32
async await 예제 실습 06:18
async await 에러 처리 방법과 공통화 함수 작성 방법 03:54
async 함수를 이용한 코드 리팩토링 03:55
[실습 안내] async await 실습 안내 00:55
[실습] async await 실습 풀이 08:19
섹션 15. ----- 애플리케이션 실전 파트 -----
섹션 16. 외부 라이브러리 모듈화 방법(차트)
라이브러리 모듈화의 이유와 배경 미리보기 05:13
차트 라이브러리 설치 및 차트 그리기 09:42
BarChart 컴포넌트화 작업 04:19
[실습] LineChart 실습 안내 01:10
[실습] LineChart 제작 및 차트 충돌 문제 해결 04:43
Vue에서 DOM을 접근하는 방법인 ref 속성 소개 06:05
Vue.js 플러그인 소개 및 차트 플러그인 제작 09:05
결합력 높은 차트 컴포넌트 모듈 제작 방법 10:01
섹션 17. 컴포넌트 디자인 패턴
Component Design Patterns 소개 02:22
Common Approach 06:15
Component with Slots - Slot vs Props 06:30
Component with Slots 구현 방법과 활용처 06:48
Controlled Component - Input 박스를 다룰 때 생기는 문제점 05:33
Controlled Component - 구현 방법과 활용처 05:51
Renderless Component - 소개 04:07
Renderless Component - Render Function 07:17
Renderless Component - 구현 방법과 활용처 06:41
섹션 18. 서비스 배포 환경 구성
서비스 배포를 위한 명령어 소개 및 실습 02:44
Netlify를 이용한 배포 실습 06:43
base 디렉토리 설정 및 배포 완료 03:46
SPA 호스팅시에 서버에 추가해줘야 하는 설정 안내 03:47
env 환경 변수 파일을 이용한 옵션 변경 방법 05:43
강의 게시일 : 2019년 01월 01일 (마지막 업데이트일 : 2019년 07월 14일)
수강평 총 145개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.9
145개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
이우진 thumbnail
와 강의 정말... 저는 이제 절반 듣고 있는데요! 저같은 경우에는 중급과 입문을 듣지 않고 바로 수강하고 있는 유형인 4학년 대학생입니다! 중급강의를 듣고 왔다면 확실히 높은 이해도로 들을 수 있을 것 같습니다만, 강사님께서 다시 한 번 설명을 해주시기 때문에 듣지않아도 일정 부분들 전부 이해할 수 있었습니다! 그래도 중급강의 듣고 오시는게 더 잘 이해된다는 것은 확실합니다. 실무적인 부분들, 강사님의 꿀팁들이 녹아들어가있는 강의인 만큼..., 개념 설명도 세세하게 잘해주시고, 제가 어라? 이건 왜 이렇게 되는거지? 할 때 쯤 그냥 바로 말씀해주시는게 놀라웠습니다... 내가 한 소리가 들리는건가 싶을 정도로요. 정말 돈이 아깝지가 않습니다. 이 강의 끝나고 알바 월급들어오면 바로 강사님의 webpack 강의와 PWA강의를 함께 들을 예정입니다!!! 곧 있을 해커톤 대회에서 장기효 강사님께 배운 vue.js, 배운 그대로 활용해서 우승하고 오겠습니다!!! 좋은 강의 감사합니다!
2019-05-06
Yu Jae Seung thumbnail
vue.js를 통해 유연하고 구조화된 웹 프로젝트를 진행하는데 큰 도움이 될 것 같습니다. angular1을 사용해 웹프로젝트를 진행해오다 angular2에서부터 시작된 ES6와 컴포넌트등 신문물을 받아들이지 못하고 방황하던 중, vue.js의 매력이 이끌려 판교님 강좌를 기초부터 차례차례 수강해서 여기까지 오게 되었네요. 혹자는 기초강의 없이 완벽가이드에서 모든 내용을 다루기 대문에 기초강의는 건너띄어도 된다 하지만, 기초부터 착실하게 다지기 위해서는 기초강의 + 중급강의까지 완주행 하는게 좋다고 개인적으로 생각합니다. 앞서 배운것들을 잊어버리지 않게 하기위해 반복해서 복기시켜주고, 예제를 통해 실무에서 바로바로 적용할 수 있는 유용한 개발팁들 또한 많이 실려있는 것 같습니다. 이제 곧 vue.js를 이용하여 새로운 프로젝트를 시작하려 하는데 매우 설레이고 기대가 됩니다. 머리속에 수많은 컴포넌트들이 둥실둥실 떠다니고 있는데 구현하려면 인고의 시간이 필요하겠죠? ㅎㅎㅎ; 모두 열공 하시기 바랍니다~^^
2019-02-25
지식공유자장기효(캡틴판교)
열심히 수강해주셔서 감사합니다 재승님 :) 지난 주부터 중급 강좌, 완벽 가이드 강좌 모두 열심히 듣고 질문 많이 해주시더니 수강평까지 좋게 남겨주셨네요 :) 새 프로젝트에서도 배운 내용 잘 활용하셔서 재밌게 프로젝트 진행하셨으면 좋겠습니다. 다른 분들을 위해 솔직한 의견 주셔서 감사하구요. 오늘 컴포넌트 디자인 패턴과 async 함수 쪽 강의 마저 업로드 했으니 재밌게 들으세요 :) 감사합니다 재승님!
2019-02-25
Israpel thumbnail
완주까지 쉽진 않았지만 알찬 내용이었습니다. 조금 아쉬운 점이 있다면 말씀 하시는 방식에서 '이게', '저게', '이렇게', '저렇게' 이런식으로 명사를 지칭하지 않고 약간 두루뭉술하게 빨리 지나가는 경우가 있습니다. 그러다보니 강의를 멈추고 앞으로 돌려본 적이 여러번 있었네요. 고생 많으셨습니다.
2020-03-25
장현우 thumbnail
안녕하세요. 저는 현재 어떤 회사에서 인턴으로 일하고 있는 신입 개발자입니다. 현재 회사에서 프로젝트를 진행하는데 프론트엔드를 무엇을 쓸까 고민하다가 Vue.js를 써보고자 이번 인프런 강의를 듣게 되었습니다. 저 같은 경우 원래 리액트를 자주 쓰고 있었고 책 "Do it! Vue.js 입문"을 읽어본 이력이 있어서인지 강의를 매끄럽게 잘 이해할 수 있었습니다. 처음 강의를 신청할 땐 솔직히 "뭐 이리 비싸" 라는 생각을 가지고 있었는데 완강을 한 지금은 "돈이 아깝지 않은 강의"라고 생각합니다. 뷰 기초부터 응용까지, 그리고 css 쉽게 작업하는 방법, 컴포넌트 디자인 패턴, 뷰 애플리케이션 배포 등 여러 꿀팁까지. 캡틴 판교님의 강의를 만들기 위한 여러 노력들을 엿볼 수 있었습니다. 이런 좋은 강의 만들어주셔서 감사합니다.
2019-07-14
김넋둘 thumbnail
여러 인강을 들어봤는데 강의의 흐름이 너무 좋고 작은것 부터 시작해서 계속 바꿔 나가는 형태의 강의 스타일이 정말 좋았습니다! 흐름이 끊기는 부분이나 갑자기 내용이 산으로 간다던지 그런 부분도 없어서 강의 준비를 많이 하신 분 같습니다. 인강은 작년에 결제했는데 현 시점에 필요한 강의라 최근 몰아서 완강했어요. 실무에 적용하게 된 부분들도 많아서 정말 많은 도움이 됐습니다. 감사합니다!!!!! 다른강의도 필요하면 캡틴판교님 강의는 꼭 들어보겠습니다
2020-04-20
강좌할인 중 (D-7)

30%

53,900원

77,000원
내 목록 추가 775 공유
지식공유자 : 장기효(캡틴판교)
총 96개 수업˙총 10시간 23분
평생 무제한 수강
수료증 발급 강의
중급이상 대상
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스