타입스크립트를 처음 배우는 입문자부터 실무자까지 모두를 위한 올인원 학습 과정입니다. 타입 시스템의 기본 개념부터 컴파일러 동작 원리, tsconfig 설정, 그리고 DOM 조작 및 실전 프로젝트까지 타입스크립트를 제대로 이해하고 활용하기 위한 전 과정을 담았습니다. 최신 생태계 트렌드와 타입스크립트의 미래까지 한 번에 정리합니다.
현대 프론트엔드 · 백엔드 개발에서 타입 안정성은 선택이 아닌 필수입니다. 대규모 프로젝트일수록 타입스크립트는 오류 방지, 유지보수성, 개발 속도 측면에서 자바스크립트 대비 압도적인 장점을 제공합니다.
본 강의는 단순 문법이 아니라, 타입 시스템 → 컴파일러 → tsconfig → 실전 프로젝트 → TS 생태계 전망까지 타입스크립트를 완전히 이해하기 위한 흐름을 제공합니다.
타입스크립트
정적 타입 시스템
자바스크립트
런타임 기반 언어
Node.js
TS 실행 환경
DOM API
실전 웹 프로젝트
개발 환경
Node.js 18+ 기반 실행 환경
TS 컴파일러(tsc) 및 ts-node 활용
VS Code + TypeScript Language Service
브라우저 & 서버 환경 모두 실습
사용 기술 스택
타입스크립트 최신 버전 (2024 기준)
DOM 타입 안전성 기반 실전 프로젝트
제네릭, 인터페이스, 조건부 타입 등 고급 타입 기능
JSDoc & @ts-check 기반 타입 검사
1단계. 타입스크립트 이해하기
• 타입스크립트의 탄생 배경 · 자바스크립트와의 차이
• 타입 시스템 개념 정리
2단계. 컴파일러 & tsconfig
• tsc 동작 원리
• tsconfig.json 깊게 이해
3단계. 고급 타입 익히기
• 인터페이스, 제네릭, 조건부 타입
• 유틸리티 타입 실전 활용
4단계. 실전 프로젝트 제작
• DOM 조작 · 이벤트 타입 처리
• 클래스/모듈 설계 · 리팩토링
5단계. 타입스크립트 생태계 & 미래 전망
• JSDoc 타입 검사
• 프레임워크 타입스크립트 제거 이슈 분석
• TC39 타입 표준화 논의
1-1차시 소개
02
1-2차시 비주얼 스튜디오 코드에서 타입스크립트 이용하기
03
1-3차시 자바스크립트만 이해하는 브라우저와 서버
04
1-4차시 타입스크립트 변환하기
05
1-5차시 요약
06
2-1차시 섹션 소개
07
2-2차시 타입스크립트를 사용하는 두 가지 방법
08
2-3차시 공식 컴파일러 없이 타입스크립트 사용하기 01- Node에서 네이티브로
09
2-4차시 컴파일러 없이 타입스크립트 사용하기 02- 브라우저에서 네이티브로
10
2-5차시 컴파일러 없이 타입스크립트 사용하기 03- 라이브러리와 러너 이용하기
11
2-6차시 타입스크립트 컴파일러를 설치하는 3가지 방법
12
2-7차시 왜 Node가 타입스크립트 실행에 그렇게 인기가 있나요?
13
2-8차시 npm을 사용하여 첫 번째 타입스크립트 파일을 자바스립트로 컴파일하기
14
2-9차시 타입스크립트와 PATH 변수
15
2-10차시 배치 스크립트와 타입스크립트 실행 파일 이해하기
16
2-11차시 Bin 및 Lib 폴더 이해하기
17
2-12차시 셰뱅(Shebang) 라인과 닭-달걀 문제
18
2-13차시 타입스크립트 자체 호스팅 및 부트스트래핑
19
2-14차시 프로젝트를 위한 스크립트 파일 만들기
20
3-1차시 타입스크립트 구성 파일 추가하기
21
3-2차시 타입스크립트 최신 자바스크립트의 동기화
22
3-3차시 outDir 및 rootDir 속성 설정하기
23
3-4차시 파일 번들링
24
3-5차시 모듈
25
3-6차시 --watch 플래그 사용하기
26
4-1차시 암시적 및 명시적 타입
27
4-2차시 타입 별칭 및 인터페이스 소개
28
4-3차시 조건부 타입과 제네릭
29
4-4차시 프로그래밍 오류 코드 및 DOM 타입 캐스팅
30
4-5차시 이벤트 타입으로 이벤트 리스너 추가하기
31
4-6차시 타입스크립트 ES6 모듈 사용하기
32
4-7차시 객체(인터페이스 및 타입)와 readonly 접근 제어자
33
4-8차시 객체 레코드 타입
34
4-9차시 열거형
35
4-10차시 인터페이스 vs 타입
36
4-11차시 createBox 함수를 정의하고 인수 타입 설정하기
37
4-12차시 박스 스타일링 및 DOM에 추가하기
38
4-13차시 무작위 색상 생성 및 setColor 함수 정의하기
39
4-14차시 createBox 함수에서 공개 속성 반환하기
40
4-15차시 nounusedlocals 구성 속성
41
4-16차시 buildBox 함수 시작 및 기본 입력 검증 수행하기
42
4-17차시 setTimeout() 메서드 구현 및 박스 카운터 시작하기
43
4-18차시 배열과 튜플
44
4-19차시 모듈 가져오기 및 값과 필터를 사용하여 동적 배열 만들기
45
4-20차시 전역 Math 객체를 사용하여 무작위 박스 생성하기
46
4-21차시 타임아웃 - 제네릭 타입을 확장할 수 있나요?
47
4-22차시 타임아웃 - rgb() 메서드의 오류 수정하기
48
4-23차시 createBox() 함수 가져오기, 박스 생성 및 전역 배열에 추가하기
49
4-24차시 코드 테스트하기
50
4-25차시 BOMB이 반환될 때 요소 스타일링하기
51
4-26차시 최종 프로젝트 수정 및 테스트
52
4-27차시 클래스 문법을 사용하여 createBox 함수 정의하기
53
4-28차시 주 소스 파일 업데이트 및 클래스 코드 테스트하기
54
5-1차시 타입스크립트의 미래
55
5-2차시 JSDocs 및 //@ts-check
56
5-3차시 Svelte와 Turbo 8은 타입스크립트를 지원하나요?
57
5-4차시 타입스크립트에 대한 Drizzle 지원
58
5-5차시 타입 검사를 위한 새로운 ECMAScript 제안
59
6-1차시 마무리
첫번째 리뷰어가 되어주세요.
소중한 후기가 다른 분들께 도움이 될 거에요.
정가
86,000원
판매가
17,200원
총 결제 금액
80%
17,200원
86,000원
80%
17,200원