Thumbnail
깜짝 할인 중(D-2)
BEST 개발 · 프로그래밍 프로그래밍 언어
실전 프로젝트로 배우는 타입스크립트
(4.9)
53개의 수강평 ∙ 745명의 수강생

25%

41,250원

55,000원
지식공유자 : 장기효(캡틴판교)
총 78개 수업˙총 5시간 53분
평생 무제한 수강
수료증 발급 강의
입문 초급 중급이상 대상
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
내 목록 추가 589 공유
중급자를 위해 준비한
[프로그래밍 언어, 웹 개발] 강의입니다.

"타입스크립트 입문 - 기초부터 실전까지"의 실전 활용편입니다. 입문 편을 수강하지 않으신 분들은 입문 편부터 수강해 주세요 😄

✍️
이런 걸
배워요!
타입스크립트 개발
자바스크립트에 타입스크립트를 적용하는 방법
타입스크립트에서 외부 라이브러리 사용하는 방법
프런트엔드 개발 환경
프런트엔드 개발
프런트엔드 개발 빌드 시스템
ES6
타입 시스템

타입스크립트 입문, 그 두 번째!
실전 프로젝트로 자신있게 활용해보세요.

📔 강의 소개

타입스크립트 입문 강의의 후속 강의입니다. 타입스크립트 입문 강의에서 배운 내용을 바탕으로 간단한 프로젝트를 함께 진행해 봅니다. 자바스크립트로 만들어진 소규모 웹 사이트에 타입스크립트를 점진적으로 적용해 보면서 타입스크립트의 기본 문법과 개념을 체화하는 강의입니다.


📚 강의 구성

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

  • 자바스크립트 프로젝트에 타입스크립트를 점진적으로 적용해 나가는 방법
  • 개발 생산성을 높이는 프런트엔드 개발 환경 설정 ESLint, Prettier, Babel, Typescript
  • 타입스크립트에서 외부 라이브러리 사용하는 방법
  • 유틸리티 타입(제네릭 타입) 활용 방법
  • 타입스크립트의 내장 타입과 타입 추론에 대한 이해

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

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

최종 프로젝트
코로나 실시간 세계 현황판


📜 강의 교안 소개

강의 교안은 아래의 사이트를 활용합니다 😄


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

Q. 타입스크립트를 배우려고 하는데 이 강의를 들으면 될까요?

A. 이 강의는 타입스크립트 입문의 후속 강의입니다. 타입스크립트를 처음 입문하시는 분들은 타입스크립트 입문 강의를 먼저 수강하시고 이 강의를 들어주세요 😄

Q. 프런트엔드 개발에 익숙하지 않은데 들어도 될까요?

A. 이 강의는 자바스크립트(JavaScript)의 기초적인 개념(변수, 함수, 객체, 반복문, DOM 조작 등)을 알고 계신 분을 대상으로 구성한 강좌입니다. 자바스크립트의 기본 문법을 전혀 모르시는 분들(ES6+ 최신 문법은 모르셔도 됩니다)께는 적합하지 않은 강좌니 아래의 사이트로 선수 학습을 하신 후에 수강하시는 것을 추천드립니다 😄

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

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

Q. 이 강의 들으면 바로 실무에 적용할 수 있나요?

A. 이 강의는 자바스크립트로 만들어진 간단한 웹 사이트에 점진적으로 타입스크립트를 적용하는 방법에 대해서 배웁니다. 실제 서버에서 데이터를 호출해와 화면을 구성하고 있고 외부 라이브러리도 사용하고 있기 때문에 실제 서비스 환경과 유사한 구조입니다. 실무에서 부딪힐 수 있는 문제들을 미리 경험해 보시면서 탄탄한 타입스크립트 기본기를 닦으실 수 있습니다 😄


⛳️ 다른 강의 살펴보기

1. 타입스크립트 입문
처음으로 만나는 
쉽고 재미있는 
타입스크립트 학습
2. 쉽게 배우는 웹팩
리액트, 앵귤러, 뷰 등
FE 프레임워크의 
필수 도구
3. Vue.js 시작하기
Age of Vue.js, 
프론트엔드 입문을 위한 
기본과 핵심

