Thumbnail
지식공유자의 깜짝할인 중(D-10)
BEST 개발 · 프로그래밍 프론트엔드
Vue.js + TypeScript 완벽 가이드
(5.0)
40개의 수강평 ∙ 798명의 수강생

25%

66,000원

88,000원
지식공유자: 장기효(캡틴판교)
총 84개 수업 (8시간 2분)
수강기한: 무제한
수료증: 발급
난이도:  입문-초급-중급이상
지식공유자 답변이 제공되는 강의입니다
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
폴더에 추가 공유
중급자를 위해 준비한
[웹 개발, 프론트엔드] 강의입니다.

Vue.js에서 타입스크립트를 시작하는 분들을 위한 최고의 강의. 2개의 실습 프로젝트로 재밌게 배워보는 Vue.js + 타입스크립트 완전 정복. 배우면서 바로 실무에 적용해 보세요! 😄

✍️
이런 걸
배워요!
Vue.js TypeScript
타입스크립트
Vue.js 실무 개발
재활용성 높은 컴포넌트 설계 방법

명불허전! 캡틴판교와 함께하는 
Vue.js + Typescript FE 완전 정복 🚀

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로 완성하는 프론트엔드
개발자 로드맵" 25% 할인 (클릭)

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

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
프런트엔드 개발자
Vue.js에서 타입스크립트를 처음 시작하는 분들
Vue.js 학습 로드맵을 모두 수강하고 다음 강의를 기다리시는 분들
📚
선수 지식,
필요한가요?
Vue.js
TypeScript

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

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

커리큘럼 총 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일)
수강평 총 40개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
5.0
40개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
KyungJun Lee thumbnail
Vue에 대해서 1도 모르는 상태로 시작해서 이렇게 Vue+TypeScript 강의까지 모두 수강하게 되었습니다. 21년 9월부터 아무것도 몰랐던 그 때 캡틴판교님의 강의 덕분에 정말 여기까지 올 수 있었습니다! 항상 감사합니다 :)
2022-04-23
khj thumbnail
개발하면서 몰랐던 부분들을 알 수 있었던 강의!
2021-02-22
지식공유자장기효(캡틴판교)
감사합니다 :)
2021-03-21
에반 thumbnail
좋은 강의였습니다.
2021-03-17
지식공유자장기효(캡틴판교)
수강평 감사드립니다 :)
2021-03-21
DoYoung Ahn thumbnail
this is korea legend. "이것은 한국의 레전드 강의다."
2021-09-22
momo_12 thumbnail
vue.js 에서 typescript 적용에 대한 정말 좋은 강의입니다.
2021-02-21
지식공유자장기효(캡틴판교)
안녕하세요 첫 번째 수강평 넘 감사드립니다 :) 후속 영상도 잘 준비해서 올릴게요. 응원 감사합니다 :)
2021-02-21
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스