Thumbnail
BEST 개발 · 프로그래밍 웹 개발
Vue.js + TypeScript 완벽 가이드
(5.0)
10개의 수강평 ∙ 215명의 수강생
88,000원

월 17,600원

5개월 할부 시
지식공유자 : 장기효(캡틴판교)
총 84개 수업˙총 8시간 2분
평생 무제한 수강
수료증 발급 강의
입문 초급 중급이상 대상
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
내 목록 추가 350 공유
중급자를 위해 준비한
[웹 개발, 프레임워크 및 라이브러리] 강의입니다.

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

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

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

📔 강의 소개

Vue.js로 웹 애플리케이션을 만드는데 익숙해지셨나요? 그렇다면 이제는 타입스크립트를 배울 차례입니다. 타입스크립트로 내가 만든 기능을 더 단단하게 만들고, 다른 사람이 더 쉽게 코드의 내용을 파악할 수 있게 해볼까요? 여러분의 Vue.js 프런트엔드 개발을 한층 더 재밌게 해줄 Vue.js + TypeScript 강의를 지금 바로 수강해 보세요! 😄


📚 강의 구성

본 강의는 크게 아래와 같은 주제들을 다룹니다 😄

  • Vue.js에서 타입스크립트를 시작하는 방법
  • 기존에 제작해 놓은 Vue.js + 자바스크립트 프로젝트에 타입스크립트를 점진적으로 적용하는 방법
  • 실무 Vue.js 코드에 타입스크립트를 바로 적용할 수 있는 꿀팁과 노하우
  • 재활용성이 뛰어난 Vue.js 단위 컴포넌트 제작 방법
  • Vue 3을 준비하는 자세

🎲 강의에서 다루는 애플리케이션

여러분의 학습을 재밌게 해줄 프로젝트를 소개합니다.

첫 번째 프로젝트
할 일 관리(To-do) 앱

두 번째 프로젝트
뉴스, 구직 게시판 앱


🙋🏻‍♂️ 강의 관련 예상 질문

Q. Vue.js를 처음 시작하는데 이 강의를 들어도 될까요?

A. 이 강의는 기초 강의가 아닙니다. 캡틴판교의 Vue.js 학습 로드맵을 모두 수강하신 분들이 들으실 수 있습니다. 선수 과목을 모두 수강하지 않은 분들께는 적합하지 않은 강의이니 먼저 선수 과목을 학습해 주세요! :)

Q. Vue 3이 새로 나왔던데, 이 강의는 Vue 3 버전으로 진행되나요?

A. 아닙니다, Vue 2 버전으로 진행합니다. 하지만 강의에서 배운 내용을 그대로 Vue 3 버전에서 사용할 수 있습니다. 현재 Vue 3 생태계가 성숙하지 못한 점으로 인해 실무에서 바로 사용할 수 있는 Vue 2 버전으로 진행합니다. 강의 후반부에는 Vue 3에 타입스크립트를 적용하는 방법에 대해서도 간단히 안내를 하니 참고해 주세요 :)

Q. 타입스크립트를 전혀 모르는데 이 강의를 들어도 될까요?

A. 이 강의는 타입스크립트 선수 강의(입문, 실전)를 모두 수강하신 분들께 적합한 강의입니다. 강의에서 다루는 타입스크립트 기본 코드는 별도로 개념을 알려드리지 않으니 타입스크립트 선수 강의를 꼭 수강하고 들어주세요 :)

Q. 실무에서 자바스크립트만으로 잘 개발하는데 타입스크립트도 학습해야 할까요?

A. 복잡한 웹 애플리케이션을 여러 명이서 개발해보신 경험이 있다면 아마 문서화가 잘 된 코드, 가독성이 높고 한눈에 의미를 파악하기 쉬운 코드를 선호하실 거라고 생각합니다. 타입스크립트는 이러한 장점들을 극대화 시킬 뿐만 아니라 코드를 쉽게 작성하도록 도와주고 향후 애플리케이션을 실행했을 때의 버그도 미리 줄여줄 수 있습니다. 학습해 보시면 개발하는 게 더 편해지실 거예요 😄


⛳️ 선수 학습 로드맵

기본부터 실전까지, 유일무이 Vue.js 완성 시리즈
생산성을 높이는 타입스크립트 정복 시리즈

수강 전 확인해주세요!

  • <Vue.js + TypeScript 완벽 가이드> 강의는 위 두 로드맵 전체를 모두 수강한 학습자가 들을 수 있도록 구성한 강의입니다. 선수 지식을 반드시 확인해주세요!

👩‍💻 미래의 개발자를 꿈꾸는 학생이라면?

고등학생, 대학생을 위한
학생 할인을 제공합니다. 🙋‍♀️🙋‍♂️

학생 할인 50% 받기 (클릭)

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

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

인프런에서 5년째 지식을 공유하고 있습니다. 지금까지 많은 응원과 격려를 보내주신 만큼 앞으로도 더 좋은 컨텐츠로 찾아뵙겠습니다. 감사합니다 😄 프런트엔드 개발 상담소 바로가기(매주 토요일 오후 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일)
수강평 총 10개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
5.0
10개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
박굿뜨 thumbnail
감사합니다!!
2021-06-04
에반 thumbnail
좋은 강의였습니다.
2021-03-17
지식공유자장기효(캡틴판교)
수강평 감사드립니다 :)
2021-03-21
momo_12 thumbnail
vue.js 에서 typescript 적용에 대한 정말 좋은 강의입니다.
2021-02-21
지식공유자장기효(캡틴판교)
안녕하세요 첫 번째 수강평 넘 감사드립니다 :) 후속 영상도 잘 준비해서 올릴게요. 응원 감사합니다 :)
2021-02-21
khj thumbnail
개발하면서 몰랐던 부분들을 알 수 있었던 강의!
2021-02-22
지식공유자장기효(캡틴판교)
감사합니다 :)
2021-03-21
복슬이 thumbnail
수고하셨습니다.
2021-06-19
88,000원

월 17,600원

5개월 할부 시
내 목록 추가 350 공유
지식공유자 : 장기효(캡틴판교)
총 84개 수업˙총 8시간 2분
평생 무제한 수강
수료증 발급 강의
입문 초급 중급이상 대상
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
수강 전 궁금한 점이 있나요?
문의하기
문의
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스