Vue.js 전체 시리즈 강의 25% 할인 받기(클릭)
중학생, 고등학생, 대학생 학생 할인 50% 받기(클릭)


👨🏼‍🏫 지식공유자 소개

장기효 (캡틴판교)

  인프런이 만난 사람 #02 | 장기효님 인터뷰 보러가기 
:arrow_down_small:

강의 수익금의 일부로 코로나로 피해를 입은 소상공인을 지원합니다 😁

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
타입스크립트를 처음 시작하시는 분들
타입스크립트 입문자
자바스크립트에 타입스크립트를 적용하고 싶은 분들
프런트엔드 개발자
자바스크립트의 기본 문법을 알고 있는 웹 개발자
타입스크립트로 되어 있는 프로젝트에서 퍼블리싱을 해야 하는 퍼블리셔
📚
선수 지식,
필요한가요?
자바스크립트 기본 개념
타입스크립트 입문 강의

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

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

커리큘럼 총 78 개 ˙ 5시간 53분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 고급 타입
유틸리티 타입 소개 미리보기 03:18 유틸리티 타입 사례 - Pick 미리보기 10:03
Omit 타입과 기타 유틸리티 타입 목록 소개 03:09
유틸리티 타입 사례 - Partial 07:56
유틸리티 타입 구현 09:51
유틸리티 타입 구현 내용 정리 03:13
섹션 1. 맵드 타입(Mapped Type)
맵드 타입 소개 02:55
맵드 타입 예제 05:00
섹션 3. 최종 프로젝트 - 프로젝트 구성 및 타입 시스템 적용
최종 프로젝트 진행 방향 설명 02:23
점진적인 타입 시스템 적용 방법 - JSDoc 08:36
타입스크립트 프로젝트 구성 및 기본 설정 추가 12:05
빌드 결과물 확인 및 타입스크립트 컴파일 동작 특징 설명 07:13
타입스크립트 에러 디버깅 방법과 TS 컴파일 옵션 추가 설정 05:20
섹션 4. 최종 프로젝트 - 점진적인 타입 적용
자바스크립트 프로젝트에 타입스크립트를 적용하는 순서 06:59
명시적인 any 선언하기 02:55
함수 파라미터에 any 타입 정의하기 03:30
화살표 함수 소개 및 타입 정의 방법 03:51
화살표 any 함수에 타입 추가하기 02:12
DOM 관련 타입 구체화 04:14
API 함수 타입 구체화 06:23
API 함수 타입 정의에 따른 타입 오류 해결 03:03
DOM 함수 관련 타입 오류 분석 05:40
DOM 함수 타입 오류 해결하기 07:45
섹션 5. 최종 프로젝트 - 점진적인 타입 적용을 위한 프로젝트 환경 구성
모듈화 진행을 위한 프로젝트 환경 구성 안내 미리보기 01:58 프로젝트 라이브러리 설치 미리보기 05:23 ESLint 설정 후 ESLint 플러그인 에러 해결 미리보기 06:02 VSCode ESLint 플러그인 옵션 설정 미리보기 05:36
바벨 소개 02:59
바벨 추가 설명 03:26
ESLint 소개 02:10
ESLint 추가 설명 03:44
ESLint 규칙 및 설정 파일 소개 02:55
Prettier 소개 01:53
Prettier 옵션 및 프로젝트 설정 확인 03:14
프로젝트 환경 구성 요약 정리 04:49
섹션 6. 최종 프로젝트 - 외부 라이브러리 모듈화
외부 라이브러리 모듈화 진행을 위한 사전 작업 02:59
프로젝트의 라이브러리 로딩 방식 확인 및 모듈화 방법 안내 03:17
axios 라이브러리 설치 및 타입 에러 확인 02:41
Chart.js 라이브러리 설치 및 타입 에러 확인 03:29
라이브러리 임포트 구문에서 나는 타입 에러 분석 03:31
Chart.js 타입 정의 라이브러리 설치 후 에러 해결 04:50
Chart.js 라이브러리 임포트 문법 오류 해결 02:33
Definitely Typed 소개 03:56
타입 선언 라이브러리가 제공되지 않는 외부 라이브러리 대처 방법 06:05
외부 라이브러리 모듈화 방법 정리 02:20
섹션 7. 최종 프로젝트 - API 함수 타입 정의
API 함수 타입 정의 안내 03:39
전세계 코로나 요약 정보 API 함수 반환 타입 정의 06:45
전세계 코로나 요약 정보 API 함수 반환 타입 모듈화 및 구체화 06:19
[실습 안내] 국가별 코로나 정보 API 함수 타입 정의 방법 실습 안내 03:40
[실습 풀이] 국가별 코로나 정보 API 함수 타입 정의 04:50
전세계 코로나 요약 정보 API 함수 관련 코드 타입 정의 03:31
reduce API 소개 04:51
특정 국가의 총 확진자 수 계산 함수 타입 정의 05:30
전세계 코로나 요약 정보 API 함수 관련 나머지 타입 정의 04:16
[실습 안내] 특정 국가 코로나 정보 API 함수 관련 타입 정의 실습 안내 03:17
[실습 풀이] 특정 국가의 사망자 정보 목록 설정 함수 타입 정의 04:36
[실습 풀이] 특정 국가의 코로나 정보 API 함수 관련 나머지 타입 정의 04:09
API 함수 타입 정의 과정 요약 정리 04:27
섹션 8. 최종 프로젝트 - 차트 라이브러리 타입 정의
app.ts의 나머지 에러 정리 및 차트 값 설정 함수 타입 정의 04:52
차트 관련 타입 오류 해결 및 정리 05:24
섹션 9. 최종 프로젝트 - ES6 문법
ES6 디스트럭처링 문법 소개 01:52
ES6 디스트럭처링 예제 코드 살펴보기 03:14
ES6 async & await 문법 06:41
적용 절차 3단계 정리 및 다음 단계 안내 02:15
섹션 10. 최종 프로젝트 - 엄격한 타입 적용
프로젝트 마지막 절차 안내 및 strict 옵션 적용 02:06
strict 옵션 소개 02:26
null 타입 오류 및 함수 타입 오류 해결 05:48
타입스크립트 내장 타입의 위계 구조 설명 및 타입 오류 해결 05:30
타입 단언을 이용한 타입 에러 해결 03:46
타입 단언 문법 사용시 주의해야 할 점 05:45
null 타입 문제 해결 02:45
옵셔널 체이닝 연산자 소개 05:59
DOM 유틸 함수 활용성을 높이는 타입 정의 06:47
섹션 11. 마무리
수업 마무리 및 향후 학습 방향 안내 04:24
강의 게시일 : 2020년 12월 21일 (마지막 업데이트일 : 2020년 12월 21일)
수강평 총 53개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.9
53개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
ohb4199 thumbnail
레거시 프로젝트를 TS적용하면서 TS에 대한 전반적인 이해를 할 수 있었습니다. 기존에 있는 프로젝트를 적용해보면서 공부해봐야겠습니다.
2021-06-08
digilog thumbnail
기존 프로젝트를 TS로 변환하는 기본을 익히기에 좋은 강의인것 같습니다
2021-06-03
에이비 thumbnail
정말 많은걸 배워갑니다!
2021-06-10
yhg0337 thumbnail
정말 들으면 들을수록 어떻게 타입스크립트에 다가가야 좀더 자신감이 생길수 있게 접근이 가능할 수 있을지를 고심하신게 느껴지는 강의였습니다.. 정말 타입스크립트를 공부해도 어떻게 사용할지 막막함이 앞서 들었는데 그 막막함을 해결해준 강의였습니다.
2020-12-29
wally-wally thumbnail
'Vue.js 시작하기'부터 항상 믿고 들어왔는데 이번 강의도 배울 내용이 많고 강의 하나하나 너무 알차서 좋았습니다! 추후 Vue.js에 Typescript 사용하는 내용을 담은 강의도 개설하신다고 하셨는데 그전까지 배웠던 Typescript 복습하면서 기대하고 있겠습니다! 항상 늘 좋은 강의 감사합니다!
2021-01-10
깜짝 할인 중(D-2)

25%

41,250원

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