88,000원
월 17,600원
5개월 할부 시
중급자를 위해 준비한
[웹 개발, 프론트엔드] 강의입니다.
[웹 개발, 프론트엔드] 강의입니다.
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 완벽 가이드> 강의는 위 두 로드맵 전체를 모두 수강한 학습자가 들을 수 있도록 구성한 강의입니다. 선수 지식을 반드시 확인해주세요!
👩💻 미래의 개발자를 꿈꾸는 학생이라면?
지식공유자가 알려주는
강의 수강 꿀팁!
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
이런 분들께
추천드려요!
프런트엔드 개발자
Vue.js에서 타입스크립트를 처음 시작하는 분들
Vue.js 학습 로드맵을 모두 수강하고 다음 강의를 기다리시는 분들
📚
선수 지식,
필요한가요?
선수 지식,
필요한가요?
Vue.js
TypeScript
안녕하세요
장기효(캡틴판교) 입니다.
장기효(캡틴판교) 입니다.
인프런에서 6년째 지식을 공유하고 있습니다. 지금까지 많은 응원과 격려를 보내주신 만큼 앞으로도 더 좋은 컨텐츠로 찾아뵙겠습니다. 감사합니다 😄 프런트엔드 개발 상담소 바로가기(매주 토요일 오후 9시 30분 유튜브 생방송 진행)
커리큘럼
총 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년 04월 28일)
수강평
총 37개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
5.0
37개의 수강평
5점
4점
3점
2점
1점
VIEW
좋아요 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
this is korea legend.
"이것은 한국의 레전드 강의다."
2021-09-22
Vue에 대해서 1도 모르는 상태로 시작해서 이렇게 Vue+TypeScript 강의까지 모두 수강하게 되었습니다. 21년 9월부터 아무것도 몰랐던 그 때 캡틴판교님의 강의 덕분에 정말 여기까지 올 수 있었습니다! 항상 감사합니다 :)
2022-04-23
개발하면서 몰랐던 부분들을 알 수 있었던 강의!
2021-02-22
좋은 강의였습니다.
2021-03-17
vue.js 에서 typescript 적용에 대한 정말 좋은 강의입니다.
2021-02-21
장기효(캡틴판교)님의 다른 강의
지식공유자님의 다른 강의를 만나보세요!
비슷한 강의
같은 분야의 다른 강의를 만나보세요!
Three.js 3D 인터랙티브 바로 시작하기
함수형 프로그래밍과 JavaScript ES6+
₩55,000
자바스크립트 : 기초부터 실전까지 올인원
₩81,400
