16,500원
중급자를 위해 준비한
[웹 개발, 프론트엔드] 강의입니다.
타입스크립트를 이용해서 한단계 업그레이드 된 Vue 어플리케이션을 개발할 수 있도록 도움을 주는 강좌입니다. Vue.js 기초 강좌와 ES6 또는 타입스크립트 입문자이신 개발자 분들께 이 강좌를 추천드립니다.
✍️
이런 걸
배워요!
이런 걸
배워요!
Vue.js와 Typescript를 이용해서 웹 어플리케이션을 개발할 수 있다.
타입스크립트를 이용해서 한단계 업그레이드 된 Vue 어플리케이션을 개발할 수 있도록 도움을 주는 강좌입니다.
Vue.js 기초 강좌와 ES6 또는 타입스크립트 입문자이신 개발자 분들께 이 강좌를 추천드립니다.
최근, 구글의 Angular에서 타입스크립트를 공식 언어로 지정할 만큼 타입스크립트의 위상이 높아져가지만,
아직도 러닝커브때문에 도입을 꺼려하시는 분들이 많습니다.
이 강좌는 왜 타입스크립트를 선택해야하는지, 과연 나의 프로젝트에 타입스크립트를 도입하는것이 올바른지에 대한 선택을 도와드립니다. 또한, 이 강좌를 통해 Vue.js 어플리케이션에서 타입스크립트 스타일로 개발하는 방법을 배워나갈 수 있습니다.
이 강좌는 크게 4가지의 주제로 구성되어 있습니다.
1. Typescript 선택가이드
2. Class-based 컴포넌트 만들기
3. Typescript를 이용해 Vuex 설계하기
4. 실전프로젝트 (Todo-list)
이런 분들께 추천드려요!
🎓
학습 대상은
누구일까요?
학습 대상은
누구일까요?
Vue.js 에 타입스크립트를 사용하려는 개발자
Vue.js 의 프로젝트를 장기간 유지보수하는 실무자
Vue.js 로 규모가 큰 프로젝트 개발을 하고자하는 실무자
📚
선수 지식,
필요할까요?
선수 지식,
필요할까요?
ES6의 문법을 알고있거나 typescript 초급
Vue.js 초급
안녕하세요
성도희 입니다.
성도희 입니다.
자바스크립트로 프론트엔드도 개발하고 백엔드도 개발하는 자바스크립트 개발자입니다. 😎
개발과 관련된 질문은 언제나 환영하오니 편하게 이메일로 연락주세요!
📌blog : https://seongdohee.github.io/
📌email : seong0420hei@gmail.com
커리큘럼
총 21 개
˙ 3시간 41분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의 소개
2 강
∙ 10분
오리엔테이션
미리보기
02:36
왜 Typescript를 선택할까요?
07:59
섹션 1. 개발환경 설정
2 강
∙ 14분
vue-cli로 Typescript 프로젝트 생성하기
05:25
프로젝트 구조 설명 및 설정
09:28
섹션 2. Class-Based 컴포넌트 만들기
7 강
∙ 54분
@Component로 컴포넌트 만들기
07:15
@Prop으로 데이터 전달하기
08:50
@Watch로 데이터 변화 감지하기
07:33
@Emit으로 이벤트 전달하기
06:28
@Provide/@inject로 데이터 전달하기
06:01
@Model 사용하기
10:38
Mixins 활용 방법
07:27
섹션 3. Interface로 Vuex 설계하기
3 강
∙ 38분
Vue의 데이터흐름과 Vuex
05:45
Vuex interface를 구현하여 Store 개발하기
17:12
Vuex Module Interface를 구현하여 Store 분리하기
15:33
섹션 4. 알아두면 좋은 Vuex 오픈소스
2 강
∙ 13분
vuex-module-decorator 사용하기
08:00
vuex-class 사용하기
05:09
섹션 5. 실전 프로젝트 (Todo-list)
5 강
∙ 1시간 29분
Todo-list 앱의 요구사항 분석하기
02:44
컴포넌트 조각들 개발하기
15:08
라우터 구조 잡기
16:52
Vuex Store 개발하기
33:07
Axios 연동하기 + 리팩토링
21:57
강의 게시일 : 2019년 06월 04일
(마지막 업데이트일 : 2019년 06월 04일)
수강평
총 33개
수강생분들이 직접 작성하신 수강평입니다.
4.5
33개의 수강평
5점
4점
3점
2점
1점
VIEW
추천 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
Vue 로 개발을 하면서, TypeScript 기반으로 어떻게 개발하는지 맛을보고싶었는데, 좋은 강의가 있어서 잘 들었습니다.
vue 3.0 이 빨리 나와서 저도 TS기반(좀 더 TS 친화적인?)에 SPA 개발을 하고싶네요!
감사합니다.
마지막 TODO 예제는 라우트에다 watch 를 달아서 처리를 했네요..
좋은 방식은 아니지만.. 그래도 원하는대로 동작하니.. 나중에 시간나면 좀 더 리팩토링 해보던가 이대로 두는걸로! ㅠㅠㅋㅋ
@Watch('$route')
public watchRouteParam(after: any, before: any) {
if (after.params.hasOwnProperty('path')) {
switch (after.params.path) {
case 'list-active' :
this.todoData = this.$store.getters.todoActiveItem;
break;
case 'list-clear' :
this.todoData = this.$store.getters.todoClearItem;
break;
}
} else {
this.todoData = this.$store.getters.todoItem;
}
}
2019-07-16