Thumbnail
BEST 개발 · 프로그래밍 프로그래밍 언어
타입스크립트 입문 - 기초부터 실전까지
(4.9)
134개의 수강평 ∙ 1275명의 수강생

55,000원

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

타입스크립트를 시작하는 분들을 위한 강의입니다. 최신 자바스크립트 문법을 모르는 분들도 쉽게 배울 수 있도록 교과 과정을 구성하였습니다. 어렵게만 느껴지는 타입스크립트를 입문자 관점에서 쉽고 재밌게 배워보겠습니다 😄

✍️
이런 걸
배워요!
타입스크립트 개발
자바스크립트에 타입스크립트를 적용하는 방법
타입 시스템
프런트엔드 개발
ES6

자바스크립트 프로젝트에 적용하며 익히는, 
쉽고 재밌게 배우는 타입스크립트 입문!

📔 강의 소개

타입스크립트(TypeScript)는 프런트엔드 개발 실무자라면 이제 꼭 알아둬야 하는 언어입니다. 구현한 기능에서 버그가 덜 나오게 도와줄 뿐만 아니라 유지 보수 관점에서도 코드의 역할을 더 빠르게 파악할 수 있습니다.

그럼에도 타입스크립트는 많은 입문자들에게 두려움의 대상이 되고 있습니다. 타입스크립트의 공식 문서가 난해할 뿐만 아니라, 쉽게 학습할 수 있는 자료가 많지 않기 때문입니다. 혹은 “최신 자바스크립트도 익숙하지 않은데 타입스크립트라뇨?” 라고 생각하실 수 있습니다.

이 강의는 최신 자바스크립트를 모르더라도 자바스크립트의 기초적인 개념만 알고 계신 분들도 학습하실 수 있게 구성되었습니다. 짧은 개념 설명과 실습 중심의 강의로 타입스크립트를 재밌게 입문하실 수 있도록 도와드릴게요 😄


📚 강의 구성

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

  • 타입스크립트를 썼을 때의 장점과 자바스크립트를 타입스크립트처럼 코딩하는 방법
  • 타입스크립트의 기본 개념(기본 타입부터 제네릭, 고급 타입까지)
  • 자바스크립트 프로젝트에 타입스크립트를 점진적으로 적용해 나가는 방법
  • 타입스크립트의 내부 동작 방식과 타입(Type) 추론을 이뤄 나가는 과정

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

여러분의 학습을 재밌게 해줄 프로젝트를 소개합니다.
(실습 프로젝트 1 - 실습 프로젝트 2)

실습 프로젝트 1
할 일 관리 애플리케이션
(To-Do App)

실습 프로젝트 2
전화번호부 애플리케이션


📜 강의 교안 소개

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


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

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

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

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

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

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

A. 강의의 전체적인 흐름은 이미 구현된 자바스크립트 코드에 점진적으로 학습한 내용을 적용하면서 타입스크립트 프로젝트로 변환해 나가는 방향으로 설계되었습니다. 2개의 실습 프로젝트를 통해 배운 내용을 실제 프로젝트에 적용할 수 있는 경험과 자신감을 기를 수 있을 겁니다 😄


⛳️ 다른 강의 살펴보기

2. Vue.js 중급 강좌
웹앱 제작으로 배우는
Vue.js, ES6, Vuex 
3. 쉽게 배우는 웹팩
프론트엔드 프레임워크
(리액트, 앵귤러, 뷰)에서 
필수로 사용되는 도구
4. Vue.js 고급 강좌
Vue.js 완벽 가이드
실습과 리팩토링으로
배우는 실전 기술
5. Vue.js 활용 강좌
실무에 필요한 모든 것

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


👨🏼‍🏫 강사 소개

장기효 (캡틴판교)

  • (현) 프런트엔드 개발자
  • Do it! Vue.js 입문 저자
  • 네이버, 이베이, 삼성, LG, SK그룹 등 프런트엔드 개발 강의
  • Google 웹 기술 공식 사이트 번역자
  • 기술 블로그Github
인프런이 만난 사람 #02 | 장기효님 인터뷰 보러가기

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

프론트엔드, frontend, front-end, javascript, typescript, FE

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

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

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

