Thumbnail
BEST
개발 · 프로그래밍 프론트엔드

Vue.js + TypeScript 완벽 가이드 대시보드

(4.8)
58개의 수강평 ∙  1,291명의 수강생
88,000원

월 17,600원

5개월 할부 시
지식공유자: 장기효(캡틴판교)
총 84개 수업 (8시간 2분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

중급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

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로 정복하는 프론트엔드 개발
캡틴판교님의 뷰 + 타입스크립트로 한 번에
배우는 강의들로 구성된 로드맵입니다.
이 강의 포함

지식공유자 소개 👨‍🏫

장기효 (캡틴판교)

"인프런이 만난 사람" 인터뷰

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

강의 할인을 제공합니다!

시리즈 "Vue.js로 완성하는 프론트엔드
개발자 로드맵" 25% 할인 (클릭)

수입이 없는 중·고등학생,
대학생을 위한 학생 50% 할인 (클릭)

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
프런트엔드 개발자
Vue.js에서 타입스크립트를 처음 시작하는 분들
Vue.js 학습 로드맵을 모두 수강하고 다음 강의를 기다리시는 분들
📚
선수 지식,
필요할까요?
Vue.js
TypeScript

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

인프런에서 8년째 지식을 공유하고 있습니다.

📗 Do it! Vue.js 입문, 쉽게 시작하는 타입스크립트, 나는 네이버 프런트엔드 개발자입니다. 책 3권 집필
📖 Cracking Vue.js, 타입스크립트 핸드북, 웹팩 핸드북. 온라인 무료 가이드북 3권 집필
👨‍💻 캡틴판교의 프론트엔드 개발 유튜브 채널 운영 - 취준생, 주니어 개발자들의 고민을 들을 수 있는 곳
🥤 캡틴판교의 카카오톡 오픈 채팅방 운영 - 프런트엔드 개발 최신 정보와 업계 동료들의 생각을 들을 수 있는 곳

커리큘럼 총 84 개 ˙ 8시간 2분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 2. 할 일 관리 앱 - 추가 기능 구현
구현할 기능 리스트업 및 뷰 TS 컴포넌트 단축키 안내 03:31
인풋 컴포넌트 생성 및 등록 05:01
인풋 컴포넌트에 내려줄 data와 props 속성 정의 05:59
인풋 컴포넌트의 emit 이벤트 정의 및 구현 08:06
할 일 추가 버튼 기능 구현 03:48
v-model을 풀어서 구현하는 방식의 장점 04:17
인풋 컴포넌트 프롭스 속성 유효성 검사 및 타입 정의 06:06
Vetur 플러그인의 컴포넌트 태그 자동 완성 설정 02:39
섹션 3. 할 일 관리 앱 - 조회 기능 구현
할 일 아이템 목록 컴포넌트 설계 및 구현 04:13
데이터 조회 API 설계 06:36
데이터 조회 API 타입 에러와 JSON 파싱 에러 해결 06:31
할 일 추가 API 설계 및 구현 07:23
할 일 조회 기능 구현 03:20
섹션 4. 할 일 관리 앱 - 삭제 기능 구현
삭제 기능 마크업 및 이벤트 연동 06:18
할 일 삭제 API 연동 및 구현 01:41
섹션 5. 할 일 관리 앱 - 완료 기능 구현
할 일 완료 기능 마크업 및 스타일링 04:45
할 일 목록의 데이터 타입 정의 및 할 일 추가 기능에 적용 06:51
props 타입 정의 방법 03:06
할 일 완료 기능 구현 06:42
할 일 완료 클래스 바인딩 및 computed 타입 정의 방식 안내 05:26
섹션 6. 할 일 관리 앱 - 정렬 기능 구현
할 일 목록 정렬 기능 구현 06:07
할 일 목록 정렬 관련 타입 오류 해결 및 타입 정의 완료 04:57
섹션 7. 첫 번째 프로젝트 요약
첫 번째 프로젝트 요약 정리 08:35
섹션 8. 두 번째 프로젝트 시작하기
두 번째 프로젝트 오리엔테이션 02:07
두 번째 프로젝트 안내 04:04
섹션 9. 실 서비스에 타입스크립트를 적용하는 방법 2가지
프로젝트에 타입스크립트 플러그인 추가 06:42
프로젝트 구성 및 실행 결과 확인 10:06
타입스크립트 프로젝트 진행 방식 안내 03:23
섹션 10. 점진적인 타입스크립트 적용 방식 1단계 - 라우터, HOC, 유틸 함수
프로젝트 빌드 에러 해결 05:14
App.vue에 타입스크립트 적용 및 strict 옵션 참고 사항 06:27
유틸성 파일에 TS 적용 및 주요 TS 적용 포인트 안내 03:35
라우터 파일에 TS 적용 및 라이브러리 내부 타입 선언 파일 설명 10:26
HOC 파일에 TS 적용 및 라우터 네비게이션 함수 로직 개선 05:38
섹션 11. 점진적인 타입스크립트 적용 방식 2단계 - 컴포넌트, API 함수
스토어 상태 관리에 대한 주의 사항 안내 06:22
API 파일에 타입스크립트 적용 및 호출 로직 구현 06:48
하위 컴포넌트에 데이터 연결 및 표시 기능 구현 05:29
API 함수 타입 정의 06:42
프롭스 속성 타입 정의 04:09
프롭스 속성 타입 정의의 이점과 computed 속성 활용 방법 안내 06:49
axios 타입 정의 마무리 10:25
섹션 12. 점진적인 타입스크립트 적용 방식 3단계 - Vuex 스토어 타입 정의
스토어 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. 두 번째 프로젝트 요약 정리
두 번째 프로젝트 요약 정리 03:47
섹션 14. 뷰 플러그인과 외부 라이브러리 타입 정의
프로젝트 생성 및 라이브러리 안내 03:10
차트 라이브러리 설치 및 실행 확인 04:29
차트 라이브러리 에러 설명 및 플러그인화 06:31
차트 플러그인 타입 에러 해결 07:18
뷰 컴포넌트의 차트 관련 타입 에러 해결 08:40
플러그인 적용 후 타입 에러 확인 02:44
플러그인 속성 타입 에러 해결 08:50
외부 라이브러리 타입 정의 방법 정리 02:38
섹션 15. ref 속성
ref 속성 안내 03:51
ref 속성 타입 정의 방법 안내 03:38
ref 속성 타입 정의 05:20
ref 속성 유틸 타입 구현 05:47
섹션 16. 뷰 이벤트 커스텀 타입 정의
이벤트 타입 정의가 필요한 이유 소개 03:56
뷰 이벤트 타입 정의를 위한 네임스페이스 생성 07:05
뷰 이벤트 타입 정의 06:54
섹션 17. Vue 3
Vue 3 소개 05:30
Vue 2와 Vue 3의 차이점 07:21
섹션 18. 수업 마무리
강의 마무리 02:11
강의 게시일 : 2021년 02월 18일 (마지막 업데이트일 : 2021년 04월 28일)
수강평 총 58개
수강생분들이 직접 작성하신 수강평입니다.
4.8
58개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
에반 thumbnail
5
좋은 강의였습니다.
2021-03-17
지식공유자 장기효(캡틴판교)
수강평 감사드립니다 :)
2021-03-21
이윤기 thumbnail
3
유료 강의 인데 기존에 다른 강의 repository를 재활용 하는 건 너무 성의 없는 거 아닌가요? public으로 공개해 놓지도 않고... 소스만 가져와서 새로운 repository 만드는 게 많은 시간을 쓰는 것도 아니고 모든 수강생이 해당 강좌를 들은 것도 아닌데...
2022-09-17
테이 thumbnail
4
vue2와 타입스크립트를 같이 사용해볼 수 있어서 좋았어요. 특히 마지막 부분에 ref랑 이벤트 관련 유틸타입부분은 특히 재밌었어요! 근데 아무래도 옛날 버전 위주라서 진행하면서 조금씩 달랐던 건 아쉬웠습니당
2024-02-27
momo_12 thumbnail
5
vue.js 에서 typescript 적용에 대한 정말 좋은 강의입니다.
2021-02-21
지식공유자 장기효(캡틴판교)
안녕하세요 첫 번째 수강평 넘 감사드립니다 :) 후속 영상도 잘 준비해서 올릴게요. 응원 감사합니다 :)
2021-02-21
abcdeee thumbnail
5
개발하면서 몰랐던 부분들을 알 수 있었던 강의!
2021-02-22
지식공유자 장기효(캡틴판교)
감사합니다 :)
2021-03-21
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!