25%
66,000원
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
중급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.
[프론트엔드, 웹 개발] 강의입니다.
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에서 타입스크립트를 처음 시작하는 분들
Vue.js 학습 로드맵을 모두 수강하고 다음 강의를 기다리시는 분들
📚
선수 지식,
필요한가요?
선수 지식,
필요한가요?
Vue.js
TypeScript
안녕하세요
장기효(캡틴판교) 입니다.
장기효(캡틴판교) 입니다.
인프런에서 7년째 지식을 공유하고 있습니다. 지금까지 많은 응원과 격려를 보내주신 만큼 앞으로도 더 좋은 컨텐츠로 찾아뵙겠습니다. 감사합니다 😄 프런트엔드 개발 상담소 바로가기(매주 토요일 오후 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년 02월 18일
(마지막 업데이트일 : 2021년 04월 28일)
수강평
총 51개
수강생분들이 직접 작성하신 수강평입니다.
4.9
51개의 수강평
5점
4점
3점
2점
1점
VIEW
좋아요 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
vue.js 에서 typescript 적용에 대한 정말 좋은 강의입니다.
2021-02-21
좋은 강의였습니다.
2021-03-17
개발하면서 몰랐던 부분들을 알 수 있었던 강의!
2021-02-22
항상 좋은 강의 감사드립니다. vue3 강의도 기대 하겠습니다. 감사합니다.
2023-03-23
자세한 설명 감사합니다.
뷰제이에스 실력향상에 큰 도움이 되었습니다. ^^
2023-03-18
