24%
37,130원
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
중급자를 위해 준비한
[웹 개발, 프레임워크 및 라이브러리] 강의입니다.
[웹 개발, 프레임워크 및 라이브러리] 강의입니다.
Vue.js 중급 강좌 - '누구나', '쉽게', '훌륭한' 웹 어플리케이션을 만들 수 있도록 도와주는 Vue.js 활용 강좌 입니다. Vue.js 에 대한 기본적인 이해를 바탕으로 Todo 앱을 만들어 보며 코드 중심의 실용적인 지식을 배우게 됩니다.
✍️
이런 걸
배워요!
이런 걸
배워요!
웹 개발
Javascript
Vue.js
뷰 최신 CLI 도구 특징을 알 수 있어요
컴포넌트 기반 웹 앱 설계 방법을 배울 수 있습니다
컴포넌트 설계 방법
ES6 (const & let, 화살표 함수, 향상된 객체 리터럴, 모듈 등)
Vuex (state, getters, mutations, actions, modules 등)
1. Vue.js 중급 강좌 소개
Vue.js의 기초를 다진 입문자들이 중, 고급 레벨의 뷰 개발자로 성장하는데 도움을 주는 강좌입니다. 누구나 다루기 쉬운 Vue.js 기초 강좌와 Do it! Vue.js 입문 서적을 읽으신 분들이 이어서 듣기에 가장 좋습니다. 이제 막 Vue.js가 재밌어지기 시작하신 분들, 웹 개발에 흥미가 생기신 분들께 강력 추천합니다 :) 컴포넌트, 인스턴스, 싱글파일 컴포넌트는 뭔지 알겠는데 실제로 앱을 만들려니 답답하신 분들이 차근히 애플리케이션을 만들어나갈 수 있게 도와드립니다. ES6가 뭔지 모르겠는데 업무에서 ES6로 된 뷰 코드를 보셔야 하는 분들께 쉽고 빠르게 ES6를 배우는 방법을 알려드립니다.
마지막으로, 애플리케이션이 좀 커져서 컴포넌트를 효율적으로 관리하고 싶은 분들께 Vuex를 쉽고 간단하게 배우는 방법을 소개합니다. 전체적인 강의 방식은 코드 중심의 학습형 강좌 형태로 구성되어 있습니다. 뷰 기초 개념으로 Todo 앱을 제작하며 컴포넌트 기반 설계 방법과 구조화 방법을 익힌 후, ES6의 개념을 학습하여 애플리케이션 코드에 적용함으로써 애플리케이션 코드를 개선해나갑니다. Vuex의 주요 기술 요소들을 학습하고 Todo 앱을 다시 리팩토링하면서 배운 내용들을 직접 코드에 적용해보는 실전형 강의입니다.
이 강좌는 다음과 같이 크게 3가지 파트로 나뉩니다.
- Vue.js로 구현하는 Todo App
- 깔끔한 Vue.js 코드를 위한 ES6
- 복잡한 애플리케이션을 구현하기 위한 Vuex
"Vue.js의 초점은 더 많은 사람들이 쉽게 웹 앱을 개발하도록 도와주는데에 있다."
2. 누구에게 도움이 되나요?
Vue.js 기초 지식이 있고, 프론트엔드 개발에 관심있는 모든 분께 적합합니다.
- Vue.js 학습 시간을 아껴 바로 실무에 쓰고 싶은 개발자
- 프론트엔드 개발에 입문하신 분
- 프론트엔드 개발을 해보고 싶은 디자이너
- 프론트엔드 개발자로 전향하고픈 퍼블리셔
- 프론트엔드 개발자로 취업을 희망하는 대학생
※ 다만 HTML, CSS, JS 및 Vue.js의 기초를 알고 계셔야 효율적으로 학습 하실 수 있습니다.
3. 어떤 걸 배우나요?
Vue.js 중급 강좌 로 실제 서비스를 개발할 때 필요한 컴포넌트 기반 프로젝트 구조화 방법과 컴포넌트 설계 방법을 배우고, Vue.js 코드를 간편하게 짤 수 있는 ES6의 주요 특징들에 대해서 살펴봅니다. 실무에서 필연적으로 사용하게 되는 상태 관리 라이브러리 Vuex 역시 심도 있게 학습합니다.
- 뷰 최신 CLI 도구 특징
- 컴포넌트 기반 웹 앱 설계 방법
- 컴포넌트 설계 방법
- ES6 (const & let, 화살표 함수, 향상된 객체 리터럴, 모듈 등)
- Vuex (state, getters, mutations, actions, modules 등)
4. 강좌 특징
인프런 기초 강좌와 입문 서적으로 Vue.js 기초 개념을 익힌 분들이 자연스럽게 이어 들을 수 있도록 준비한 강좌입니다. 본 vue.js 강좌 전반부는 별도의 이론 설명 없이 바로 애플리케이션을 설계하고 구현하면서 Vue.js 화면 개발의 감을 잡게 됩니다.
이후에는 제작한 애플리케이션의 문제점을 살펴보며 코드 리팩토링을 통해 애플리케이션 구조를 개선합니다. 강의의 중반부부터 나오는 ES6와 Vuex는 실무에서 많이 활용되는 기술로 입문서에서 깊게 다루지 않았던 내용들입니다. ES6와 Vuex의 개념을 쉽고 빠르게 파악하실 수 있도록 이론 설명 -> 준비된 예제로 실습 -> 애플리케이션에 적용 하며 리팩토링 형태로 강의를 진행합니다.
※ ES6와 Vuex가 쉽지 않은 주제인 만큼 더 공을 들여 최대한 쉽게 설명하려고 노력하였습니다 :)
5. 강의 교안 소개
학습하시면서 아래 사이트도 함께 참고해보세요 :)
6. 추천 학습 로드맵
Vue.js 전체 시리즈 강의 25% 할인 받기(클릭)
중학생, 고등학생, 대학생 학생 할인 50% 받기(클릭)
7. 지식공유자 소개
장기효 (캡틴판교)
- (현) 프런트엔드 개발자
- Do it! Vue.js 입문 저자
- 네이버, 이베이 코리아, 삼성, LG, SK 그룹 Vue.js 강의
- 패스트캠퍼스 Vue.js 정복캠프 강의
- Google 웹 기술 공식 사이트 번역자
- 기술 블로그
- Github
인프런이 만난 사람 #02 | 장기효님 인터뷰 보러가기
"강의 수익금으로 Vue.js 오픈소스와 생활 코딩을 후원합니다 😁"
지식공유자가 알려주는
강의 수강 꿀팁!
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
이런 분들께
추천드려요!
Vue.js 기초 지식이 있고, 프론트엔드 개발에 관심있는 모든 분께 적합합니다.
Vue.js 학습 시간을 아껴 바로 실무에 쓰고 싶은 개발자
프론트엔드 개발에 입문하신 분
프론트엔드 개발을 해보고 싶은 디자이너
프론트엔드 개발자로 전향하고픈 퍼블리셔
프론트엔드 개발자로 취업을 희망하는 대학생
안녕하세요
장기효(캡틴판교) 입니다.
장기효(캡틴판교) 입니다.
인프런에서 5년째 지식을 공유하고 있습니다. 지금까지 많은 응원과 격려를 보내주신 만큼 앞으로도 더 좋은 컨텐츠로 찾아뵙겠습니다. 감사합니다 😄 프런트엔드 개발 상담소 바로가기(매주 토요일 오후 9시 30분 유튜브 생방송 진행)
커리큘럼
총 63
개 ˙ 6시간 50분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의 오리엔테이션
2
강 ∙ 17분
강의 소개
미리보기
10:16
개발 환경 설정 및 깃헙 리포지토리 클론
06:49
섹션 1. Todo App - 프로젝트 소개 및 구성
2
강 ∙ 10분
뷰 CLI로 프로젝트 생성하기
07:06
프로젝트 소개 및 컴포넌트 설계 방법
03:20
섹션 2. Todo App - 프로젝트 구현
11
강 ∙ 1시간 36분
컴포넌트 생성 및 등록하기
미리보기
12:15
파비콘, 아이콘, 폰트, 반응형 태그 설정하기
05:21
TodoHeader 컴포넌트 구현
05:22
TodoInput 컴포넌트의 할 일 저장 기능 구현
09:51
TodoInput 컴포넌트 코드 정리 및 UI 스타일링
09:18
TodoList 컴포넌트의 할 일 목록 표시 기능 구현
10:18
TodoList 컴포넌트 UI 스타일링
04:49
TodoList 컴포넌트 할 일 삭제 기능 구현
07:32
TodoList 컴포넌트의 할 일 완료 기능 구현
24:53
TodoFooter 컴포넌트 구현
04:00
깃헙 브랜치 안내
02:28
섹션 3. Todo App - 애플리케이션 구조 개선하기
7
강 ∙ 38분
현재 앱 구조의 문제점 진단 및 개선된 앱 구조 소개
미리보기
04:55
[리팩토링] 할 일 목록 표시 기능
05:13
[리팩토링] 할 일 추가 기능
07:52
[리팩토링] 할 일 삭제 기능
06:10
[리팩토링] 할 일 완료 기능
05:43
[리팩토링] 할 일 모두 삭제 기능
03:17
리팩토링이 완료된 애플리케이션 정리
05:21
섹션 4. Todo App - 사용자 경험 개선
4
강 ∙ 31분
모달 컴포넌트 등록
09:02
[퀴즈] 모달 컴포넌트의 slot 소개 및 퀴즈 안내
08:15
[퀴즈] slot 퀴즈 풀이 및 모달 컴포넌트 기능 구현
05:48
트렌지션 소개 및 구현
08:21
섹션 5. 강의 중간 정리
1
강 ∙ 2분
섹션 6. ES6 for Vue.js - 오리엔테이션
2
강 ∙ 7분
ES6 강의 개요 및 목표 소개
02:37
ES6 배경과 Babel 소개
05:06
섹션 7. ES6 for Vue.js - const & let
4
강 ∙ 24분
const & let 소개
04:03
[ES5의 주요 특징]변수 스코프와 호이스팅
09:53
const와 let 추가 설명 및 정리
06:25
[리팩토링] const와 let
04:03
섹션 8. ES6 for Vue.js - 화살표 함수
2
강 ∙ 9분
화살표 함수 소개 및 설명
04:29
화살표 함수 실습
05:04
섹션 9. ES6 for Vue.js - Enhanced Object Literals
4
강 ∙ 8분
속성 메서드의 축약 특징 설명
03:04
[리팩토링] 속성 메서드의 축약 특징 리팩토링
02:46
속성명의 축약 특징 설명
00:57
[리팩토링] 속성명의 축약 특징 리팩토링
01:41
섹션 10. ES6 for Vue.js - Modules
1
강 ∙ 6분
Modules
06:11
섹션 11. Vuex - 소개
3
강 ∙ 21분
Vuex 소개
미리보기
04:12
Flux와 MVC 패턴 소개 및 Flux 등장 배경
08:27
Vuex가 필요한 이유, Vuex 컨셉, Vuex 구조
09:16
섹션 12. Vuex- 주요 기술 요소
10
강 ∙ 1시간 10분
Vuex 설치 및 등록
05:39
state와 getters 소개
05:12
[리팩토링] state 속성 적용
09:44
mutations와 commit() 형식 소개
05:15
[리팩토링&퀴즈] mutations 적용 및 퀴즈 안내
11:47
[리팩토링&퀴즈] mutations 퀴즈 풀이 및 할 일 지우기 기능 구현
08:24
[리팩토링] mutations로 할 일 추가, 완료, 모두 삭제 구현
10:37
왜 mutations로 상태를 변경해야 하는가?
03:42
actions 소개 및 예제
07:35
왜 actions에 비동기 로직을 선언해야 하는가?
02:12
섹션 13. Vuex - 헬퍼 함수
8
강 ∙ 50분
헬퍼 함수 및 ES6 Spread 연산자 소개
08:53
mapState, mapGetters 소개 및 ES6 Spread 연산자 쓰는 이유
05:35
[리팩토링] getters와 mapGetters 적용하기
06:52
mapMutations, mapActions 소개 및 헬퍼의 유연한 문법
04:57
[리팩토링 & 퀴즈] mapMutations 적용 및 퀴즈
06:01
[리팩토링 & 퀴즈] mapMutations 퀴즈 풀이
03:24
헬퍼 함수가 주는 간편함
07:11
뷰엑스로 리팩토링한 애플리케이션 구조 분석 및 정리
07:23
섹션 14. Vuex - 프로젝트 구조화 및 모듈화
2
강 ∙ 16분
스토어 속성 모듈화 방법
09:09
스토어 모듈화 방법
07:01
강의 게시일 : 2018년 04월 14일
(마지막 업데이트일 : 2019년 02월 06일)
수강평
총 296개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.9
296개의 수강평
5점
4점
3점
2점
1점
VIEW
좋아요 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
중급 다 듣기도 전에 전체 로드맵 짜주신 강의들 다 ~~ 신청해버렸어요 ㅎㅎㅎ
잘 가르쳐 주셔서 감사합니다! 나머지 강의들도 열심히 따라가겠습니다!!!^ㅇ^
2020-05-02
todo앱 만들기를 vue로 구현해보면서 기존 js, jquery로 하는 방식과 어떤점이 다른지 확인할 수 있는 시간이었고 단계별로 코드가 어떻게 간소화 되는지 설명을 잘해주셔서 좋았습니다.
다만 구현된 todo앱이 초보자들이 보기 쉬운 코드로 만드신 것 같아 조금 아쉬워서 기능이랑 데이터를 저장하는 방식을 좀 바꿔서 구현해보았습니다. 배열하나로 todo 목록을 다 관리할 수 있게 로컬스토리지에 저장하였구요. 키값은 중복되면 안된다고 생각되어 중복검사를 해서 카운트를 올려주었습니다. 별도 추가된 기능은 필터링, 카운트, 메뉴바, 테마변경 등을 추가하였습니다.
추가된 기능은 공식사이트에 있는 예제를 참고하였습니다.
https://vuejs.org/v2/examples/todomvc.html
2020-03-12
개념을 잡기에 아주 좋은 강의라고 생각합니다.
컴포넌트화와 vue에 대한 개념을 더욱 단단하게 하기에도 좋지만, 그것 보다 vuex에 대한 설명이 정말 좋았습니다.
2020-04-07
초급 강좌를 이어 중급 강좌까지 모두 마쳤는데 이해도와 학습자료가 충분하여 만족 하였습니다.
다음편도 이어 듣겠습니다.ㅋ
2020-05-06
블로그부터 이 강의까지 정말 많은도움이 됐습니다 ㅎㅎ
하지만 초보 입장에서 아쉬웠던 부분이 있습니다
일단 강의 마지막업데이트가 좀 오래전에된거같습니다.
마지막 업데이트일자가 19년2월인데 지금시점에서보면 거의 2년이네요 ㅜㅜ 그래서 그런지, 강의중간에 안내가되고있긴하지만 vue 프로젝트 시작명령어부터, 기본 파일구조등등 강의와 다른부분이 가끔 나와서 초보자입장에서 혼란스러울때가있습니다.
그리고 NG라고해야될까요? 인프런대표님한테 카톡오는 알람이 화면에 뜨는거랑ㅋㅋㅋ, 말이꼬이는부분, 파일생성했다가 아 필요없겠구나 하면서 다시 삭제하는부분등등은 컷편집이라도 해주시면 집중에 더 좋을거같습니다
2020-12-28
24%
37,130원
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
장기효(캡틴판교)님의 다른 강의
지식공유자님의 다른 강의를 만나보세요!
비슷한 강의
같은 분야의 다른 강의를 만나보세요!
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!
