88,000원
월 17,600원
5개월 할부 시
중급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.
Vue.js에서 타입스크립트를 시작하는 분들을 위한 최고의 강의. 2개의 실습 프로젝트로 재밌게 배워보는 Vue.js + 타입스크립트 완전 정복. 배우면서 바로 실무에 적용해 보세요! 😄
✍️
이런 걸
배워요!
이런 걸
배워요!
Vue.js TypeScript
타입스크립트
Vue.js 실무 개발
재활용성 높은 컴포넌트 설계 방법
명불허전! 캡틴판교와 함께하는
Vue.js + Typescript FE 완전 정복 🚀
인프런 누적 수강생 8,000명 돌파 인기 강의
캡틴판교 타입스크립트 시리즈, 책으로 재탄생!
2023 『쉽게 시작하는 타입스크립트』 출간
자바스크립트 코드의 품질과 개발 생산성을 높여주는 타입스크립트, 강의와 함께 책으로 학습해보세요!
Vue와 타입스크립트를
한 번에 배워봐요 🪐
Vue.js로 웹 애플리케이션을 만드는데 익숙해지셨나요? 그렇다면 이제는 타입스크립트를 배울 차례입니다. 타입스크립트로 내가 만든 기능을 더 단단하게 만들고, 다른 사람이 더 쉽게 코드의 내용을 파악할 수 있게 해볼까요? 여러분의 Vue.js 프런트엔드 개발을 한층 더 재밌게 해줄 Vue.js + TypeScript 강의를 지금 바로 수강해보세요.
강의 구성은
이렇게 되어있어요 📚
- Vue.js에서 타입스크립트를 시작하는 방법
- 기존에 제작해 놓은 Vue.js + 자바스크립트 프로젝트에 타입스크립트를 점진적으로 적용하는 방법
- 실무 Vue.js 코드에 타입스크립트를 바로 적용할 수 있는 꿀팁과 노하우
- 재활용성이 뛰어난 Vue.js 단위 컴포넌트 제작 방법
- Vue 3을 준비하는 자세
강의에서 다루는
2개의 프로젝트 🎲
[첫 번째 프로젝트]
할 일 관리(To-do) 앱
[두 번째 프로젝트]
뉴스, 구직 게시판 앱
예상 Q&A 🙋🏻♂️
Q. Vue.js를 처음 시작하는데 이 강의를 들어도 될까요?
이 강의는 기초 강의가 아닙니다. 캡틴판교의 Vue.js 학습 로드맵을 모두 수강하신 분들이 들으실 수 있습니다. 선수 과목을 모두 수강하지 않은 분께는 적합하지 않은 강의이니 선수 과목을 먼저 학습해 주세요!
Q. Vue 3이 새로 나왔던데, 이 강의는 Vue 3 버전으로 진행되나요?
아니요, Vue 2 버전으로 진행합니다. 하지만 강의에서 배운 내용을 그대로 Vue 3 버전에서 사용할 수 있습니다. 현재 Vue 3 생태계가 성숙하지 못한 점으로 인해 실무에서 바로 사용할 수 있는 Vue 2 버전으로 진행합니다. 강의 후반부에는 Vue 3에 타입스크립트를 적용하는 방법에 대해서도 간단히 안내를 하니 참고해 주세요.
Q. 타입스크립트를 전혀 모르는데 이 강의를 들어도 될까요?
이 강의는 타입스크립트 선수 강의(입문, 실전)를 모두 수강하신 분들께 적합한 강의입니다. 강의에서 다루는 타입스크립트 기본 코드는 별도로 개념을 알려드리지 않으니 타입스크립트 선수 강의를 꼭 수강하고 들어주세요!
Q. 실무에서 자바스크립트만으로 잘 개발하는데 타입스크립트도 학습해야 할까요?
복잡한 웹 애플리케이션을 여러 명이서 개발해보신 경험이 있다면 아마 문서화가 잘 된 코드, 가독성이 높고 한눈에 의미를 파악하기 쉬운 코드를 선호하실 거라고 생각합니다. 타입스크립트는 이러한 장점들을 극대화시킬 뿐만 아니라 코드를 쉽게 작성하도록 도와주고 향후 애플리케이션을 실행했을 때의 버그도 미리 줄여줄 수 있습니다. 학습해보시면 개발하는 게 더 편해지실 거예요!
📢 수강 전 꼭 확인해주세요!
- 본 강의는 위 두 개의 로드맵 전체를 모두 수강한 학습자가 들을 수 있도록 구성한 강의입니다. 선수 지식을 반드시 확인해주세요!
연관 로드맵 🚎
Vue.js와 TypeScript로 정복하는 프론트엔드 개발
캡틴판교님의 뷰 + 타입스크립트로 한 번에
배우는 강의들로 구성된 로드맵입니다.이 강의 포함
지식공유자 소개 👨🏫
장기효 (캡틴판교)
- 현 프론트엔드 개발자
- "Do it! Vue.js 입문" , "쉽게 시작하는 타입스크립트" 저자
- 네이버, 이베이코리아, 삼성, LG, SK그룹 등 Vue.js 강의
- 패스트캠퍼스 Vue.js 정복캠프 강의
- Google 웹 기술 공식 사이트 번역자
- 기술 블로그, Github
"인프런이 만난 사람" 인터뷰
“강의 수익으로 Vue.js 오픈소스 +
생활코딩을 후원합니다 😁”
이런 분들께 추천드려요!
🎓
학습 대상은
누구일까요?
학습 대상은
누구일까요?
프런트엔드 개발자
Vue.js에서 타입스크립트를 처음 시작하는 분들
Vue.js 학습 로드맵을 모두 수강하고 다음 강의를 기다리시는 분들
📚
선수 지식,
필요할까요?
선수 지식,
필요할까요?
Vue.js
TypeScript
안녕하세요
장기효(캡틴판교) 입니다.
장기효(캡틴판교) 입니다.
인프런에서 8년째 지식을 공유하고 있습니다.
📗 Do it! Vue.js 입문, 쉽게 시작하는 타입스크립트, 나는 네이버 프런트엔드 개발자입니다. 책 3권 집필
📖 Cracking Vue.js, 타입스크립트 핸드북, 웹팩 핸드북. 온라인 무료 가이드북 3권 집필
👨💻 캡틴판교의 프론트엔드 개발 유튜브 채널 운영 - 취준생, 주니어 개발자들의 고민을 들을 수 있는 곳
🥤 캡틴판교의 카카오톡 오픈 채팅방 운영 - 프런트엔드 개발 최신 정보와 업계 동료들의 생각을 들을 수 있는 곳
커리큘럼
총 84 개
˙ 8시간 2분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의 오리엔테이션 및 개발환경 설정
2 강
∙ 10분
섹션 1. 첫 번째 프로젝트 시작하기
4 강
∙ 24분
섹션 2. 할 일 관리 앱 - 추가 기능 구현
8 강
∙ 39분
구현할 기능 리스트업 및 뷰 TS 컴포넌트 단축키 안내
03:31
인풋 컴포넌트 생성 및 등록
05:01
인풋 컴포넌트에 내려줄 data와 props 속성 정의
05:59
인풋 컴포넌트의 emit 이벤트 정의 및 구현
08:06
할 일 추가 버튼 기능 구현
03:48
v-model을 풀어서 구현하는 방식의 장점
04:17
인풋 컴포넌트 프롭스 속성 유효성 검사 및 타입 정의
06:06
Vetur 플러그인의 컴포넌트 태그 자동 완성 설정
02:39
섹션 3. 할 일 관리 앱 - 조회 기능 구현
5 강
∙ 28분
할 일 아이템 목록 컴포넌트 설계 및 구현
04:13
데이터 조회 API 설계
06:36
데이터 조회 API 타입 에러와 JSON 파싱 에러 해결
06:31
할 일 추가 API 설계 및 구현
07:23
할 일 조회 기능 구현
03:20
섹션 4. 할 일 관리 앱 - 삭제 기능 구현
2 강
∙ 7분
삭제 기능 마크업 및 이벤트 연동
06:18
할 일 삭제 API 연동 및 구현
01:41
섹션 5. 할 일 관리 앱 - 완료 기능 구현
5 강
∙ 26분
할 일 완료 기능 마크업 및 스타일링
04:45
할 일 목록의 데이터 타입 정의 및 할 일 추가 기능에 적용
06:51
props 타입 정의 방법
03:06
할 일 완료 기능 구현
06:42
할 일 완료 클래스 바인딩 및 computed 타입 정의 방식 안내
05:26
섹션 6. 할 일 관리 앱 - 정렬 기능 구현
2 강
∙ 11분
할 일 목록 정렬 기능 구현
06:07
할 일 목록 정렬 관련 타입 오류 해결 및 타입 정의 완료
04:57
섹션 7. 첫 번째 프로젝트 요약
1 강
∙ 8분
첫 번째 프로젝트 요약 정리
08:35
섹션 8. 두 번째 프로젝트 시작하기
2 강
∙ 6분
두 번째 프로젝트 오리엔테이션
02:07
두 번째 프로젝트 안내
04:04
섹션 9. 실 서비스에 타입스크립트를 적용하는 방법 2가지
3 강
∙ 20분
프로젝트에 타입스크립트 플러그인 추가
06:42
프로젝트 구성 및 실행 결과 확인
10:06
타입스크립트 프로젝트 진행 방식 안내
03:23
섹션 10. 점진적인 타입스크립트 적용 방식 1단계 - 라우터, HOC, 유틸 함수
5 강
∙ 31분
프로젝트 빌드 에러 해결
05:14
App.vue에 타입스크립트 적용 및 strict 옵션 참고 사항
06:27
유틸성 파일에 TS 적용 및 주요 TS 적용 포인트 안내
03:35
라우터 파일에 TS 적용 및 라이브러리 내부 타입 선언 파일 설명
10:26
HOC 파일에 TS 적용 및 라우터 네비게이션 함수 로직 개선
05:38
섹션 11. 점진적인 타입스크립트 적용 방식 2단계 - 컴포넌트, API 함수
7 강
∙ 46분
스토어 상태 관리에 대한 주의 사항 안내
06:22
API 파일에 타입스크립트 적용 및 호출 로직 구현
06:48
하위 컴포넌트에 데이터 연결 및 표시 기능 구현
05:29
API 함수 타입 정의
06:42
프롭스 속성 타입 정의
04:09
프롭스 속성 타입 정의의 이점과 computed 속성 활용 방법 안내
06:49
axios 타입 정의 마무리
10:25
섹션 12. 점진적인 타입스크립트 적용 방식 3단계 - Vuex 스토어 타입 정의
19 강
∙ 2시간 1분
스토어 TS 파일 변환 및 컴포넌트의 타입 추론 문제 소개
05:21
스토어의 타입 추론이 안되는 이유 분석
04:46
뷰엑스 타입 정의 방법 안내 - state
03:05
state 타입 정의
07:14
스토어 내부 타입에 state 타입 연결
04:46
mutations 타입 정의 안내
02:07
mutations 타입 정의
07:10
스토어 타입 추론을 위한 타입 파일 작성
04:18
스토어 타입 파일 설명 및 스토어 내부 타입 확장
12:18
뮤테이션 타입 설명 마무리 및 actions 타입 정의 안내
06:06
actions 타입 정의
10:26
스토어 타입 파일에 actions 타입 확장
08:11
커스텀 타입을 프로젝트 레벨로 설정하는 방법
06:11
뷰엑스 커스텀 타입을 프로젝트 레벨에 설정
11:31
타입 모듈 확장 방법
05:29
getters 타입 정의 안내
05:01
스토어 타입 파일에 getters 타입 확장
06:13
getters 커스텀 타입 설명 및 맵드 타입 복습
02:51
스토어 타입 정의 방법 요약 정리
08:16
섹션 13. 두 번째 프로젝트 요약 정리
1 강
∙ 3분
두 번째 프로젝트 요약 정리
03:47
섹션 14. 뷰 플러그인과 외부 라이브러리 타입 정의
8 강
∙ 44분
프로젝트 생성 및 라이브러리 안내
03:10
차트 라이브러리 설치 및 실행 확인
04:29
차트 라이브러리 에러 설명 및 플러그인화
06:31
차트 플러그인 타입 에러 해결
07:18
뷰 컴포넌트의 차트 관련 타입 에러 해결
08:40
플러그인 적용 후 타입 에러 확인
02:44
플러그인 속성 타입 에러 해결
08:50
외부 라이브러리 타입 정의 방법 정리
02:38
섹션 15. ref 속성
4 강
∙ 18분
ref 속성 안내
03:51
ref 속성 타입 정의 방법 안내
03:38
ref 속성 타입 정의
05:20
ref 속성 유틸 타입 구현
05:47
섹션 16. 뷰 이벤트 커스텀 타입 정의
3 강
∙ 17분
이벤트 타입 정의가 필요한 이유 소개
03:56
뷰 이벤트 타입 정의를 위한 네임스페이스 생성
07:05
뷰 이벤트 타입 정의
06:54
섹션 17. Vue 3
2 강
∙ 12분
Vue 3 소개
05:30
Vue 2와 Vue 3의 차이점
07:21
섹션 18. 수업 마무리
1 강
∙ 2분
강의 마무리
02:11
강의 게시일 : 2021년 02월 18일
(마지막 업데이트일 : 2021년 04월 28일)
수강평
총 59개
수강생분들이 직접 작성하신 수강평입니다.
4.8
59개의 수강평
5점
4점
3점
2점
1점
VIEW
추천 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
vue2와 타입스크립트를 같이 사용해볼 수 있어서 좋았어요. 특히 마지막 부분에 ref랑 이벤트 관련 유틸타입부분은 특히 재밌었어요! 근데 아무래도 옛날 버전 위주라서 진행하면서 조금씩 달랐던 건 아쉬웠습니당
2024-02-27
개발하면서 몰랐던 부분들을 알 수 있었던 강의!
2021-02-22
좋은 강의였습니다.
2021-03-17
유료 강의 인데 기존에 다른 강의 repository를 재활용 하는 건 너무 성의 없는 거 아닌가요?
public으로 공개해 놓지도 않고...
소스만 가져와서 새로운 repository 만드는 게 많은 시간을 쓰는 것도 아니고
모든 수강생이 해당 강좌를 들은 것도 아닌데...
2022-09-17
vue.js 에서 typescript 적용에 대한 정말 좋은 강의입니다.
2021-02-21