커리큘럼 총 87 개 ˙ 6시간 17분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 3. 타입스크립트 기초 - 변수와 함수 타입 정의하기
기본 타입 - 문자열, 숫자, 배열 미리보기 05:53
기본 타입 - 튜플, 객체, 진위값 05:37
함수 타입 - 파라미터, 반환값 04:34
함수 타입 - 파라미터를 제한하는 특성 03:58
함수 타입 - 옵셔널 파라미터 03:49
섹션 4. 첫 번째 프로젝트 - 할 일 관리 애플리케이션
첫 번째 실습 프로젝트 소개, 환경 구성, 코드 분석 06:38
프로젝트 구성 파일 소개(NPM, ESLint, TS) 03:48
실습 방법 안내 및 any, void 소개 04:18
실습 풀이 1 - 변수, 함수 타입 06:24
실습 풀이 2 - filter API & 화살표 함수 소개 05:02
실습 풀이 3 - 함수 구현 03:47
실습 풀이 4 - 오류 해결 및 구체적인 타입 정의 05:54
실습 풀이 5 - 중복된 코드 제거 및 인터페이스 소개 03:20
섹션 5. 인터페이스
인터페이스 소개 및 변수를 정의하는 인터페이스 02:25
함수의 인자를 정의하는 인터페이스 04:05
함수 구조를 정의하는 인터페이스 03:19
인덱싱 방식을 정의하는 인터페이스 02:50
인터페이스 딕셔너리 패턴 05:09
인터페이스 확장(상속) 03:11
섹션 6. 타입 별칭
타입 별칭 소개 01:54
타입 별칭 코드 예제 03:47
타입 별칭과 인터페이스의 차이점 03:49
섹션 7. 연산자를 이용한 타입 정의
연산자를 이용한 타입 정의 - Union Type 03:05
유니온 타입의 장점 03:16
유니온 타입의 특징 03:29
인터섹션 타입 소개 03:32
유니온 타입과 인터섹션 타입의 차이점 04:17
섹션 8. 이넘
이넘 소개 00:56
숫자형 이넘 02:09
문자형 이넘 02:34
이넘 활용 사례 04:44
섹션 9. 클래스
클래스 소개 04:25
자바스크립트 프로토타입 소개 06:02
자바스크립트 프로토타입의 활용 사례 03:14
프로토타입과 클래스와의 관계 02:30
타입스크립트의 클래스 문법 05:11
섹션 10. 제네릭
제네릭 소개 01:57
제네릭의 기본 문법 05:30
기존 타입 정의 방식과 제네릭의 차이점 - 함수 중복 선언의 단점 04:17
기존 문법과 제네릭의 차이점 - 유니온 타입을 이용한 선언 방식의 문제점 03:33
제네릭의 장점과 타입 추론에서의 이점 04:02
제네릭 실전 예제 살펴보기 - 예제 설명 04:50
제네릭 실전 예제 살펴보기 - 코드에 타입 정의하기 08:26
인터페이스에 제네릭을 선언하는 방법 03:31
제네릭 실전 예제 살펴보기 - 제네릭을 이용한 타입 정의 04:53
제네릭의 타입 제한 05:38
정의된 타입으로 타입을 제한하기 04:46
keyof로 제네릭의 타입 제한하기 05:05
섹션 11. 두 번째 프로젝트 - 전화번호부 애플리케이션
프로젝트 소개 04:01
프로젝트 실습 방법 안내 04:42
애플리케이션에 정의된 타입 설명 및 API 함수 타입 정의 힌트 04:46
Promise를 이용한 API 함수 타입 정의 10:10
전화번호부 클래스 선언부 타입 정의 03:43
전화번호부 검색 메서드의 타입 정의 04:24
이넘을 이용한 타입 정의 05:15
주요 메서드(조회) 타입 정의 및 실습 마무리 03:33
섹션 12. 타입 추론
타입 추론 소개 06:49
인터페이스와 제네릭을 이용한 타입 추론 방식 04:10
복잡한 구조에서의 타입 추론 방식 05:31
Best Common Type 추론 방식 02:52
Typescript Language Server 소개 03:25
섹션 13. 타입 단언
타입 단언 소개 03:10
타입 단언 예제 06:27
섹션 14. 타입 가드
타입 가드를 위한 예제 소개 05:58
타입 가드 소개와 적용 04:17
섹션 15. 타입 호환
타입 호환이란? 02:04
타입 호환 예제 - 인터페이스, 클래스 04:37
타입 호환 예제 - 함수, 제네릭 06:36
섹션 16. 타입 모듈화
타입스크립트의 모듈 시스템 04:51
자바스크립트의 모듈 시스템 03:51
전화번호부 애플리케이션에 모듈화 실습해보기 01:14
전화번호부 애플리케이션 실습 풀이 03:12
섹션 17. 수업 마무리
수업 마무리 및 다음 강좌 안내 06:36
강의 게시일 : 2020년 10월 21일 (마지막 업데이트일 : 2020년 10월 21일)
수강평 총 134개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.9
134개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
비오 thumbnail
설명이 참 군더더기 없습니다. 강의듣는 맛나네요
2020-10-28
Phodong thumbnail
간결, 정확...
2021-01-20
호눅스 thumbnail
진짜 짱짱 좋아요. 많은 자료를 인터넷에 공개해 주셔서 그걸로도 할 수 있지만 강사님의 꿀보이스를 들으면서 하니까 더욱 좋아요! 강추!
2020-11-20
dolarge thumbnail
프론트엔드개발자로 취직을 하려고 하는데 요즘은 타입스크립트를 요구하는 회사가 많아보여서, 이 강의를 듣게 되었습니다. 여러 무료강의를 찾아보았지만 몇년전 자료이거나 커리큘럼이 마음에 들지않아 이 유료강의를 듣게 되었는데 여러프로젝트도 만들어 보면서 따라할수있어서 더 머리에 잘들어오는것같습니다. 그리고 개념도 하나하나잘설명해주시고 최대한 쉽게 설명해주시려고 하시는것 같아서 어려움없이 타입스크립트공부를 하고있습니다. 타입스크립트를 체계적으로 배우고 싶으신분들께 추천드려요!
2020-11-15
Yong-Hae Lee thumbnail
타입스크립트를 배우려고 하던 차에 강의가 오픈되어 바로 수강했습니다. 타입스크립트의 완전 기초부터 실용적인 예제를 통한 활용 예까지 알수있었습니다. 강의 경험이 많으신 것 같아요. 강의들이 너무 길지 않게 적절한 길이로 나눠져 있어서 중간에 끊어가면서 공부하기 좋았습니다. 좋은 강의 감사합니다.
2020-10-24
지식공유자장기효(캡틴판교)
첫 수강평 감사합니다 용해님 :) 강의 특징과 장점도 구체적으로 잘 적어주셔서 더 의미가 크네요 ㅎㅎ 이후에 올라오는 타입스크립트 영상도 기대해 주세요! 감사합니다 :)
2020-10-26

55,000원

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